Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

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

  • etc
  • etc's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 132
  • Thank you received: 19
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.
code.google.com/intl/en-EN/apis/chart/in...llery/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

Please Log in or Create an account to join the conversation.

Last edit: by etc. Reason: Edit2

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
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

Please Log in or Create an account to join the conversation.

Last edit: by VeCrea. Reason: edit2

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

  • etc
  • etc's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 132
  • Thank you received: 19
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.

Please Log in or Create an account to join the conversation.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
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();

Please Log in or Create an account to join the conversation.

Last edit: by VeCrea. Reason: edit2

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
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 ] . ",";
}

Please Log in or Create an account to join the conversation.

Last edit: by VeCrea.

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

  • etc
  • etc's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 132
  • Thank you received: 19
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.

Please Log in or Create an account to join the conversation.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
Did you succeeed ?

Please Log in or Create an account to join the conversation.

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

  • etc
  • etc's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 132
  • Thank you received: 19
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.

Please Log in or Create an account to join the conversation.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
Congrats ;)

Please Log in or Create an account to join the conversation.

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

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
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

Please Log in or Create an account to join the conversation.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
Here is one with blur on what you are not allowed to see

The following user(s) said Thank You: admin

Please Log in or Create an account to join the conversation.

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

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
Fantastic !
Coding is now a piece of cake

Please Log in or Create an account to join the conversation.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
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)

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Time to create page: 0.086 seconds

I'm playing around with the new mvc and the FORK feature is FANTASTIC!!! it's saving me a lot of time! you are doing a very good job!!

Tomaselli (Forum)  

Get Started