gc_out7_test.html 3.51 KB
Newer Older
1 2 3
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
incardon's avatar
incardon committed
4
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5 6 7 8
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

incardon's avatar
incardon committed
9 10 11 12 13 14 15 16 17 18
function exportToSVG(i)
{
var e = document.getElementById('chart_div'+i);
var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
var pos = svg.lastIndexOf("</svg>");
pos += 6;
svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
$(this).attr({'href': svgData,'target': '_blank'});
}
19 20

      function drawVisualization() {
Pietro Incardona's avatar
Pietro Incardona committed
21 22 23 24 25 26 27
var data0 = new google.visualization.DataTable();
data0.addColumn('string','X Axis');
data0.addColumn('number','dataset1');
data0.addColumn('number','dataset2');
data0.addColumn('number','dataset3');
data0.addColumn('number','dataset4');
data0.addRows([
28 29 30 31 32 33 34
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
['colum4',1,6,3,2],
['colum5',3,3,0,6],
['colum6',2,1,4,6],
]);
Pietro Incardona's avatar
Pietro Incardona committed
35 36 37 38 39 40 41
var data1 = new google.visualization.DataTable();
data1.addColumn('string','X Axis');
data1.addColumn('number','dataset1');
data1.addColumn('number','dataset2');
data1.addColumn('number','dataset3');
data1.addColumn('number','dataset4');
data1.addRows([
42 43 44 45 46 47 48
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
['colum4',1,6,3,2],
['colum5',3,3,0,6],
['colum6',2,1,4,6],
]);
Pietro Incardona's avatar
Pietro Incardona committed
49 50 51 52 53 54 55
var data2 = new google.visualization.DataTable();
data2.addColumn('string','X Axis');
data2.addColumn('number','dataset1');
data2.addColumn('number','dataset2');
data2.addColumn('number','dataset3');
data2.addColumn('number','dataset4');
data2.addRows([
56 57 58 59 60 61 62 63 64 65 66 67
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
['colum4',1,6,3,2],
['colum5',3,3,0,6],
['colum6',2,1,4,6],
]);
var options0= {
title : 'Example',
vAxis: {title: 'Y Axis'},
hAxis: {title: 'X Axis'},
seriesType: 'bars',
Pietro Incardona's avatar
Pietro Incardona committed
68
series: {3: {type: 'line'}}};
69 70 71 72 73
var options1= {
title : 'Example',
vAxis: {title: 'Y Axis'},
hAxis: {title: 'X Axis'},
seriesType: 'bars',
Pietro Incardona's avatar
Pietro Incardona committed
74
series: {3: {type: 'line'}}};
75 76 77 78 79
var options2= {
title : 'Example',
vAxis: {title: 'Y Axis'},
hAxis: {title: 'X Axis'},
seriesType: 'bars',
Pietro Incardona's avatar
Pietro Incardona committed
80
series: {3: {type: 'line'}}};
incardon's avatar
incardon committed
81
$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
82
var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
incardon's avatar
incardon committed
83
$("#export_svg1").on("click", function (event) {exportToSVG.apply(this,[1]);});
84
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));chart.draw(data1, options1);
incardon's avatar
incardon committed
85
$("#export_svg2").on("click", function (event) {exportToSVG.apply(this,[2]);});
86 87 88 89
var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));chart.draw(data2, options2);
}</script>
</head>
<body>
incardon's avatar
incardon committed
90 91 92
<h2>Before first graph</h2><a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
<h2>Before second graph</h2><a href="#" download="graph1.svg" id="export_svg1"><button>Export data into svg</button></a><div id="chart_div1" style="width: 900px; height: 500px;"></div>
<h2>Before third graph</h2><a href="#" download="graph1.svg" id="export_svg2"><button>Export data into svg</button></a><div id="chart_div2" style="width: 900px; height: 500px;"></div>
93 94
<h2>At the end</h2></body>
</html>