How can i add images in google visualization chart.
Below is the script which i am trying
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(0,0,0,12,0,0), new Date(0,0,0,12,3,0) ],
[ 'President', '<img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&g=1">John Adams', new Date(0,0,0,12,3,3), new Date(0,0,0,12,14,0) ],
[ 'President', 'Thomas Jefferson', new Date(0,0,0,12,15,1), new Date(0,0,0,12,28,0) ],
[ 'President', '', new Date(0,0,0,13,0, 0), new Date(0,0,0,13,0,0) ]
]);
var options = {
timeline: { groupByRowLabel: true },
allowHTML: true,
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['timeline']}]}"></script>
<div id="example4.2" style="height: 200px;"></div>
Please help me to understand what I am missing here.
It seems that allowHTML option is not supported for google.visualization.Timeline object, but you could consider to customize SVG (insert image into bar in this example) once the chart is rendered as demonstrated below:
google.load('visualization', '1.0', {
'packages': ['timeline','annotatedtimeline']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]]);
var options = {
timeline: { groupByRowLabel: false}
};
chart.draw(dataTable, options);
configureChart();
}
function configureChart() {
var chartContainer = document.getElementById('example4.2');
var svg = chartContainer.getElementsByTagName('svg')[0];
var barLabels = svg.querySelectorAll("text[text-anchor='start']");
for (var i = 0; i < barLabels.length; i++) {
if (barLabels[i].innerHTML == "George Washington") {
var barArea = barLabels[i].previousSibling;
var x = barArea.getAttribute('x');
var y = barArea.getAttribute('y');
var presidentIcon = createImage({ href: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Lawrence_Washington.jpg', x: x, y: y, width: 20, height: 20 });
barArea.parentElement.appendChild(presidentIcon);
barLabels[i].setAttribute('x', parseFloat(x) + 20);
}
}
}
function createImage(options) {
var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttributeNS(null, 'height', options.height);
image.setAttributeNS(null, 'width', options.width);
image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);
image.setAttributeNS(null, 'x', options.x);
image.setAttributeNS(null, 'y', options.y);
image.setAttributeNS(null, 'visibility', 'visible');
return image;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="example4.2" style="height: 600px;"></div>
Related
I'm trying for days with no success to get columns aggregated. I also searched everwhere and found nothing. I want to get column 1 (string with multiple identical values) grouped and sum columns 6,7,8 (numbers) and after I want to select an option to display column 6,7 or 8.
I hope I'm being very clear and a solution would help a lot of people.
Below I would like to share some piece of code.
This example is similar: http://jsfiddle.net/guilhermelight1/fcqeA/80/
I also tried calc: function()...
function drawVisualization() {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxxxxx&sheet=data');
query.setQuery("select B,I,J,O,P,Q,R,S,T where O is not null Order by Q desc ");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var tableChartB = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_divB',
'options': {
'width': '100%'
},
'view': {'columns': [0,1,2,3,4,5,6,7,8]}
});
var columnChart2 = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'Column_div',
'view': {'columns': [1,6,7,8]},
'options': {
'bar': {'groupWidth': '95%'},
'backgroundColor': 'transparent',
'animation': {'duration': 1000, 'easing': 'out'},
'legend': { 'position': 'top', 'alignment': 'start' },
'width': '100%',
'height': '90%',
'chartArea': {'top': '10%', 'width': '85%','height': '80%' },
'displayAnnotations': 'true',
'hAxis': {'gridlines': { 'count': 40, 'color': 'transparent' } ,'textStyle':{'fontSize': 8.5}, 'slantedText': false, 'showTextEvery': 1,'minTextSpacing': 0,},
'tooltip.isHtml': 'true',
'pointSize': 2,
'allowHtml': true,
'vAxis': {'textStyle': {'fontSize': 9,'color': '#585858'},'minTextSpacing': 0},
// 'dataTable' : google.visualization.data.group(data, [1],[{'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
}});
google.visualization.events.addListener(tableChartB, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart2.setDataTable( google.visualization.data.group(
// get the filtered results
tableChartB.getDataTable(),
[1],
[{'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart2.draw();
});
google.visualization.events.addListener(tableChartB, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart2.setDataTable( google.visualization.data.group(
// get the filtered results
tableChartB.getDataTable(),
[1],
[{'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart2.draw();
});
$('#subc').change(function () {
var options = $("#subc option");
var optionSelected = options.index(options.filter(":selected"));
if (optionSelected === 0) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,6,7,8 ]
});
columnChart2.setOption('colors', ["#FFC000","#00b0f0","#ff0000"]);
} else if (optionSelected === 1) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,{
'type': 'number',
'label': 'Average',
'calc': function (dt, row) {
return group.getValue(0, 1);
}, 6 ]
});
columnChart2.setOption('colors', ["#FFC000"]);
} else if (optionSelected === 2) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,7]
});
columnChart2.setOption('colors', ["#00b0f0"]);
} else if (optionSelected === 3) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,8 ]
});
columnChart2.setOption('colors', ["#ff0000"]);
} else {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,6,7,8 ]
});
columnChart2.setOption('colors', ["#FFC000","#00b0f0","#ff0000"]);
}
drawChart();
});
}
<label class="google-visualization-controls-label"></label>
<select id="subc" class="filter">
<option selected="selected" value="a1">Dia-h</option>
<option value="a2">Dia</option>
<option value="a3">Calendário</option>
<option value="a4">Hora</option>
</select>
not sure i completely follow the question, see following working snippet...
adjusted from posted fiddle...
google.charts.load('current', {
callback: drawVisualization,
packages:['controls']
});
function drawVisualization() {
// Prepare the data
var jsonData = '{"cols":[{"label":"Subject","type":"string"},{"label":"pete","type":"number"},{"label":"john","type":"number"},{"label":"carl","type":"number"},{"label":"andrea","type":"number"}],"rows":[{"c":[{"v":"coolness"},{"v":4.4},{"v":4.3},{"v":3.1},{"v":4.3}]},{"c":[{"v":"sexyness"},{"v":4.2},{"v":3.8},{"v":3.6},{"v":4.8}]},{"c":[{"v":"toughness"},{"v":3.1},{"v":2.7},{"v":2.4},{"v":2.9}]},{"c":[{"v":"chillnes"},{"v":4.4},{"v":4.4},{"v":4.2},{"v":4.5}]},{"c":[{"v":"madness"},{"v":4.6},{"v":4.6},{"v":4},{"v":4.6}]},{"c":[{"v":"lochness"},{"v":3.9},{"v":3.7},{"v":2.9},{"v":3.9}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]}]}';
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var compPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Subject',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a chart
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {'title':'Competenties',
'width':'100%',
'height':300,
'vAxis': {
viewWindow: {max:5,min:0},
gridlines: {color:'#CCC', count: 6}
},
bar: { groupWidth: '80%' },
colors: ["#FFC000","#00b0f0","#ff0000","#92d050"]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '400px'
}
});
var groupData;
var groupTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart3',
options: {
width: 400
}
});
google.visualization.events.addListener(table, 'ready', function() {
groupData = google.visualization.data.group(
table.getDataTable(),
[0],
[
{
aggregation: google.visualization.data.sum,
column: 1,
label: data.getColumnLabel(1),
type: 'number'
},
{
aggregation: google.visualization.data.sum,
column: 2,
label: data.getColumnLabel(2),
type: 'number'
},
{
aggregation: google.visualization.data.sum,
column: 3,
label: data.getColumnLabel(3),
type: 'number'
},
{
aggregation: google.visualization.data.sum,
column: 4,
label: data.getColumnLabel(4),
type: 'number'
}
]
);
groupTable.setDataTable(groupData);
groupTable.draw();
});
// Create a dashboard
var drawChart = new google.visualization.Dashboard(document.getElementById('dashboard')).bind([compPicker], [chart, table]);
drawChart.draw(data);
document.getElementById('names').addEventListener('change', function (evt) {
var colors = ["#FFC000", "#00b0f0", "#ff0000", "#92d050"];
var viewColumns = {columns: []};
var viewColors = [];
switch (evt.target.selectedIndex) {
case 0:
$.each(new Array(evt.target.options.length), function (index) {
viewColumns.columns.push(index);
if (index > 0) {
viewColors.push(colors[index - 1]);
}
});
break;
default:
viewColumns.columns.push(0);
viewColumns.columns.push(evt.target.selectedIndex);
viewColors.push(colors[evt.target.selectedIndex - 1]);
}
chart.setView(viewColumns);
chart.setOption('colors', viewColors);
groupTable.setView(viewColumns);
drawChart.draw(data);
}, false);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<select id="names">
<option value="0">all</option>
<option value="1">pete</option>
<option value="2">john</option>
<option value="3">carl</option>
<option value="4">andrea</option>
</select>
<table>
<tr style='vertical-align: top'>
<td>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
I use the piwik php api to generate data like this:
[
{"label":"1680x1050","nb_visits":9,"nb_actions":53,"max_actions":27,"sum_visit_length":3051,"bounce_count":3,"nb_visits_converted":0,"sum_daily_nb_uniq_visitors":7,"sum_daily_nb_users":0,"segment":"resolution==1680x1050"},
{"label":"1440x900","nb_visits":1,"nb_actions":1,"max_actions":1,"sum_visit_length":0,"bounce_count":1,"nb_visits_converted":0,"sum_daily_nb_uniq_visitors":1,"sum_daily_nb_users":0,"segment":"resolution==1440x900"}
]
and i want to use chart.js to visualize this data, at the moment my code looks like this and doesn't work:
var chartjsData = [];
var chartjsLabel = [];
$.getJSON("piwik.php", function (json) {
///src = http://stackoverflow.com/questions/24696329/how-to-use-json-data-in-chart-js
for (var i = 0; i < json.length; i++) {
chartjsData.push(json[i].nb_visits);
chartjsLabel.push(json[i].label);
}
});
var barChartData = {
labels :[chartjsLabel],datasets : [
{
fillColor : "rgba(220,280,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : chartjsData
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
});
can maybe someone give me a working example how to work with chart.js and piwik's json data, or a hint how to get this working, thanks alot!
I got it like this:
var label = [];
var data = [];
$.getJSON("piwik.php", function (json) {
for (var i = 0; i < json.length; i++) {
label.push(json[i].label);
data.push(json[i].nb_visits);
}
graph();
});
function graph(){
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: label,
datasets: [{
label: '',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
],
borderWidth: 1
}]
},
options: {
}
});
};
I have 2 tempsensors that send their temp every ten min to firebase.
My firebase is structured like this:
{
AB: {
-K9kbKg4iqzaGP_mbKIC: {
date: "05 Feb 2016 08:47:27 +0000",
value: "013.2"
},
BattLevel: {}
},
AC: {
-K9kaqlycXMDbH-LpVrH: {
date: "05 Feb 2016 08:45:19 +0000",
value: "009.4"
},
BattLevel: {}
}
}
I would like to create a Google chart
But i don't seem to get the Json parsing wright.
I can add the temp of 1 sensor to display if i set the json path to
https://tempraspberry.firebaseio. com/AB.json
/<script>
// onload callback
function drawChart() {
// JSONP request
var jsonData = $.ajax({
url: 'https://tempraspberry.firebaseio.com/AB.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var data1 = new google.visualization.DataTable();
data1.addColumn('datetime', 'Time');
data1.addColumn('number', 'Temp');
$.each(results, function (i, row) {
data1.addRow([
(new Date(row.date)),
parseFloat(row.value)
]);
});
//tweede chart
var jsonData = $.ajax({
url: 'https://tempraspberry.firebaseio.com/AC.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var data2 = new google.visualization.DataTable();
data2.addColumn('datetime', 'Time');
data2.addColumn('number', 'Temp');
$.each(results, function (i, row) {
data2.addRow([
(new Date(row.date)),
parseFloat(row.value)
]);
});
});
//einde tweede chart
});
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(joinedData, {
height: 300,
width: 600,
interpolateNulls: true
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
I get can't find variable data1 with the above code.
Looks like a scope issue, declare the DataTable up front, something like this...
function drawChart() {
var data;
var sensors;
sensors = ['AB', 'AC'];
data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temp');
// start process
requestData();
function requestData() {
var nextSensor;
if (sensors.length > 0) {
nextSensor = sensors.pop();
$.ajax({
url: 'https://tempraspberry.firebaseio.com/' + nextSensor + '.json',
data: {page: 1},
dataType: 'jsonp',
}).done(loadData);
} else {
loadChart();
}
}
function loadData(results) {
$.each(results, function (i, row) {
data.addRow([
(new Date(row.date)),
parseFloat(row.value)
]);
});
requestData();
}
function loadChart() {
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 300,
width: 600,
interpolateNulls: true
});
}
}
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
Thanks with small adjustments it works now.
I now have 2 datatables that show on one Google Chart.
I know the code probably isn't pretty but it works :-)
<script>
function drawChart() {
var data1;
var data2;
var sensors;
sensors = ['AB', 'AC'];
data1 = new google.visualization.DataTable();
data2 = new google.visualization.DataTable();
data1.addColumn('date', 'Tijd');
data1.addColumn('number', 'Paleis Zora');
data2.addColumn('date', 'Tijd');
data2.addColumn('number', 'Buiten');
// start process
requestData();
function requestData() {
$.ajax({
url: 'https://tempraspberry.firebaseio.com/AB.json',
data: {page: 1},
dataType: 'jsonp',
}).done(loadData);
}
//eerste datatable
function loadData(results) {
$.each(results, function (i, row) {
data1.addRow([
(new Date(row.date)),
parseFloat(row.value)
]);
});
requestData2();
}
//tweededatatable
function requestData2() {
$.ajax({
url: 'https://tempraspberry.firebaseio.com/AC.json',
data: {page: 1},
dataType: 'jsonp',
}).done(loadData2);
}
//eerste datatable
function loadData2(results) {
$.each(results, function (i, row) {
data2.addRow([
(new Date(row.date)),
parseFloat(row.value)
]);
});
loadChart();
}
function loadChart() {
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(joinedData, {
height: 500,
width: 800,
interpolateNulls: true
});
}
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
As I was looking at the question How do I select which columns from my CSV to chart with HighChart? I tried to apply it using a csv file but I could not get it to work!
What am I doing wrong? Thank you in advance:
$(function () {
//var data = "Year,Month,Day,Hour,Time,kWh,Savings,Total kWh\n2013,02,06,11,11:00,0,0,308135\n2013,02,06,11,11:59,15,1.875,308150\n2013,02,06,12,12:59,27,3.375,308177\n2013,02,06,13,13:59,34,4.25,308211\n2013,02,06,14,14:59,32,4,308243";
var options = {
chart: {
renderTo: 'EXAMPLE',
defaultSeriesType: 'line'
},
title: {
text: 'Current Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: hassayampa.csv',
x: -20
},
xAxis: {
type: 'datetime'
},
yAxis:{
title: {
text: 'Temperature (\xB0C)'
},
//min: 0
},
legend:{
layout: 'vertical',
//backgroundColor: '#FFFFFF',
//floating: true,
align: 'left',
//x: 100,
verticalAlign: 'top',
//y: 70,
borderWidth: 0
},
series: [{
name: 'PRIM OUT TEMP',
data: []
}, {
name: 'SEC OUT TEMP',
data: []
}]
};
// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if(lineNo !== 0) {
var x = + new Date(items[1]+'/'+items[2]+'/'+items[0]+' '+items[4]),
kwh = parseFloat(items[5]),
savings = parseFloat(items[6]);
if(!isNaN(kwh) && !isNaN(savings)){
options.series[0].data.push([x,kwh]);
options.series[1].data.push([x,savings])
}
}
});
});
new Highcharts.Chart(options);
});
Here is the jsfiddle:http://jsfiddle.net/tonystinge/3bQne/1223/
I got it now...
// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){
// parsing here...
});
new Highcharts.Chart(options);
});
Your problem is the placement of the new Highcharts.Chart(options) call. $.get (like most ajax calls) is asynchronous So the new Highcharts will be called before it completes.
Change it to this:
// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if(lineNo !== 0) {
var x = + new Date(items[1]+'/'+items[2]+'/'+items[0]+' '+items[4]),
kwh = parseFloat(items[5]),
savings = parseFloat(items[6]);
if(!isNaN(kwh) && !isNaN(savings)){
options.series[0].data.push([x,kwh]);
options.series[1].data.push([x,savings])
}
}
});
new Highcharts.Chart(options); // this is now in the $.get callback function
});
This code block is working well on page is loading--
<script type="text/javascript">
google.load("visualization", "1", { packages: ["map"] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name'],
[22.1589, 90.1165, 'BARGUNA'],
[22.6953, 90.3538, 'BARISAL'],
]);
var options = {
showLine: false,
showTip: true,
zoomLevel: 7,
mapType: 'terrain'
};
var map = new google.visualization.Map(document.getElementById('map_canvas'));
map.draw(data, options);
}
</script>
This code block is for a specific div hover event. But it is not working--
<script>
$(function () {
$('#tab-dhakadivision').hover(function () {
google.load("visualization", "1", { packages: ["map"] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name'],
[23.78069, 90.41932, 'DHAKA'],
[23.60113, 89.83923, 'FARIDPUR'],
[24.11119, 90.42584, 'GAZIPUR']
]);
var options = {
showLine: false,
showTip: true,
zoomLevel: 7,
mapType: 'terrain'
};
var dmap = new google.visualization.Map(document.getElementById('map_canvas'));
dmap.draw(data, options);
}
});
});
</script>
Any suggestion ?