Creating Line Chart using D3.js and DIMPLE.js

LinD3 (DATA-DRIVEN DOCUMENTS).js

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in the form of charts in web browsers.

D3 helps you bring data by using HTML, SVG and CSS.

SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Dimple.js

Dimple.js aims to give a gentle learning curve and minimal code to achieve something productive.

You must link d3.js and dimple.js . Simply add the following to your html:

  1. <script src="http://d3js.org/d3.v3.min.js"></script>  
  2. <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>  
Source code
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head lang="en">  
  4.         <meta charset="UTF-8">  
  5.             <title>Line chart using D3.js and Dimple.js</title>  
  6.         </head>  
  7.         <body>  
  8.             <div id="abhichart"></div>  
  9.         </body>  
  10.         <script src="http://d3js.org/d3.v3.js"></script>  
  11.         <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>  
  12. < script >  
  13. var svg = dimple.newSvg("#abhichart", 1500, 300),  
  14.     chart = null,  
  15.     s1 = null,  
  16.     s2 = null,  
  17.     x = null,  
  18.     y1 = null,  
  19.     y2 = null,  
  20.     data = [{  
  21.         "Subjects": "Python",  
  22.         "Value 1": 10000,  
  23.         "Year 1": 2014,  
  24.         "Value 2": 100,  
  25.         "Year 2": 2015  
  26.     }, {  
  27.         "Subjects": "Java",  
  28.         "Value 1": 1000,  
  29.         "Year 1": 2014,  
  30.         "Value 2": 300000,  
  31.         "Year 2": 2015  
  32.     }, {  
  33.         "Subjects": "C",  
  34.         "Value 1": 120000,  
  35.         "Year 1": 2014,  
  36.         "Value 2": 140000,  
  37.         "Year 2": 2015  
  38.     }];  
  39. chart = new dimple.chart(svg, data);  
  40. x = chart.addCategoryAxis("x", "Subjects");  
  41. y1 = chart.addMeasureAxis("y", "Value 1");  
  42. y2 = chart.addMeasureAxis("y", "Value 2");  
  43. s1 = chart.addSeries("Year 1", dimple.plot.line, [x, y1]);  
  44. s2 = chart.addSeries("Year 2", dimple.plot.line, [x, y2]);  
  45. chart.addColorAxis("Value 1", ["green", "yellow", "red"]);  
  46. chart.draw();  
  47. < /script>  
  48.  </html>  
Output

Ebook Download
View all
Learn
View all