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