RKGraphs.js | Creating SVD Based Charts and Graphs Dynamically with JavaScript

RKGraphs.js is a JavaScript chart library, we can use it to create some customizable, svg based charts and graphs dynamically for web app.

The type of RKGraphs.js supports

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

How to create chats using RKGraphs.js?

1.Import RKGraphs.js in your html page

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

2.Create a Point graph with PointGraphGraph

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

3.Create a bar chart with BarGraph

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

4.Create a line chart with LineGraph

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

5.Create a Polyline graph with PolylineGraph

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

6.Create a Polygon graph with PolygonGraph

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

7.Create a Pie graph PieGraph

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

8.Create a Curve graph with CurveGraph

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