1 <html>2 <head>3 <title> Example Chart </title>4 <script language="javascript" src="http://www.google.com/jsapi"></script>5 </head>6 <body>7 8 <div id="chart"></div>9 10 <script type="text/javascript">11 var queryString = '';12 var dataUrl = '';13 14 function onLoadCallback() {15 if (dataUrl.length > 0) {16 var query = new google.visualization.Query(dataUrl);17 query.setQuery(queryString);18 query.send(handleQueryResponse);19 } else {20 var dataTable = new google.visualization.DataTable();21 dataTable.addRows(7);22 23 dataTable.addColumn('number');24 dataTable.addColumn('number');25 dataTable.setValue(0, 0, 20);26 dataTable.setValue(0, 1, 5);27 dataTable.setValue(1, 0, 30);28 dataTable.setValue(1, 1, 10);29 dataTable.setValue(2, 0, 40);30 dataTable.setValue(2, 1, 22);31 dataTable.setValue(3, 0, 50);32 dataTable.setValue(3, 1, 35);33 dataTable.setValue(4, 0, 60);34 dataTable.setValue(4, 1, 85);35 dataTable.setValue(5, 0, 70);36 dataTable.setValue(5, 1, null);37 dataTable.setValue(6, 0, 80);38 dataTable.setValue(6, 1, null);39 40 draw(dataTable);41 }42 }43 44 function draw(dataTable) {45 var vis = new google.visualization.ImageChart(document.getElementById('chart'));46 var options = {47 chs: '440x220',48 cht: 'lxy',49 chco: '3072F3,FF0000',50 chd: 't:10,20,40,80,90,95,99|20,30,40,50,60,70,80|-1|5,10,22,35,85',51 chdl: 'Ponies|Unicorns',52 chdlp: 'b',53 chls: '3,4,1|2,5,5',54 chma: '5,5,5,25',55 chm: 'D,FF0000,0,-1,5'56 };57 vis.draw(dataTable, options);58 }59 60 function handleQueryResponse(response) {61 if (response.isError()) {62 alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());63 return;64 }65 draw(response.getDataTable());66 }67 68 google.load("visualization", "1", {packages:["imagechart"]});69 google.setOnLoadCallback(onLoadCallback);70 71 </script>72 </body>73 </html>74 Este ShareCode tiene versiones:
- Example Chart ... (24/04/2013)
- Example Chart ... (24/04/2013)
- Example Chart ... (24/04/2013)
- Example Chart ... (24/04/2013)
Enlace
El enlace para compartir es: