Dynamic SVG Chart & Graph Library – RKGraphs.js

Preview:

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,
});