Vytvoření grafu pomocí služby Google Developers

Více informací najdete zde

HTML KOD:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script type="text/javascript"> 

google.load('visualization', '1', {'packages':['motionchart']}); 

google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); 

// definujeme vstupní data

data.addColumn('string', 'Mesto'); 

data.addColumn('number', 'Date'); 

data.addColumn('number', 'Data'); 

// vkladame vstupní data

data.addRows([ ['Kosice',2009,0.003], ['Kosice',2010,0.003], ['Kosice',2011, 0.005],  ['Kosice',2012,0.008],]); 

var chart = new google.visualization.MotionChart(document.getElementById('chart_div')); 

chart.draw(data, {width: 600, height:300}); 

// Vychozí nastavení osy

var options = {};options['state'] ='{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_TIME","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]}};';chart.draw(data, options);} </script> 

<div id="chart_div" style="width: 600px; height: 300px;"></div>