Dynamic SVG Chart & Graph Library – RKGraphs.js

Category: Chart & Graph , Javascript | December 13, 2017
Author:riteshkukreja
Views Total:1,012 views
Official Page:Go to website
Last Update:December 13, 2017
License:MIT

Preview:

Dynamic SVG Chart & Graph Library – RKGraphs.js

Description:

RKGraphs.js is a JavaScript library used for generating dynamic, customizable, svg based charts and graphs on the web page.

Charts and graphs supported:

  • Line Graph
  • Curve Graph
  • Pie Chart
  • Polygon Graph
  • Bar Graph
  • Multiple Graphs
  • Point Chart
  • Polyline Graph
  • Custom Graph
  • More…

How to use it:

Download and insert the main JavaScript library ‘RKGraphs.js’ into the web page.

<script src="RKGraphs.js"></script>

Create a Point graph with the given configurations.

myGraph = RKGraph.PointGraphGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  radius: 5;
  color: "blue",
  className: "",
  doDup: false,
  dupClass: "",
  averageLineColor: "red",
});

Create a bar chart with the given configurations.

myGraph = RKGraph.BarGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  color: "blue",
  direction: "left-right",
  stroke: false,
  barspacing: 20,
  className: "",
  doDup: false,
  dupClass: "",
  averageLineColor: "red",
  show2DVertices: true,
});

Create a line chart with the given configurations.

myGraph = RKGraph.LineGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  strokewidth: 5,
  color: "blue",
  className: "",
  doDup: false,
  dupClass: "",
  averageLineColor: "red",
  show2DVertices: true,
});

Create a Polyline graph with the given configurations.

myGraph = RKGraph.PolylineGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  gradient: null,
  color: "blue",
  direction: "left-right",
  stroke: false,
  strokewidth: 5,
  className: "",
  doDup: false,
  dupClass: "",
  averageLineColor: "red",
  show2DVertices: true,
});

Create a Polygon graph with the given configurations.

myGraph = RKGraph.PolygonGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  gradient: null,
  color: "blue",
  direction: "left-right",
  stroke: false,
  className: "",
  doDup: false,
  dupClass: "",
  averageLineColor: "red",
  show2DVertices = true,
});

Create a Pie graph with the given configurations.

myGraph = RKGraph.PieGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  color: "blue",
  stroke: false,
  className: "",
  doDup: false,
  dupClass: "",
  fixedcolumns: false,
  columns: [],
  show2DVertices: true
});

Create a Curve graph with the given configurations.

myGraph = RKGraph.CurveGraph({
  width: window.innerWidth,
  height: window.innerHeight,
  gradient: null,
  color: "blue",
  direction: "left-right",
  stroke: false,
  strokewidth: 5,
  className: "",
  doDup: false,
  dupClass: "",
  averageLineColor: "red",
  show2DVertices = true,
});

You Might Be Interested In:


Leave a Reply