Press "Enter" to skip to content

Simple SVG Graph API for Creating Multiple Graphs Using Vanilla JS

RKGraph JS is a simple SVG-based graphing library for creating dynamic graphs in JavaScript and Angular JS. Predefined graphs consist of line, point, pie, polyline, polygon, and curve graphs. It also provides a way to create your own graph using a combination of predefined graphs and your imagination.

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 make use of it:

1. Download and insert the main JavaScript library “RKGraphs.js” into the webpage.

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

2. Create a bitmap with the specified configurations.

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

4. Create a line chart with the specified configurations.

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

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

7. Create a pie chart 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
});

8. Create a curve graph with the specified 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,
});

dynamic svg chart & graph library, RKGraph JS Plugin/Github


See Demo And Download

Official Website(riteshkukreja): Click Here

This superior jQuery/javascript plugin is developed by riteshkukreja. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.