LineChart questions

[Dinga Bogdan]

Hello,

I am trying to implement Google charts in a work of mine, I make a
project in PHP and SQL with a web interface.
Managed to draw a simple line chart with a few options, now i stumbled
across event listener thing, It is possible to make an event listener
for the legend ? lets say if you click on "Value 1" square in the
legend the line will toggle between show/hide ?
I can`t get the wrapper to work with the line chart designed, i
currently using PHP to get values from SQL and parse it in the
JavaScript like this:
...
echo 'data.addRow(["'.$timestamp.'", '.$power.', '.$pb2w2.', '.
$pb2w3.', '.$pb2w4.', '.$pb1w3.', '.$pb1w1.', '.$pb1w2.']);';
Is it wrong to do so ?

How about progress bar? the graph takes several seconds to load, until
then all the page is a little messed up, I need some kind of progress
bar (event trigger ? ) to show graph only when is ready. Here I think
the wrapper comes in handy.

I am just a beginner in JavaScript, any help is welcomed !

[asgallant]

There is nothing wrong with passing your data from PHP to javascript like that (though there are more preferred ways, depending on how dynamic your data retrieval needs to be).  You can clean up a bunch of unnecessary quotes and concatenators in your PHP, though:

echo "data.addRow(['$timestamp', $power, $pb2w2, $pb2w3, $pb2w4, $pb1w3, $pb1w1, $pb1w2]);";

You can hide columns with a click on the legend like this:

/*  assumes:
 *    chart is the visualization chart object
 *    options is an object with option settings to draw the chart with
 *    data is the dataTable object
 *    hideCols is an array of columns that should be hidden (can start empty)
 *    view is a visualization dataView object
 *  this event listener detects clicks on the legend and redraws the chart with the
 *  clicked-on column hidden
 */
google.visualization.events.addListener(chart, 'select', function () {
    // if row is undefined, we clicked on the legend
    if (typeof chart.getSelection()[0]["row"] === 'undefined') {
        hideCols.push(chart.getSelection()[0]["column"]);
        view.hideColumns(hideCols);
        chart.draw(view, options);
    }
});

Charts should load quickly.  How large is the data set you are passing to them?  Are they slow in a particular browser, or is it a cross-browser problem?  Can you share a sample of the javascript generated by the PHP or post a link we can test on?

[asgallant]

Oops, I realized there may be some issues with using a persistent dataView object, so here is the revised listener:

/*  assumes:
 *    chart is the visualization chart object
 *    options is an object with option settings to draw the chart with
 *    data is the dataTable object
 *    hideCols is an array of columns that should be hidden (can start empty)

 *  this event listener detects clicks on the legend and redraws the chart with the
 *  clicked-on column hidden
 */
google.visualization.events.addListener(chart, 'select', function () {
    // if row is undefined, we clicked on the legend
    if (typeof chart.getSelection()[0]["row"] === 'undefined') {
        hideCols.push(chart.getSelection()[0]["column"]);

        var view = new google.visualization.DataView(data);
        view.hideColumns(hideCols);
        chart.draw(view, options);
    }
});

[Dinga Bogdan]

Here is my java script code:

<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'WTG 01');
data.addColumn('number', 'WTG 02');
data.addColumn('number', 'WTG 03');
data.addColumn('number', 'WTG 04');
data.addColumn('number', 'WTG 05');
data.addColumn('number', 'WTG 06');
data.addColumn('number', 'WTG 07');
<?php
while($row = mysql_fetch_array($result))
{
$ts = $row["timestamp_real"];
$power = $row["power_avg"];
$old = array("-"," ",":");
$new = array(";",";",";");
$newts = str_replace($old, $new, $ts);
$seppts = explode(";",$newts);
$timestamp = "$seppts[3]:$seppts[4] $seppts[2]-$seppts[1]-
$seppts[0]";
$rowb2w2 = mysql_fetch_array($rb2w2); $pb2w2 =
$rowb2w2["power_avg"];
$rowb2w3 = mysql_fetch_array($rb2w3); $pb2w3 =
$rowb2w3["power_avg"];
$rowb2w4 = mysql_fetch_array($rb2w4); $pb2w4 =
$rowb2w4["power_avg"];
$rowb1w3 = mysql_fetch_array($rb1w3); $pb1w3 =
$rowb1w3["power_avg"];
$rowb1w1 = mysql_fetch_array($rb1w1); $pb1w1 =
$rowb1w1["power_avg"];
$rowb1w2 = mysql_fetch_array($rb1w2); $pb1w2 =
$rowb1w2["power_avg"];

echo 'data.addRow(["'.$timestamp.'", '.$power.', '.$pb2w2.', '.
$pb2w3.', '.$pb2w4.', '.$pb1w3.', '.$pb1w1.', '.$pb1w2.']);';
}

mysql_close();
?>

new
google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
title: 'Last 12 hours production [kWh]!',
width: 800, height: 240,
vAxis: {maxValue: 100}}
);
}



google.setOnLoadCallback(drawVisualization);
</script>

Unfortunately I can not grant access to the site, the data are quite
confidential. I know for now that the php script is not quite
optimized, and that could be the issue for the delay in generating the
script.
I`v got 7 tables in my SQL that need to be queried, and witch retrieve
the last 72 rows (data are 10-min interval and I need the last 12
hours) so i request the last 72 values from each table and pass them
to javascript, the actual php is messy for now.
Here is the PHP code, take in mind that the tables rows are not the
same, some have more values than others.

$connect = mysql_connect($db_host,$db_user,$db_pass) or die ("Could
not connect!");
mysql_select_db($db_name) or die ("Could not find data base!");

$prep_count = mysql_query("SELECT * FROM `$db_baia2_wtg01`");
$allrows = mysql_num_rows($prep_count);
$from = $allrows-72;
$to = $allrows;

$prep_count2 = mysql_query("SELECT * FROM `$db_baia1_wtg03`");
$allrows2 = mysql_num_rows($prep_count2);
$from2 = $allrows2-72;
$to2 = $allrows2;

$prep_count3 = mysql_query("SELECT * FROM `$db_baia1_wtg01`");
$allrows3 = mysql_num_rows($prep_count3);
$from3 = $allrows3-72;
$to3 = $allrows3;

$prep_count4 = mysql_query("SELECT * FROM `$db_baia1_wtg02`");
$allrows4 = mysql_num_rows($prep_count4);
$from4 = $allrows4-72;
$to4 = $allrows4;

$query = "SELECT * FROM `$db_baia2_wtg01` LIMIT $from,$to";
$result = mysql_query($query);

$qb2w2 = "SELECT * FROM `$db_baia2_wtg02` LIMIT $from,$to"; $rb2w2 =
mysql_query($qb2w2);
$qb2w3 = "SELECT * FROM `$db_baia2_wtg03` LIMIT $from,$to"; $rb2w3 =
mysql_query($qb2w3);
$qb2w4 = "SELECT * FROM `$db_baia2_wtg04` LIMIT $from,$to"; $rb2w4 =
mysql_query($qb2w4);
$qb1w3 = "SELECT * FROM `$db_baia1_wtg03` LIMIT $from2,$to2"; $rb1w3
= mysql_query($qb1w3);
$qb1w1 = "SELECT * FROM `$db_baia1_wtg01` LIMIT $from3,$to3"; $rb1w1
= mysql_query($qb1w1);
$qb1w2 = "SELECT * FROM `$db_baia1_wtg02` LIMIT $from4,$to4"; $rb1w2
= mysql_query($qb1w2);

I am considering also to pass the php query to a JSON type of data
manipulation as in the documentation, it would be better ?
As I seen from the docs, I think the manipulation using JSON style is
more easy to customize the chart.

Am I doing something wrong here ? or do I see things wrong ?

Thnx !

[asgallant]

Is your whole page loading slowly or just the chart?  If it's the page, then the problem is in your PHP, not the chart.  If you remove the data pulling code from this page and build a separate query script with it, then you can use AJAX to fetch a JSON string from the query script and populate your chart(s) with that.  Your page will load faster and you can put loading spinners in place of your charts (jQuery's AJAX functions can handle this kind of stuff for you, and you won't have to worry about building a Google-compatible query source).