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.

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

AuthorLinksMade withLast update
riteshkukrejaOffice HomeJavaScriptSep 15, 2022

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

Leave a Reply

Your email address will not be published. Required fields are marked *