<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Highcharts Demo - jsFiddle demo</title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
credits: {
enabled: false
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
navigation: {
buttonOptions: {
enabled: false
}
}
});
// the button handler
$('#buttonExport').click(function() {
var e = document.getElementById("ExportOption");
var ExportAs = e.options[e.selectedIndex].value;
if(ExportAs == 'PNG')
{
chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});
}
if(ExportAs == 'JPEG')
{
chart.exportChart({type: 'image/jpeg', filename: 'my-jpg'}, {subtitle: {text:''}});
}
if(ExportAs == 'PDF')
{
chart.exportChart({type: 'application/pdf', filename: 'my-pdf'}, {subtitle: {text:''}});
}
if(ExportAs == 'SVG')
{
chart.exportChart({type: 'image/svg+xml', filename: 'my-svg'}, {subtitle: {text:''}});
}
});
$('#buttonPrint').click(function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
});
});
//]]>
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px; margin-top: 1em"></div>
<select id="ExportOption">
<option value="PNG">PNG Image</option>
<option value="JPEG">JPEG Image</option>
<option value="PDF">PDF Document</option>
<option value="SVG">SVG Vector Image</option>
</select>
<button id="buttonExport">Export chart</button><button id="buttonPrint">Print chart</button>
</body>
</html>
