Welcome, Guest

TOPIC: Replace grid in view with google chart

Replace grid in view with google chart 26 Mar 2012 11:30 #1729

etc
Offline
Premium Member
Posts: 132
Thank you received: 19
Karma: 7

I am trying to render google chart with data generated from my model.
My array of data is in $this->items and the output of this is:

Array ( 
[0] => stdClass Object ( [id] => 2 [params] => [weight] => 23 [weight_user] => 43 [entry_date] => 2012-03-19 ) 
[1] => stdClass Object ( [id] => 1 [params] => [weight] => 67 [weight_user] => 43 [entry_date] => 2012-03-20 ) 
[2] => stdClass Object ( [id] => 3 [params] => [weight] => 88 [weight_user] => 43 [entry_date] => 2012-03-21 ) 
)

I need to convert this array to javascript. And the result should looks like this:

[['2', 23],
 ['1', 67],
 ['3', 88]]

I was struggling for a while with json_encode, but no success.

Google chart link where you can see what I mean. The row "data.addRows" I need to fill.
http://code.google.com/intl/en-EN/apis/chart/interactive/docs/gallery/linechart.html

my attempt how to foreach the array

foreach (($this->items) as $ob) {

  $myarray = (($ob->id).",".($ob->weight));
  echo json_encode($myarray);
}

But it does not give correct format

Thanks for any idea

Last Edit: 26 Mar 2012 11:37 by etc. Reason: Edit2

The administrator has disabled public write access.

Re: Replace grid in view with google chart 27 Mar 2012 08:36 #1738

VeCrea
Offline
Platinum Member
Absolute JCook fan
Posts: 473
Thank you received: 100
Karma: 30

Hello,
I did that by adding function in the model.
The function constructs what google chart needs and get all the google chart code in one variable. Then i use the variable (here $thisGraph) in the view and hop hop hop magic is there.

First part of the Google Graph Code :

$thisGraph = 				  "
<script type=\"text/javascript\">
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Jour', 'Tonne par heure','Cible (250 T/H)'],
";

Then a double loop that creates the data texts

foreach ($resultats as $resultat) {
	bla bla bla
	$thisGraph .= $preparedArray[$numeroDeLigne] . ",";
}

Then the rest of the Google Graph Code :

$thisGraph .= 
"
]);
var options = {
title : 'Tonnes par heure hors arrêt',
vAxis: {title: \"Quantité\"},
hAxis: {title: \"Jour\"},
seriesType: \"bars\",
isStacked: \"true\",
colors: ['#99cc00', '#003366'],
series: {1: {type: \"line\"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('tonneHeure_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id=\"tonneHeure_div\" style=\"text-align:center; width:900px; height:400px;\"></div>   
";
}

I can understand it is not the most beautiful way to do it, but it works

Last Edit: 27 Mar 2012 08:44 by VeCrea. Reason: edit2

The administrator has disabled public write access.

Re: Replace grid in view with google chart 27 Mar 2012 12:37 #1743

etc
Offline
Premium Member
Posts: 132
Thank you received: 19
Karma: 7

thanks for that.

I also have some little contribution how to fill the array.

    </script>
    <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 = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Weight');
        data.addRows(<?php echo "[";  
          foreach (($this->items) as $ob) 
          {
            $valueout = ("[".("'".$ob->entry_date."'").",".($ob->weight)."]".",");
            print ($valueout);
          } echo "]"; 
                  ?>);

        var options = 
        {
          title: 'Weight'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

There is the only problem how to sort the data by date. I hope I will figure out.

The administrator has disabled public write access.

Re: Replace grid in view with google chart 27 Mar 2012 12:43 #1744

VeCrea
Offline
Platinum Member
Absolute JCook fan
Posts: 473
Thank you received: 100
Karma: 30

Create your own query

$maDB = $this->getDbo();
$requete = $maDB->getQuery(true);
$requete->select('rd.reportdate pDate' and all the others);
$requete->from('#__blabla AS rd');
$requete->where('rd.reportdate BETWEEN CAST("'.$date1.'" AS DATE) AND CAST("'.$date2.'" AS DATE) AND rd.id = inc.reportdate ORDER BY inc.reportdate');
$maDB->setQuery($requete);
$resultats = $maDB->loadObjectList();

Last Edit: 27 Mar 2012 12:44 by VeCrea. Reason: edit2

The administrator has disabled public write access.

Re: Replace grid in view with google chart 27 Mar 2012 12:50 #1745

VeCrea
Offline
Platinum Member
Absolute JCook fan
Posts: 473
Thank you received: 100
Karma: 30

Don't forget about explode(), can be useful too

foreach ($resultats as $resultat) {
$AAA.= "['". $value1. "', " . $value2.", 250]".  " - ";
$preparedArray = explode(" - ", $AAA);
}
for ($lineNumber = 0 ; $lineNumber <= $lastLine ; $lineNumber ++) {
$thisGraph .= $preparedArray[$lineNumber ] . ",";
}

Last Edit: 27 Mar 2012 12:50 by VeCrea.

The administrator has disabled public write access.

Re: Replace grid in view with google chart 30 Mar 2012 19:47 #1801

etc Offline Premium Member Posts: 132 Thank you received: 19 Karma: 7	Thanks for pointing me the direction. I originally wanted to use native j-cook query but it seems that more simple is to have new query model.
	The administrator has disabled public write access.

Re: Replace grid in view with google chart 05 Apr 2012 04:49 #1880

VeCrea Offline Platinum Member Absolute JCook fan Posts: 473 Thank you received: 100 Karma: 30	Did you succeeed ?
	The administrator has disabled public write access.

Re: Replace grid in view with google chart 05 Apr 2012 06:55 #1884

etc Offline Premium Member Posts: 132 Thank you received: 19 Karma: 7	Yes I managed. I had to create own sql model so I could get better sorted data. My default page displays data for current month and there are also two calendars (from, to) for customizing date range. Nice so far.
	The administrator has disabled public write access.

Re: Replace grid in view with google chart 05 Apr 2012 10:47 #1894

VeCrea Offline Platinum Member Absolute JCook fan Posts: 473 Thank you received: 100 Karma: 30	Congrats
	The administrator has disabled public write access.

Re: Replace grid in view with google chart 05 Apr 2012 18:29 #1907

admin Offline Administrator Chef Posts: 3711 Thank you received: 984 Karma: 140	I don't have time to look after your work, but it is exactly what I like to see and read... Using cook for building real advanced functionalities and good applications. Now, we want to see some screenshots ...
	Coding is now a piece of cake The administrator has disabled public write access.

Re: Replace grid in view with google chart 05 Apr 2012 18:42 #1910

VeCrea Offline Platinum Member Absolute JCook fan Posts: 473 Thank you received: 100 Karma: 30	Here is one with blur on what you are not allowed to see
	The administrator has disabled public write access. The following user(s) said Thank You: admin

Re: Replace grid in view with google chart 05 Apr 2012 18:44 #1911

admin Offline Administrator Chef Posts: 3711 Thank you received: 984 Karma: 140	Fantastic !
	Coding is now a piece of cake The administrator has disabled public write access.

Re: Replace grid in view with google chart 05 Apr 2012 18:46 #1913

VeCrea Offline Platinum Member Absolute JCook fan Posts: 473 Thank you received: 100 Karma: 30	By contract, i'm not allowed to show more, but this is just a small part of what was built. And the new component i'm creating, it's really HUGE (just hope cook will be able to produce the finished component)
	The administrator has disabled public write access.