|
| 1 | +<html> |
| 2 | + |
| 3 | +<head> |
| 4 | +<style> |
| 5 | +body { |
| 6 | + width: 75%; |
| 7 | + margin: auto; |
| 8 | +} |
| 9 | +</style> |
| 10 | +<script type="text/javascript"> |
| 11 | +window.onload = function() { |
| 12 | + var chart = new CanvasJS.Chart("chartContainer", { |
| 13 | + theme: "light2", // "light1", "dark1", "dark2" |
| 14 | + animationEnabled: true, |
| 15 | + exportEnabled: true, |
| 16 | + title: { |
| 17 | + text: "Basic Column Chart" |
| 18 | + }, |
| 19 | + data: [{ |
| 20 | + // Change type to "bar", "area", "spline", "pie",etc. |
| 21 | + type: "column", |
| 22 | + dataPoints: [{ |
| 23 | + label: "apple", |
| 24 | + y: 10 |
| 25 | + }, { |
| 26 | + label: "orange", |
| 27 | + y: 15 |
| 28 | + }, { |
| 29 | + label: "banana", |
| 30 | + y: 25 |
| 31 | + }, { |
| 32 | + label: "mango", |
| 33 | + y: 30 |
| 34 | + }, { |
| 35 | + label: "grape", |
| 36 | + y: 28 |
| 37 | + }] |
| 38 | + }] |
| 39 | + }); |
| 40 | + chart.render(); |
| 41 | + //CanvasJSDataAsJSON(chart, ["Filename"]); //Filename is optional - defaults to "chart-data" |
| 42 | + CanvasJSDataAsJSON(chart, "Chart Data"); |
| 43 | +} |
| 44 | +</script> |
| 45 | +</head> |
| 46 | + |
| 47 | +<body> |
| 48 | + <h1 id="exportcanvasjschartdataasjson">Export CanvasJS Chart Data as JSON</h1> |
| 49 | + <p>This plugin allows you to export and save CanvasJS Chart's data as JSON.</p> |
| 50 | + <h2 id="canvasjs">CanvasJS</h2> |
| 51 | + <p>CanvasJS is an HTML5 & JavaScript based Charting Library that runs on all modern devices including iPhone, Android, Desktops, etc. Charts are beautiful and API is very simple to use.</p> |
| 52 | + <h4 id="canvasjsfeatures">CanvasJS Features:</h4> |
| 53 | + <ul> |
| 54 | + <li>Simple API and easy to use</li> |
| 55 | + <li>Supports 30+ different types of Charts / Graphs</li> |
| 56 | + <li>10x faster than conventional Flash / SVG based Charting Libraries</li> |
| 57 | + <li>Comes with Several beautiful looking themes</li> |
| 58 | + <li>Well Maintained and Updated Documentation</li> |
| 59 | + <li>Works across browsers (Chrome, Firefox, Safari, IE8+)</li> |
| 60 | + <li>Can be integrated with Serverside and Frontend technologies like ASP.Net, PHP, Spring MVC, JSP, jQuery, Angular, React, etc.</li> |
| 61 | + </ul> |
| 62 | + <h4 id="howtouse">How to Use?</h4> |
| 63 | + <ul> |
| 64 | + <li>Create and Render CanvasJS Chart</li> |
| 65 | + <li>Call CanvasJSDataAsJSON method with chart and filename as parameter</li> |
| 66 | + </ul> |
| 67 | + <pre><code>var chart = new CanvasJS.Chart("chartContainer", { |
| 68 | + . |
| 69 | + . |
| 70 | + . |
| 71 | + //Chart Options |
| 72 | + . |
| 73 | + . |
| 74 | + . |
| 75 | +}); |
| 76 | +chart.render(); |
| 77 | + |
| 78 | +CanvasJSDataAsJSON(chart, "filename"); |
| 79 | +</code></pre> |
| 80 | + <h4>Live Example</h4> |
| 81 | + <div id="chartContainer" style="height: 400px; width: 60%;"></div> |
| 82 | + <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script> |
| 83 | + <script src="dist/canvasjsasjson.min.js"> </script> |
| 84 | +</body> |
| 85 | + |
| 86 | +</html> |
0 commit comments