Getting StartedPerformance !!!Chart DataBar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates how to export DataViz Chart to Image.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Export to Image Example - JavaScript Chart by DataViz Charts </title> <link rel="stylesheet" type="text/css" href="../../css/dataviz.chart.css" /> <link rel="stylesheet" type="text/css" href="../../themes/le-frog/styles.css" /> <script src="../../js/dataviz.chart.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [ { offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white' } ] }; var chart = new DataViz.Chart({ title: 'Export to Image', legend: { visible: false }, border: { strokeStyle: '#6ba851' }, background: background, series: [ { type: 'column', title: 'Column', data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], ['E', 27], ['F', 85], ['D', 43], ['H', 29]] } ] }); chart.write('container'); function exportToImage() { var config = { fileName: 'Chart.png', type: 'image/png' // 'image/png' or 'image/jpeg' }; chart.exportToImage(config); } </script> </head> <body> <div> <div id="container" style="width: 500px; height: 300px;"> </div> <br /> <input id="button" type="button" onclick="exportToImage()" value="Export to Image" /> </div> </body> </html> |