Re: Include multiple google visualization charts in one html page.
10,739 views
Skip to first unread message
asgallant
Aug 6, 2012, 12:06:31 PM8/6/12
to google-visua...@googlegroups.com
Basically, you have two options:
1) draw each chart in it's own draw function, and create a single initializing function that calls all of the draw functions, or
2) move all of the chart's code into a single function.
The first would look like this:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(init);
function init () {
drawChart1();
drawChart2();
// etc....
}
function drawChart1 () {
// code for the first chart
}
function drawChart2 () {
// code for the second chart
}
// etc....
google.setOnLoadCallback(init);
function init () {
drawChart1();
drawChart2();
// etc....
}
function drawChart1 () {
// code for the first chart
}
function drawChart2 () {
// code for the second chart
}
// etc....
and the second would look like this:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts () {
var data1 = google.visualization.arrayToDataTable(/*data for chart 1*/);
// do things with data1
var options1 = {/*options for chart 1*/};
var chart1 = new google.visualization.<ChartType>(document.getElementById('chart1_div'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable(/*data for chart 2*/);
// do things with data2
var options2 = {/*options for chart 2*/};
var chart2 = new google.visualization.<ChartType>(document.getElementById('chart2_div'));
chart2.draw(data2, options2);
var data3 = google.visualization.arrayToDataTable(/*data for chart 3*/);
// do things with data3
var options3 = {/*options for chart 3*/};
var chart3 = new google.visualization.<ChartType>(document.getElementById('chart3_div'));
chart3.draw(data3, options3);
// etc....
}
also, if you need to load multiple visualization packages (required if you use some charts like annotatedTimelines or geocharts), you still call google.load(...) only once, but you add additional packages, like this:
google.setOnLoadCallback(drawCharts);
function drawCharts () {
var data1 = google.visualization.arrayToDataTable(/*data for chart 1*/);
// do things with data1
var options1 = {/*options for chart 1*/};
var chart1 = new google.visualization.<ChartType>(document.getElementById('chart1_div'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable(/*data for chart 2*/);
// do things with data2
var options2 = {/*options for chart 2*/};
var chart2 = new google.visualization.<ChartType>(document.getElementById('chart2_div'));
chart2.draw(data2, options2);
var data3 = google.visualization.arrayToDataTable(/*data for chart 3*/);
// do things with data3
var options3 = {/*options for chart 3*/};
var chart3 = new google.visualization.<ChartType>(document.getElementById('chart3_div'));
chart3.draw(data3, options3);
// etc....
}
also, if you need to load multiple visualization packages (required if you use some charts like annotatedTimelines or geocharts), you still call google.load(...) only once, but you add additional packages, like this:
google.load("visualization", "1", {packages:["corechart", "geochart"]});
On Monday, August 6, 2012 4:26:25 AM UTC-4, kilito wrote:
On Monday, August 6, 2012 4:26:25 AM UTC-4, kilito wrote:
Dear all,I am relatively new to all this. I have some basic html experience, and am able to design a few single charts. It's mostly trialing my code on test page until it shows up as I want it to.
Now, I have searched for this, but explanations differ from forum to forum and I'd love a suggestion to my particular problem, so I can learn from there and adapt it.
I have multiple charts that work perfectly, all I now need is to add them into one page (roughly eight of them). I have tried it, to no avail.
Please see example charts below.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Avg Price'],
['Carpet Cleaner A', 35.6],
['Carpet Cleaner B', 44.2]
]);
var formatter = new google.visualization.NumberFormat({
prefix: '\u20AC'
});
formatter.format(data, 1);
var options = {
title: 'Average Price (\u20AC)',
titleTextStyle: {color: '#201069', fontName: 'Calibri', fontSize: 24},
legend: {position: 'none'},
vAxis: {'format': '\u20AC#.##',minValue: 0},
colors:['#0D23B7'],
hAxis: {font: 12}
};var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Customers','16-25yo','26-40yo','41+ yo'],
['',0.516,0.299,0.185]
]);
// format the second row as a percent
var formatter = new google.visualization.NumberFormat({
pattern: '#,###%'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
var options = {
title: 'Customer Age Demographics',titleTextStyle: {color: 'black', fontName: 'Calibri', fontSize: 24},
isStacked: 'true',
legend: {position: 'bottom'},
hAxis: {format: '#,###%'}
};var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
Thank you so much in advance for any help.
Kilian
Ian Haylock
Mar 12, 2013, 11:49:09 AM3/12/13
to google-visua...@googlegroups.com
hi asgallant, ian again.. could you help me please?... how two different charts im trying to combine.. im following your second option listed above.. my question is: how do i combine the json data to feed each graph data ??? im including what i thougth it could work for me but it doesnt work.. (im not tht good at this but im trying to get better) this is what i have after combining both individual charts into one single file trying to show both in the same page:
btw, im using a search criteria to let the user pick what date and two more options to select data to show in charts:
***********************************************************************
<?php
/* categoria search criteria */
if ($_REQUEST["categoria"]<>'') {
$search_categoria = "AND categoria='".mysql_real_escape_string($_REQUEST["categoria"])."'";
$categoria = mysql_real_escape_string($_REQUEST["categoria"]);
}
/* tipo search criteria */
if ($_REQUEST["tipo"]<>'') {
$search_tipo = "AND tipo='".mysql_real_escape_string($_REQUEST["tipo"])."'";
$tipo = mysql_real_escape_string($_REQUEST["tipo"]);
}
/* if FROM, CATEGORIA and TIPO are selected */
if ($_REQUEST["categoria"]<>'' and $_REQUEST["from"]<>'' and $_REQUEST["tipo"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw, categoria, tipo FROM planta, diarioplanta, categoria, tipo WHERE idplanta=planta_idplanta AND categoria_idcategoria=idcategoria AND tipo_idtipo=idtipo AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."'". $search_categoria.$search_tipo ." order by planta";
//ASIGNANDO VARIABLES PARA TITULO DEL GRAFICO
$fecha1=mysql_real_escape_string($_REQUEST["from"]);
$mostrando = "Disponibilidad en MW - $fecha1, $categoria, $tipo ";
}
/* if only CATEGORIA and date FROM are selected */
else if ($_REQUEST["categoria"]<>'' and $_REQUEST["from"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw, categoria FROM planta, diarioplanta, categoria WHERE idplanta=planta_idplanta AND categoria_idcategoria=idcategoria AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."'". $search_categoria ." order by planta";
//ASIGNANDO VARIABLES PARA TITULO DEL GRAFICO
$fecha1=mysql_real_escape_string($_REQUEST["from"]);
$mostrando = "Disponibilidad en MW - $fecha1, $categoria ";
}
/* if only date FROM and TIPO are selected */
else if ($_REQUEST["tipo"]<>'' and $_REQUEST["from"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw, tipo FROM planta, diarioplanta, tipo WHERE idplanta=planta_idplanta AND tipo_idtipo=idtipo AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."'". $search_tipo ." order by planta";
//ASIGNANDO VARIABLES PARA TITULO DEL GRAFICO
$fecha1=mysql_real_escape_string($_REQUEST["from"]);
$mostrando = "Disponibilidad en MW - $fecha1, $tipo ";
}
/* if only FROM is selected */
else if ($_REQUEST["from"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw FROM planta, diarioplanta WHERE idplanta=planta_idplanta AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."' order by planta";
$mostrando="Disponibilidad en fecha seleccionada ";
$query_total_portipo = "select tipo, sum(disponibilidadmw) from diarioplanta, planta, tipo where planta_idplanta=idplanta AND tipo_idtipo=idtipo AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."' group by tipo";
}
/* if nothing is selected this is the default initial view */
else {
$query_disponibilidad ="SELECT planta, capacidadMW, disponibilidadmw FROM planta, diarioplanta WHERE idplanta=planta_idplanta AND fecha ='2013-01-09' order by planta";
$mostrando="Disponibilidad acumulada";
$query_total_portipo = "select tipo, sum(disponibilidadmw) from diarioplanta, planta, tipo where planta_idplanta=idplanta AND tipo_idtipo=idtipo group by tipo";
}
/* db to Json for disponibilidad*/
$sth1 = mysql_query ($query_disponibilidad ) or die ('request "Could not execute SQL query" '.$query_disponibilidad);
if (mysql_num_rows($sth1)>0) {
$rows1 = array();
$flag = true;
$table1 = array();
$table1['cols'] = array(
array('label' => 'planta', 'type' => 'string'),
array('label' => 'capacidad MW', 'type' => 'number'),
array('label' => 'disponibilidad MW', 'type' => 'number')
);
$rows1 = array();
while($r1 = mysql_fetch_assoc($sth1)) {
$temp1 = array();
$temp1[] = array('v' => (string)$r1['planta']);
$temp1[] = array('v' => (float) $r1['capacidadMW']);
$temp1[] = array('v' => (float) $r1['disponibilidadmw']);
$rows1[] = array('c' => $temp1);
}
$table1['rows'] = $rows1;
$jsonTable1 = json_encode($table1);
echo $jsonTable1;
}
/* END db to Json for disponibilidad*/
/* db to Json for TOtal acumulado por tipo*/
$sth2 = mysql_query ($query_total_portipo ) or die ('request "Could not execute SQL query" '.$query_total_portipo);
if (mysql_num_rows($sth2)>0) {
$rows2 = array();
$flag = true;
$table2 = array();
$table2['cols'] = array(
array('label' => 'Tipo Plantas', 'type' => 'string'),
array('label' => 'Disponibilidad en MW', 'type' => 'number')
);
$rows2 = array();
while($r2 = mysql_fetch_assoc($sth2)) {
$temp2 = array();
$temp2[] = array('v' => (string) $r2['tipo']);
$temp2[] = array('v' => (int) $r2['sum(disponibilidadmw)']);
$rows[] = array('c' => $temp2);
$table2['rows'] = $rows2;
$jsonTable2 = json_encode($table2);
echo $jsonTable2;
}
/* END ddb to Json for TOtal acumulado por tipo*/
?>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawCharts);
/* grafico disponibilidad y capacidad de plantas */
function drawChart() {
var data1 = new google.visualization.DataTable(<?php echo $jsonTable1; ?>);
var options1 = {'title':'<?php echo $mostrando ?>',
'width':'600',
'height':'650',
'chartArea':{'width':'60%','height':'90%'},
'backgroundColor':'transparent',
};
var chart1 = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data1,options1);
}
/* grafico acumulado por tipo */
var data2 = new google.visualization.DataTable(<?php echo $jsonTable2; ?>);
var options2 = {
title:'<?php echo $mostrando ?>',
is3D :'true',
width:400,
height:300 };
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart.draw(data2, options2);
}
</script>
<table border="1">
<tr>
<td style="vertical-align: top"> <div id="chart_div1" ></div> <a href="#" target="_blank">Ver tabla</a> </td>
<td style="vertical-align: top"> <div id="chart_div2" ></div> <a href="#" target="_blank">Ver tabla</a> </td>
<!--
<td style="width:100%; vertical-align: top"> <div id="table_div1" ></div> </td>
-->
</tr>
</table>
***********************************************************************
btw, im using a search criteria to let the user pick what date and two more options to select data to show in charts:
***********************************************************************
<?php
/* categoria search criteria */
if ($_REQUEST["categoria"]<>'') {
$search_categoria = "AND categoria='".mysql_real_escape_string($_REQUEST["categoria"])."'";
$categoria = mysql_real_escape_string($_REQUEST["categoria"]);
}
/* tipo search criteria */
if ($_REQUEST["tipo"]<>'') {
$search_tipo = "AND tipo='".mysql_real_escape_string($_REQUEST["tipo"])."'";
$tipo = mysql_real_escape_string($_REQUEST["tipo"]);
}
/* if FROM, CATEGORIA and TIPO are selected */
if ($_REQUEST["categoria"]<>'' and $_REQUEST["from"]<>'' and $_REQUEST["tipo"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw, categoria, tipo FROM planta, diarioplanta, categoria, tipo WHERE idplanta=planta_idplanta AND categoria_idcategoria=idcategoria AND tipo_idtipo=idtipo AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."'". $search_categoria.$search_tipo ." order by planta";
//ASIGNANDO VARIABLES PARA TITULO DEL GRAFICO
$fecha1=mysql_real_escape_string($_REQUEST["from"]);
$mostrando = "Disponibilidad en MW - $fecha1, $categoria, $tipo ";
}
/* if only CATEGORIA and date FROM are selected */
else if ($_REQUEST["categoria"]<>'' and $_REQUEST["from"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw, categoria FROM planta, diarioplanta, categoria WHERE idplanta=planta_idplanta AND categoria_idcategoria=idcategoria AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."'". $search_categoria ." order by planta";
//ASIGNANDO VARIABLES PARA TITULO DEL GRAFICO
$fecha1=mysql_real_escape_string($_REQUEST["from"]);
$mostrando = "Disponibilidad en MW - $fecha1, $categoria ";
}
/* if only date FROM and TIPO are selected */
else if ($_REQUEST["tipo"]<>'' and $_REQUEST["from"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw, tipo FROM planta, diarioplanta, tipo WHERE idplanta=planta_idplanta AND tipo_idtipo=idtipo AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."'". $search_tipo ." order by planta";
//ASIGNANDO VARIABLES PARA TITULO DEL GRAFICO
$fecha1=mysql_real_escape_string($_REQUEST["from"]);
$mostrando = "Disponibilidad en MW - $fecha1, $tipo ";
}
/* if only FROM is selected */
else if ($_REQUEST["from"]<>'') {
$query_disponibilidad = "SELECT planta, capacidadMW, disponibilidadmw FROM planta, diarioplanta WHERE idplanta=planta_idplanta AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."' order by planta";
$mostrando="Disponibilidad en fecha seleccionada ";
$query_total_portipo = "select tipo, sum(disponibilidadmw) from diarioplanta, planta, tipo where planta_idplanta=idplanta AND tipo_idtipo=idtipo AND fecha = '".mysql_real_escape_string($_REQUEST["from"])."' group by tipo";
}
/* if nothing is selected this is the default initial view */
else {
$query_disponibilidad ="SELECT planta, capacidadMW, disponibilidadmw FROM planta, diarioplanta WHERE idplanta=planta_idplanta AND fecha ='2013-01-09' order by planta";
$mostrando="Disponibilidad acumulada";
$query_total_portipo = "select tipo, sum(disponibilidadmw) from diarioplanta, planta, tipo where planta_idplanta=idplanta AND tipo_idtipo=idtipo group by tipo";
}
/* db to Json for disponibilidad*/
$sth1 = mysql_query ($query_disponibilidad ) or die ('request "Could not execute SQL query" '.$query_disponibilidad);
if (mysql_num_rows($sth1)>0) {
$rows1 = array();
$flag = true;
$table1 = array();
$table1['cols'] = array(
array('label' => 'planta', 'type' => 'string'),
array('label' => 'capacidad MW', 'type' => 'number'),
array('label' => 'disponibilidad MW', 'type' => 'number')
);
$rows1 = array();
while($r1 = mysql_fetch_assoc($sth1)) {
$temp1 = array();
$temp1[] = array('v' => (string)$r1['planta']);
$temp1[] = array('v' => (float) $r1['capacidadMW']);
$temp1[] = array('v' => (float) $r1['disponibilidadmw']);
$rows1[] = array('c' => $temp1);
}
$table1['rows'] = $rows1;
$jsonTable1 = json_encode($table1);
echo $jsonTable1;
}
/* END db to Json for disponibilidad*/
/* db to Json for TOtal acumulado por tipo*/
$sth2 = mysql_query ($query_total_portipo ) or die ('request "Could not execute SQL query" '.$query_total_portipo);
if (mysql_num_rows($sth2)>0) {
$rows2 = array();
$flag = true;
$table2 = array();
$table2['cols'] = array(
array('label' => 'Tipo Plantas', 'type' => 'string'),
array('label' => 'Disponibilidad en MW', 'type' => 'number')
);
$rows2 = array();
while($r2 = mysql_fetch_assoc($sth2)) {
$temp2 = array();
$temp2[] = array('v' => (string) $r2['tipo']);
$temp2[] = array('v' => (int) $r2['sum(disponibilidadmw)']);
$rows[] = array('c' => $temp2);
$table2['rows'] = $rows2;
$jsonTable2 = json_encode($table2);
echo $jsonTable2;
}
/* END ddb to Json for TOtal acumulado por tipo*/
?>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
/* grafico disponibilidad y capacidad de plantas */
function drawChart() {
var data1 = new google.visualization.DataTable(<?php echo $jsonTable1; ?>);
var options1 = {'title':'<?php echo $mostrando ?>',
'width':'600',
'height':'650',
'chartArea':{'width':'60%','height':'90%'},
'backgroundColor':'transparent',
};
var chart1 = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data1,options1);
}
/* grafico acumulado por tipo */
var data2 = new google.visualization.DataTable(<?php echo $jsonTable2; ?>);
var options2 = {
title:'<?php echo $mostrando ?>',
is3D :'true',
width:400,
height:300 };
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart.draw(data2, options2);
}
</script>
<table border="1">
<tr>
<td style="vertical-align: top"> <div id="chart_div1" ></div> <a href="#" target="_blank">Ver tabla</a> </td>
<td style="vertical-align: top"> <div id="chart_div2" ></div> <a href="#" target="_blank">Ver tabla</a> </td>
<!--
<td style="width:100%; vertical-align: top"> <div id="table_div1" ></div> </td>
-->
</tr>
</table>
***********************************************************************
asgallant
Mar 12, 2013, 12:16:08 PM3/12/13
to google-visua...@googlegroups.com
Your javascript has an extra closing bracket that you need to remove:
function drawChart() {
var data1 = new google.visualization.DataTable(<?php echo $jsonTable1; ?>);
var options1 = {
'title':'<?php echo $mostrando ?>',
'width':'600',
'height':'650',
'chartArea':{'width':'60%','height':'90%'},
'backgroundColor':'transparent',
};
var chart1 = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data1,options1);
/* grafico acumulado por tipo */
var data2 = new google.visualization.DataTable(<?php echo $jsonTable2; ?>);
var options2 = {
title:'<?php echo $mostrando ?>',
is3D :'true',
width:400,
height:300
};
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart.draw(data2, options2);
}
I assume that the PHP code and javascript are all in the same file, is this true? If so, then you probably want to get rid of the "echo $jsonTable1;" and "echo $jsonTable2;" in the top portion (as they will otherwise be printing that JSON into your HTML). If you are intending to fetch the data via AJAX, then you need to make a few more adjustments.
Ian Haylock
Mar 12, 2013, 12:32:16 PM3/12/13
to google-visua...@googlegroups.com
i got rid of the extra bracket, and yes, php code and javascript is all in the same page, and i was echoing the jsontables just to make sure i was getting the proper data encoded... but nothing.. when i try each chart individually they work fine even with the users options selected but when i try to combine them it does not work... i dont really want to use ajax.. php and javascript is hard enough for me dont want to try something else for now. .. i added a screen capture where you can see one of charts working properly when ran individually... also i have added the full test3.php file where im trying to combine that chart with another one to show both... any ideas what else could be my problem???
asgallant
Mar 12, 2013, 1:24:32 PM3/12/13
to google-visua...@googlegroups.com
Your chart function is called "drawChart" but you reference "drawCharts" in the callback handler. Pick one name for the function and use it in both places.
Ian Haylock
Mar 12, 2013, 1:37:16 PM3/12/13
to google-visua...@googlegroups.com
sorry.. my bad for such an easy mistake, but still nothing... i think the problem has something to do with the Json part, i think is not sending the two diferent set of data (one for each query i have in the criterias to feed each chart) .. but im not sure because nothing shows on the screen , when i do a "view source" option on the screen the only thing that shows is a number 1 and nothing else,
asgallant
Mar 12, 2013, 1:46:49 PM3/12/13
to google-visua...@googlegroups.com
In that case, you have an error in your PHP somewhere. You php configuration should have an option to enable debug information, which may help you figure out what the error is.
Ian Haylock
Mar 12, 2013, 1:49:35 PM3/12/13
to google-visua...@googlegroups.com
will keep trying ... thanks my man... will let you know if i figure it out.
Ian Haylock
Mar 18, 2013, 1:44:20 PM3/18/13
to google-visua...@googlegroups.com
Hi asgallant, can you help me with this please? .. im trying to display a annotatedtimeline chart but i have not been able too... when i try it on barchart, column chart or line chart it displays fine, but annotatedtimetimeline would not show .. this is what i have for annotatetimeline chart (further below is the linechart version which wroks fine):
***************************************************************************************************************************************************************
$sth = mysql_query("select fecha, msnm from embalse, diarioembalse WHERE embalse_idembalse=idembalse and fecha between (select min(fecha) from diarioembalse) and (select max(fecha) from diarioembalse) order by fecha limit 0,31 ");
//echo mysql_num_rows($sth);
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'fecha', 'type' => 'string'),
array('label' => 'msnm', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string)$r['fecha']);
$temp[] = array('v' => (float) $r['msnm']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<script type="text/javascript">
/*
grafico de capacidad de plantas
*/
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {'displayAnnotations': true});
}
</script>
<table>
<tr>
<td> <div id="chart_div" style="width: 700px; height: 500px;" ></div> </td>
</tr>
</table>
*************************************************************************************************************************************
the linechart version:
$sth = mysql_query("select fecha, msnm from embalse, diarioembalse WHERE embalse_idembalse=idembalse and fecha between (select min(fecha) from diarioembalse) and (select max(fecha) from diarioembalse) order by fecha limit 0,31 ");
//echo mysql_num_rows($sth);
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'fecha', 'type' => 'string'),
array('label' => 'msnm', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string)$r['fecha']);
$temp[] = array('v' => (float) $r['msnm']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<script type="text/javascript">
/*
grafico de capacidad de plantas
*/
var options = {'title':'nivel embalse',
'width':'1200',
'height':'800',
'chartArea':{'width':'70%','height':'80%'},
'backgroundColor':'transparent',
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}
</script>
<div id="chart_div" ></div>
***************************************************************************************************************
what am i missing for the annotatedtimeline chart ??????
***************************************************************************************************************************************************************
$sth = mysql_query("select fecha, msnm from embalse, diarioembalse WHERE embalse_idembalse=idembalse and fecha between (select min(fecha) from diarioembalse) and (select max(fecha) from diarioembalse) order by fecha limit 0,31 ");
//echo mysql_num_rows($sth);
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'fecha', 'type' => 'string'),
array('label' => 'msnm', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string)$r['fecha']);
$temp[] = array('v' => (float) $r['msnm']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<script type="text/javascript">
/*
grafico de capacidad de plantas
*/
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {'displayAnnotations': true});
}
</script>
<table>
<tr>
<td> <div id="chart_div" style="width: 700px; height: 500px;" ></div> </td>
</tr>
</table>
*************************************************************************************************************************************
the linechart version:
$sth = mysql_query("select fecha, msnm from embalse, diarioembalse WHERE embalse_idembalse=idembalse and fecha between (select min(fecha) from diarioembalse) and (select max(fecha) from diarioembalse) order by fecha limit 0,31 ");
//echo mysql_num_rows($sth);
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'fecha', 'type' => 'string'),
array('label' => 'msnm', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string)$r['fecha']);
$temp[] = array('v' => (float) $r['msnm']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<script type="text/javascript">
/*
grafico de capacidad de plantas
*/
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {'title':'nivel embalse',
'width':'1200',
'height':'800',
'chartArea':{'width':'70%','height':'80%'},
'backgroundColor':'transparent',
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}
</script>
<div id="chart_div" ></div>
***************************************************************************************************************
what am i missing for the annotatedtimeline chart ??????
asgallant
Mar 18, 2013, 2:01:54 PM3/18/13
to google-visua...@googlegroups.com
ATL charts require a "date" type domain column, while you are providing a "string" type. You have to convert to a date type to make it work. Assuming your dates are in the format "year-month-day", this is how you would convert them to an API-compatible format:
array('label' => 'msnm', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$table['cols'] = array(
array('label' => 'fecha', 'type' => 'date'),
array('label' => 'fecha', 'type' => 'date'),
array('label' => 'msnm', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$dateArr = explode('-', $r['fecha']);
$year = $dateArr[0];
$month = $dateArr[1] - 1; // months are zero-indexed
$day = $dateArr[2];
$temp[] = array('v' => "Date($year, $month, $day)";
$temp[] = array('v' => (float) $r['msnm']);
$rows[] = array('c' => $temp);
}
$rows[] = array('c' => $temp);
}
Ian Haylock
Mar 18, 2013, 3:45:45 PM3/18/13
to google-visua...@googlegroups.com
thanks for your reply... i did the changes that you describe, but nothing, now i can´t see anything on the screen, before i could see the JSon data that i was echoing jsut to make sure i was getting the data from mysql... i checked for grammar errors and also the date format in mysql and it is YYYY-MM-DD so that is not the problem... any ideas what could be giving me trouble now ???
asgallant
Mar 18, 2013, 4:20:01 PM3/18/13
to google-visua...@googlegroups.com
Sorry, my mistake, I left off a closing parenthesis on this line:
$temp[] = array('v' => "Date($year, $month, $day)";
it should be:
$temp[] = array('v' => "Date($year, $month, $day)");
Ian Haylock
Mar 18, 2013, 4:27:05 PM3/18/13
to google-visua...@googlegroups.com
cannot believe i didnt catch that either !!!!!!!!!!!! ... and yes !!! it works !!!!! thanks a lot asgallant...
Avinash reddy
Jun 14, 2016, 3:58:12 AM6/14/16
to Google Visualization API
Hi,
I just started using google charts for timeline in my timesheets by downloading script file from the link https://www.gstatic.com/charts/loader.js
1.I am using fullcalendar.js by Adam Shaw
2.Basically I have a panel with panel-group header being date and event details with start and end time(many time like 1pm-2pm,2pm-4pm etc) of work in a day
I want to draw timeline for everyday showing the start and end times in day.Each day can have many tasks done in different times.I am grouping by date.
Ex.
May 31,2015 ====space here ======= Here I need timeline bar
1.Task A 1pm-3pm 2hrs
2.Task B 3pm-5pm 2hrs
June 1,2015 ====space here ======= Here I need timeline bar
1.Task c 10am-3pm 5hrs
2.Task B 3pm- 5pm 2hrs
This data is dynamic.It can have any number of days based on filter.
I am doing something like this after grouping my data by date
In groupedEventList below count is 11.
$.each(groupedEventList, function (key, dataEvents) {
var panelheader = '<div class="panel-group" >' +
'<div class="panel panel-default">' +
'<div class="accordion-group-header panel-heading col-md-12 " id="accordion-group-header-' + groupIndex + '">' +
'<h4 class="panel-title accordion-toggle" data-toggle="collapse" data-target=".group-' + groupIndex + '">' +
key+
'<div id="chart_div-' + groupIndex + '"></div>' +
'</h4>' +
'</div>';
//timeline visualization rendering
google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
console.log(groupIndex );
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Start Date');
chartData.addColumn('date', 'Start Time');
chartData.addColumn('date', 'End Time');
chartData.addRows([
[key, new Date(dataEvents.startTime), new Date(dataEvents.endTime)] //this can have multiple time entries for key.So how to achieve this.
In options below I am grouping but is there any better way to do this things
]);
var options = {
height: 100,
timeline: {
groupByRowLabel: true,
showBarLabels: false
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div-' + groupIndex ));
chart.draw(chartData, options);
}
Here groupIndex is index of panel-group header.
When i checked in function drawTimeline() { ....} it is throwing error Container is not defined.
How can achieve to have dynamic div with timeline for its own.
I tried to follow from the link below.
There we have different functions for each div with different id.
But I want need dynamically.
Please help me with this
Daniel LaLiberte
Jun 14, 2016, 1:33:14 PM6/14/16
to Google Visualization API
Avinash,
You would have to create those dynamically constructed container elements yourself before creating the chart objects that reference the container elements. Looks like you are trying to do that, but something is not working out. You should look at the generated HTML and scripts to see what happened. If you can point us at your page, then we can look inside.
igba...@colorado.edu
Jun 20, 2016, 11:39:37 AM6/20/16
to Google Visualization API
Is it possible to draw multiple charts if each one was implemented using ChartWrapper()?
Daniel LaLiberte
Jun 20, 2016, 11:56:19 AM6/20/16
to Google Visualization API
Yes, it should be possible to draw multiple charts in the same page using a ChartWrapper for each one. But there is a limitation currently, if you are using the gstatic loader, which is that you must load all the packages required for all your charts in one call of google.charts.load(). This limitation will be eliminated in the near future. You can try the new version now by loading 'upcoming' rather than 'current'.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/73efb5c2-5cb8-4286-aad2-824e8e099f22%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages