1

In the google chart api, the data for the chart is set by this line:

data.addRows([
  ['2004', 1000, 400],
  ['2005', 1170, 460],
  ['2006',  860, 580],
  ['2007', 1030, 540]
]);

I want to be able to set this data from data in my database. Below is an image of my database: enter image description here

I want to take all values of salePrice and unitPrice and display the values on a line chart that corresponds to the period they were created.

Here is my code:

<?php 

include("getteam.php");


    $saleprice = mysql_query("

    SELECT `outputValue` FROM `output` WHERE `teamID` = '$teamID' && `outputType` = 'salePrice'

    ")or die($saleprice."<br/><br/>".mysql_error());

    // set ID's = to a variable and now get Outputs for each variable(teamID)
    $salepriceNumR  = mysql_num_rows($saleprice);


            $sPrice = array();

            $i="0";


            while ($i<$salepriceNumR && $row = mysql_fetch_assoc($saleprice))
            {

            $sPrice[$i] = $row['outputValue'];
            $i++;

            }




    $unitprice = mysql_query("

    SELECT `outputValue` FROM `output` WHERE `teamID` = '$teamID' && `outputType` = 'unitPrice'

    ")or die($unitprice."<br/><br/>".mysql_error());

    // set ID's = to a variable and now get Outputs for each variable(teamID)
    $unitpriceNumR  = mysql_num_rows($unitprice);


            $uPrice = array();

            $i="0";


            while ($i<$unitpriceNumR && $row = mysql_fetch_assoc($unitprice))
            {

            $uPrice[$i] = $row['outputValue'];
            $i++;


            }



$chartrow = array();

for ($i = 0; $i < $unitpriceNumR; $i++ )
{

$chartrow[$i] = "['".$i."',".$sPrice[$i].", ".$uPrice[$i]."]";

}

switch ($currentStage) {

case "0":
case "1":
    $value = $chartrow[0]; 

    break;

case "2":
    $value = $chartrow[0].",".$chartrow[1];

    break;

case "3":
    $value = $chartrow[0].",".$chartrow[1].",".$chartrow[2];

    break;


default:
    $value = $chartrow[0]; 
    // You should have some default value, seriously!!!
}               




?>
<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', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(JSON.parse( [<?php echo json_encode($value); ?>] )); 

var options = {
  width: 400, height: 240,
  title: 'Company Performance'
};

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

<div id="chart_div"></div>

The problem is the way I am setting $value it is a string and so the data is not outputted correctly. Is there a way I can set $value so I can use it as intended?

When $value is echoed ($currentStage being the value 3) this is outputted: ['0',0, 0],['1',65, 35],['2',88, 35]

However when I view source I am getting:

 data.addRows(JSON.parse( ["['0',0, 0],['1',65, 35],['2',88, 35]"] )); 

I need to get rid of the "".

NeverPhased
  • 1,546
  • 3
  • 17
  • 31
  • When I view source I am getting data.addRows(JSON.parse( ["['0',0, 0],['1',65, 35],['2',88, 35]"] )); I need to get rid of the ". – NeverPhased Dec 10 '11 at 13:56
  • Please see this link for more info: http://stackoverflow.com/questions/8452903/how-to-include-php-in-javascript-google-chart-api/8452979#8452979 – NeverPhased Dec 10 '11 at 14:04

1 Answers1

2

You have to parse your JSON string :

data.addRows(JSON.parse( <?php echo json_encode($value); ?> ));  

If I'm not mistaken that should solve your problem.

Edit In fact I'm not sure I understand why you're setting you $value variable to a string; the whole point of json_encode being that you can directly encode objects or arrays.

Edit 2 : Here's how I see it, but my php is more than rusty.

<?php

$chartrow = array(); 

for ($i = 0; $i < $unitpriceNumR; $i++ ) 
{  
    $chartrow[$i] = array( (string)$i, (int)$sPrice[$i], (int)$uPrice[$i] );
} 

switch ($currentStage) { 
    case "0": 
    case "1": 
        $value = $chartrow[0];  
    break; 

    case "2": 
        $value = array($chartrow[0], $chartrow[1]);
        break; 

    case "3": 
        $value = array($chartrow[0], $chartrow[1], $chartrow[2]); 
    break;
    default: 
        $value = $chartrow[0];  
}                

Edit 3 I edited the js snippet, I don't know why I left the brackets around the php tags.

Edit 4 Edited the php code to the working version.

Manu Clementz
  • 1,807
  • 12
  • 19
  • I have tried this but still nothing. When I view source I get this data.addRows(JSON.parse( ["['0',0, 0],['1',65, 35],['2',88, 35]"] )); The " should not be there. – NeverPhased Dec 10 '11 at 13:47
  • Im using chrome, same result for view source in IE. Dont have firefox downloaded so can't check. – NeverPhased Dec 10 '11 at 13:57
  • ok the reason I am doing this is because of this:http://stackoverflow.com/questions/8452903/how-to-include-php-in-javascript-google-chart-api/8452979#8452979 – NeverPhased Dec 10 '11 at 14:03
  • Im just confused on how to set `$value` – NeverPhased Dec 10 '11 at 14:07
  • I think that you should set `$value`itself to be an array. – Manu Clementz Dec 10 '11 at 14:11
  • ok ill try that. I appreciate the help. Iv been stuck on this problem for a while. – NeverPhased Dec 10 '11 at 14:12
  • Can you edit your code above to include the code for `$value` I have tried setting it as an array but to no avail, not sure if I'm doing what you mean. – NeverPhased Dec 10 '11 at 14:16
  • Using your code the view source is now: data.addRows(JSON.parse( [[[0,"0","0"],[1,"65","35"],[2,"88","35"]]] )); I may have to delete the JSON.parse and also the extra set of []....but there is another problem...the wrong terms have inverted commas around them??? – NeverPhased Dec 10 '11 at 14:35
  • Do you see that in your browser's javascript console ? – Manu Clementz Dec 10 '11 at 14:36
  • I changed my code to data.addRows(); – NeverPhased Dec 10 '11 at 14:40
  • and now the view source is closer to what I need: data.addRows([[0,"0","0"],[1,"65","35"],[2,"88","35"]]); – NeverPhased Dec 10 '11 at 14:41
  • You could try to see what's wrong using your browser's javascript debugging tool. In chrome you can access it with CTRL + ALT + SHIFT + I. – Manu Clementz Dec 10 '11 at 14:41
  • Except the inverted commas should be on the first term in each box like this data.addRows([["0",0,0],["1",65,35],["2",88,35]]); Any idea how to do this? – NeverPhased Dec 10 '11 at 14:42
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/5738/discussion-between-manu-letroll-and-user1064028) – Manu Clementz Dec 10 '11 at 14:42