Simple Clean SVG Chart Library – dopyo.js

Category: Chart & Graph , Javascript | August 29, 2018
Author: park108
Views Total: 1,200
Official Page: Go to website
Last Update: August 29, 2018
License: MIT

Preview:

Simple Clean SVG Chart Library – dopyo.js

Description:

dopyo.js is a standalone, simple-to-use JavaScript library for drawing animated, SVG based charts to visualize your dataset.

Currently supports Bar Chart, Column Chart, Line Chart, Stacked Bar Chart, and Pie Chart.

How to use it:

Download and import the main JavaScript file ‘dopyo.js’ into the html page.

<script src="lib/dopyo.js"></script>

Create a new chart instance with the following parameters:

  • Selector: a container to place the chart.
  • Chart Type: Bar, Column, Line, Stacked-Bar, or Pie.
let myChart = new Dopyo("container", "Bar");

Add values, legends, labels, and other attributes to the chart.

myChart.setLabels(["2013", "2014", "2015", "2016", "2017", "2018"]);

myChart.addLegend({"name": "Alpha", "values": [10, 20, 30, 40, 50, 60]});
myChart.addLegend({"name": "Bravo", "values": [65, 15, 25, 40, 60, 75]});
myChart.addLegend({"name": "Charlie", "values": [20, 45, 65, 45, 20, 70]});

myChart.setPadding(75, 30, 10, 0); 

myChart.setTitleText("Chart Title");

myChart.setGridYShow(true);

Draw the chart on the screen. Done.

d.draw();

You Might Be Interested In:


Leave a Reply