1,105,578 Community Members

Dojo bar graph from data in the db

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Hello Everyone,

I am trying to learn php along with Dojo. So I am testing how to create a bar graph from data in my mysql database. However, I am having a problem. I can't seem to be able to read the data. I am posting the code below so you guys can see how far I have made on this. My db (brazil) is very simple with 2 tables (inca, ac) and each table has 3 columns (participantsEnrolled, participantsExpected, participantsUnassigned). I am not sure what I am doing wrong. I was able to create the graph declaring the data, but I would like to create the graph dinamically from the db. I appreciate any help. Thanks.

<!DOCTYPE html>
<html >
<head>
<h2 align="center">Bar Graphs</h2><br>

<?php

$con = mysql_connect("localhost", "test", "test") or die('Sorry, could not connect to database server');
mysql_select_db("brazil", $con) or die('Sorry, could not connect to database');

//participants enrolled
$query1 = "SELECT inca.participantsEnrolled, ac.participantsEnrolled from inca, ac";
$result = mysql_query($query) or die ('Could not find brazil');
$enrolled = mysql_fetch_array($result) or die ('could not retrieve the record');

//participants expected
query2 = "SELECT inca.participantsExpected, ac.participantsExpected from inca, ac";
$result2 = mysql_query($query2) or die ('Could not find brazil');
$expected = mysql_fetch_array($result2) or die ('could not retrieve the record'); 

?>

<link rel="stylesheet" type="text/css"
 href="./dijit/themes/claro/claro.css" />


<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>

<?php require_once 'c:/wamp/www/recipe/dojoTesting/bardb.php';?>

<script>require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
   function(Chart, Default, Bars, Markers, ready){
  ready(function(){
    var dataEnrolled = {items: ($enrolled)};
    var dataExpected = {items:  ($expected)};
    //  <?php require_once 'c:/wamp/www/recipe/dojoTesting/bardb.php'; fquery2(); ?>]};

    var chart1 = new Chart("simplechart", {
      title: "Participants (Enrolled X Expected)",
      titlePos: "top",
      titleGap: 25,
      titleFont: "normal normal normal 20pt Tahoma",
      titleFontColor: "black"
    });

    //chart1.setTheme(tundra);
    chart1.addPlot("default", {type: Bars,markers:true,gap:5});
    chart1.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma"});
    chart1.addAxis("y", {stroke:"black", font:"normal normal bold 12pt Tahoma", vertical: true,labels:[{value:0, text:""}, {value:1, text:"INCA"},
    {value:2, text:"AC"}], rotation:20});
    chart1.addSeries("Series A", dataEnrolled, {fill:"#3399FF"});
    chart1.addSeries("Series B", dataExpected, {fill:"#123456"});
    chart1.render();
  });
});</script>
</head>
<body class="Wetland">
    <div id="simplechart" style="width: 600px; height: 500px; margin: 10px auto 10px auto;"></div>
    </body>
</html>
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

I am not familiar with dojo but I guess your problem appears to be reading the DB results. The mysql_fetch_array function returns only one row so you should run it in a while loop to retrieve all rows.

while ($row = mysql_fetch_array($result2)) {
    // do whatever you need with the row 
}

Now, what you do in the while loop depends on what is the structure of data that dojo expects.

If this is not the cause of your problem please post any error messages or debug output.

As a side note I would recommend replacing outdated mysql_* functions with more up to date versions: either myqli or PDO.

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

the basic database I created contains one row of data

inca:
participantsEnrolled=10, participantsExpected=20, participantsUnassigned =2
ac:
participantsEnrolled=5, participantsExpected=15, participantsUnassigned =1

I am trying to retrived an array of participantsEnrolled and an array of participantsExpected, in this case only 2 of each
so

dataEnrolled = [10, 5]
dataExpected = [20, 15]

and I thought I would be able to plot these numbers in a bar graph. That's the reason I didn't do the while loop. Am I wrong to think this way?

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

OK, you are basically doing it right (you should get the same result with while loop, too). But I do not think you can pass a PHP array to javascript (dojo) directly, just like that. You should convert it to string that looks like javascript array, something like:

$js_array = '[' . implode(',', $enrolled) . ']';
...
var dataEnrolled = {items: ($js_array)};
Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

I tried the implode function and nothing...so far this is what I have. I tried using the store functionality.

<!DOCTYPE html>
<html >
<head>
<h2 align="center">Bar Graphs</h2><br>

<?php

$con = mysql_connect("localhost", "test", "test") or die('Sorry, could not connect to database server');
mysql_select_db("brazil", $con) or die('Sorry, could not connect to database');


//participants enrolled and expected
//$query="SELECT participantsEnrolled, participantsExpected from inca, ac";
//$result1=mysql_query($result1) or die ('Could not retrieve the data');
//$dataresult =mysql_fecth_array($result1, MYSQL_NUM);


//participants enrolled
$query1 = "SELECT inca.participantsEnrolled, ac.participantsEnrolled from inca, ac";
$result = mysql_query($query1) or die ('Could not find brazil');
$enrolled = mysql_fetch_array($result, MYSQL_NUM) or die ('could not retrieve the record');

//participants expected
$query2 = "SELECT inca.participantsExpected, ac.participantsExpected from inca, ac";
$result2 = mysql_query($query2) or die ('Could not find brazil');
$expected = mysql_fetch_array($result2, MYSQL_NUM) or die ('could not retrieve the record'); 
?>

<link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />

<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>

<!--<?php require_once 'c:/wamp/www/recipe/dojoTesting/bardb.php';?>-->

<script>require(["dojox/charting/Chart", "dojox/charting/StoreSeries", "dojo/store/Memory", "dojo/store/Observable",
"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
   function(Chart, Default, StorieSeries, Memory, Observable, Bars, Markers, ready){
   ready(function(){

     var dataEnrolled = {items: ($enrolled)};
     var dataExpected = {items: ($expected)};

    // var chartData = {Items: ($dataresult)};
    // var dataStore = new Observable(new Memory({data: chartData}));

    //data store
    var dataStore1 = new Observable (new Memory({
    data: {Items: dataEnrolled,  label: "EnrolledParticipants", identifier :"identity"}})); 

    var dataStore2 =new Observable(new Memory({
    data: {Items: dataExpected,  label: "ExpectedParticipants", identifier: "identity"}}));     

    var chart = new Chart("simplechart", {
      title: "Participants (Enrolled X Expected)",
      titlePos: "top",
      titleGap: 25,
      titleFont: "normal normal normal 20pt Tahoma",
      titleFontColor: "black"
    });

    //chart1.setTheme(tundra);
    chart.addPlot("default", {type: Bars,markers:true,gap:5});
    chart.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma"});
    chart.addAxis("y", {stroke:"black", font:"normal normal bold 12pt Tahoma", vertical: true,labels:[{value:0, text:""}, {value:1, text:"Uruguay"},
    {value:2, text:"Mexico-Sonora"}], rotation:20});
    //chart.addSeries("Series A", new StoreSeries(dataStore, {fill:"#3399FF"});
    chart.addSeries("Series A", new StoreSeries(dataStore1, "value");
    chart.addSeries("Series B", new StoreSeries(dataStore2, "value"); 
    chart.render();
  });
});
</script>
</head>
<body class="Wetland">
    <div id="simplechart" style="width: 600px; height: 500px; margin: 10px auto 10px auto;"></div>
    </body>
</html>
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

Please put this temporary debug code immediately after line 26:

print_r($enrolled);
print_r($expected);
die();

and post what you get.

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

This is what I get

Array ( [0] => 5 [1] => 10 ) Array ( [0] => 20 [1] => 50 )

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

Now, it is a question of what parameters the dataStore1 and dataStore2 objects expect. If a JSON with one property and value an array, then you should add this code to create arrays in javascript format:

$enrolled_js_array = '[' . implode(',', $enrolled) . ']';
$expected_js_array = '[' . implode(',', $expected) . ']';

and change code in lines 42 and 43 to:

var dataEnrolled = {$enrolled_js_array}; // [5,10] in your case
var dataExpected = {$expected_js_array}; // [20,50] in your case

since you are using Items property name later in the object definition (I doubt you can use it twice). I am just guessing, as I said, since I do not know anything about using charts in dojo.

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

this is what I tried, for some reason I still can~t get it right. It says that my implode function is not being used correctly. As you can see in the code (I comment it out) I tested it with some hard array data and without the implode part and the graph was showing, so I think now there is something wrong with the query, because it is not getting all the data from the database. It only gets the first row for each table. I had added more 3 more rows of data to one of the tables.

    <!DOCTYPE html>
    <html >
    <head>
    <h2 align="center">Bar Graphs</h2><br>

    <?php

    $con = mysql_connect("localhost", "test", "test") or die('Sorry, could not connect to database server');
    mysql_select_db("brazil", $con) or die('Sorry, could not connect to database');

    //participants enrolled
    $query1 = "SELECT inca.participantsEnrolled from inca";
    $result = mysql_query($query1) or die ('Could not find cities');
    $array1 = mysql_fetch_array($result) or die ('could not retrieve the record');


    $query2 = "SELECT ac.participantsEnrolled from ac";
    $result2 = mysql_query($query2) or die ('Could not find cities');
    $array2 = mysql_fetch_array($result2) or die ('could not retrieve the record');

    $enrolled_array = '[' . implode(',', $result) . ']';
    $expected_array = '[' . implode(',', $result2) . ']';
    //$enrolled_array =($array1 + $array2);
    //$enrolled_array = array(5, 6, 23, 87, 65);
    //$expected_array = array(11, 22, 33, 44, 55);
    //print_r($enrolled_array);

    function array_to_chart_json($array) {
            $toReturn = array();
            foreach ($array as $key=>$value) {
                $toReturn[] = array(
                    'y'=>$value,
                    'text'=>$key,
                    'stroke'=>'black',
                    'tooltip'=>$key
                );
            }
            return json_encode($toReturn);
        }

    ?>

    <link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
                   data-dojo-config="async: true"></script>

    <script>require(["dojox/charting/Chart", "dojox/charting/StoreSeries", "dojo/store/Memory", "dojo/store/Observable",
    "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
       function(Chart, Default, StorieSeries, Memory, Observable, Bars, Markers, ready){
       ready(function(){

        var dataEnrolled = <?php echo array_to_chart_json($enrolled_array); ?>;
        var dataExpected = <?php echo array_to_chart_json($expected_array); ?>;


        var chart = new Chart("simplechart", {
          title: "Participants (Enrolled X Expected)",
          titlePos: "top",
          titleGap: 25,
          titleFont: "normal normal normal 20pt Tahoma",
          titleFontColor: "black"
        });

        chart.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma"});
        chart.addAxis("y", {stroke:"black", font:"normal normal bold 12pt Tahoma", vertical: true, labels:[{value:0, text:""}, {value:1, text:"Uruguay"}, {value:2, text:"Mexico-Sonora"}], rotation:20});
        chart.addPlot("default", {type: "Bars", markers:true, gap:5});
        //chart.addSeries("Series A", new StoreSeries(dataStore, {fill:"#3399FF"});
        //chart.addSeries("Series A", new StoreSeries(dataStore1, "value");
        //chart.addSeries("Series B", new StoreSeries(dataStore2, "value"); 
        //chart.addSeries("Series A", <?php echo array_to_chart_json($enrolled_array); ?>);
        //chart.addSeries("Series B", <?php echo array_to_chart_json($expected_array); ?>);
        chart.addSeries("Series A", dataEnrolled);
        chart.addSeries("Series B", dataExpected);

        chart.render();
      });
    });
    </script>
    </head>
    <body class="Wetland">
        <div id="simplechart" style="width: 600px; height: 500px; margin: 10px auto 10px auto;"></div>
        </body>
    </html>
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

This brings us back to my first post to your question. You have to use a while loop to read all the rows. Within the while loop you have to construct the array that the charting function expects. From your hard-coded array examples I guess you need just two indexed arrays.

// initialize the array
$enrolled_array = array();

// add valus from each row
while ($row = mysql_fetch_array($result2)) {
    $enrolled_array[] = $row['participantsEnrolled'];
}

This is again my guess since I do not know the db structure and dojo. So please adapt that to your needs.

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

You are absolutly right, I actually incremented the loop this afternoon and finally when I print, I am getting the full dataset. The problem now is that it doesn't seem like the

var dataEnrolled = <?php echo array_to_chart_json($array1); ?>;
var dataExpected = <?php echo array_to_chart_json($array2); ?>;

is being passed correctly. The chart.Series still can't seem to be able to read this array. Here is my latest code.

<!DOCTYPE html>
<html >
<head>
<h2 align="center">Bar Graphs</h2><br>

<?php

$con = mysql_connect("localhost", "test", "test") or die('Sorry, could not connect to database server');
mysql_select_db("brazil", $con) or die('Sorry, could not connect to database');

//participants enrolled
$array1 = array();
$query1 = "SELECT participantsEnrolled from inca UNION (Select participantsEnrolled from ac)";
$result = mysql_query($query1) or die ('Could not find cities');

while ($enrolled = mysql_fetch_array($result, MYSQL_BOTH)){
    $array1[]=$enrolled['participantsEnrolled'];
    }

$array1 = array_map('trim',explode(',',implode(',',$array1)));
    //print_r($array1);

//participants expected
$array2 = array();
$query2 = "SELECT participantsExpected from inca UNION (Select participantsExpected from ac)";
$result2 = mysql_query($query2) or die ('Could not find cities');

while ($expected = mysql_fetch_array($result2, MYSQL_BOTH)){
    $array2[]=$expected['participantsExpected'];
    }

$array2 = array_map('trim',explode(',',implode(',',$array2)));
    //print_r($array2);


function array_to_chart_json($array) {
        $toReturn = array();
        foreach ($array as $key=>$value) {
            $toReturn[] = array(
                'y'=>$value,
                'text'=>$key,
                'stroke'=>'black',
                'tooltip'=>$key
            );
        }
        return json_encode($toReturn);
    }

?>

<link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />

<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>

<script>require(["dojox/charting/Chart", "dojox/charting/StoreSeries", "dojo/store/Memory", "dojo/store/Observable",
"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
   function(Chart, Default, StorieSeries, Memory, Observable, Bars, Markers, ready){
   ready(function(){

    var dataEnrolled = <?php echo array_to_chart_json($array1); ?>;
    var dataExpected = <?php echo array_to_chart_json($array2); ?>;
    //var dataEnrolled = ($array1);
    //var dataExpected = ($array2);


    var chart = new Chart("simplechart", {
      title: "Participants (Enrolled X Expected)",
      titlePos: "top",
      titleGap: 25,
      titleFont: "normal normal normal 20pt Tahoma",
      titleFontColor: "black"
    });

    chart.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma"});
    chart.addAxis("y", {stroke:"black", font:"normal normal bold 12pt Tahoma", vertical: true, labels:[{value:0, text:""}, {value:1, text:"Uruguay"}, {value:2, text:"Mexico-Sonora"}], rotation:20});
    chart.addPlot("default", {type: "Bars", markers:true, gap:5});
    //chart.addSeries("Series A", <?php echo array_to_chart_json($enrolled_array); ?>);
    //chart.addSeries("Series B", <?php echo array_to_chart_json($expected_array); ?>);
    chart.addSeries("Series A", dataEnrolled);
    chart.addSeries("Series B", dataExpected);

    chart.render();
  });
});
</script>
</head>
<body class="Wetland">
    <div id="simplechart" style="width: 600px; height: 500px; margin: 10px auto 10px auto;"></div>
    </body>
</html>
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

I think you first have to define (and let me know) what is the format the dojo chart expects. You were using javascript array in previous posts and now use json. Can you please post the exact format you want the dataEnrolled and dataExpected be.

What is the purpose of this line:

$array2 = array_map('trim',explode(',',implode(',',$array2)));
Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

You are absolutly right, I actually incremented the loop this afternoon and finally when I print, I am getting the full dataset. The problem now is that it doesn't seem like the

var dataEnrolled = ($array1);
var dataExpected = ($array2);

is being passed correctly. The chart.Series still can't seem to be able to read this array. Here is my latest code.

<!DOCTYPE html>
<html >
<head>
<h2 align="center">Bar Graphs</h2><br>

<?php

$con = mysql_connect("localhost", "test", "test") or die('Sorry, could not connect to database server');
mysql_select_db("brazil", $con) or die('Sorry, could not connect to database');

//participants enrolled
$array1 = array();
$query1 = "SELECT participantsEnrolled from inca UNION (Select participantsEnrolled from ac)";
$result = mysql_query($query1) or die ('Could not find cities');

while ($enrolled = mysql_fetch_array($result, MYSQL_BOTH)){
    $array1[]=$enrolled['participantsEnrolled'];
    }

$array1 = array_map('trim',explode(',',implode(',',$array1)));
    //print_r($array1);

//participants expected
$array2 = array();
$query2 = "SELECT participantsExpected from inca UNION (Select participantsExpected from ac)";
$result2 = mysql_query($query2) or die ('Could not find cities');

while ($expected = mysql_fetch_array($result2, MYSQL_BOTH)){
    $array2[]=$expected['participantsExpected'];
    }

$array2 = array_map('trim',explode(',',implode(',',$array2)));
    //print_r($array2);


function array_to_chart_json($array) {
        $toReturn = array();
        foreach ($array as $key=>$value) {
            $toReturn[] = array(
                'y'=>$value,
                'text'=>$key,
                'stroke'=>'black',
                'tooltip'=>$key
            );
        }
        return json_encode($toReturn);
    }

?>

<link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />

<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>

<script>require(["dojox/charting/Chart", "dojox/charting/StoreSeries", "dojo/store/Memory", "dojo/store/Observable",
"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
   function(Chart, Default, StorieSeries, Memory, Observable, Bars, Markers, ready){
   ready(function(){

    var dataEnrolled = <?php echo array_to_chart_json($array1); ?>;
    var dataExpected = <?php echo array_to_chart_json($array2); ?>;
    //var dataEnrolled = ($array1);
    //var dataExpected = ($array2);


    var chart = new Chart("simplechart", {
      title: "Participants (Enrolled X Expected)",
      titlePos: "top",
      titleGap: 25,
      titleFont: "normal normal normal 20pt Tahoma",
      titleFontColor: "black"
    });

    chart.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma"});
    chart.addAxis("y", {stroke:"black", font:"normal normal bold 12pt Tahoma", vertical: true, labels:[{value:0, text:""}, {value:1, text:"Uruguay"}, {value:2, text:"Mexico-Sonora"}], rotation:20});
    chart.addPlot("default", {type: "Bars", markers:true, gap:5});
    //chart.addSeries("Series A", <?php echo array_to_chart_json($enrolled_array); ?>);
    //chart.addSeries("Series B", <?php echo array_to_chart_json($expected_array); ?>);
    chart.addSeries("Series A", dataEnrolled);
    chart.addSeries("Series B", dataExpected);

    chart.render();
  });
});
</script>
</head>
<body class="Wetland">
    <div id="simplechart" style="width: 600px; height: 500px; margin: 10px auto 10px auto;"></div>
    </body>
</html>
Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Before I wasn't getting the complete array, but after I found it online the

$array1 = array_map('trim',explode(',',implode(',',$array1)));

example, now the array is getting all the data from the database.

the dojo chart can pass the data as an array, or as a storieSeries (with jason format data)

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

To my knowledge, the code:

$array1 = array_map('trim',explode(',',implode(',',$array1)));

is equal to the following:

$array1 = array_map('trim', $array1);
Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

You were right, I do not know what I was thinking. Thanks for the heads up!

So here is the new code. Still not being able to display the graph tho. Here it is the updated code. I am not using the json to pass the arrays.

<!DOCTYPE html>
<html >
<head>
<h2 align="center">Bar Graphs</h2><br>

<?php
//connect to database
$con = mysql_connect("localhost", "test", "test") or die('Sorry, could not connect to database server');
mysql_select_db("brazil", $con) or die('Sorry, could not connect to database');

//array of participants enrolled
$array1 = array();
$query1 = "SELECT participantsEnrolled from inca UNION (Select participantsEnrolled from ac)";
$result = mysql_query($query1) or die ('Could not find cities');

while ($enrolled = mysql_fetch_array($result, MYSQL_BOTH)){
    $array1[]=$enrolled['participantsEnrolled'];
    }

//$array1 = array_map('trim',explode(',',implode(',',$array1)));
    $array1 = array_map('trim', $array1);
    print_r($array1);

//array of participants expected
$array2 = array();
$query2 = "SELECT participantsExpected from inca UNION (Select participantsExpected from ac)";
$result2 = mysql_query($query2) or die ('Could not find cities');

while ($expected = mysql_fetch_array($result2, MYSQL_BOTH)){
    $array2[]=$expected['participantsExpected'];
    }
    $array2 = array_map('trim', $array2);   
//$array2 = array_map('trim',explode(',',implode(',',$array2)));
    print_r($array2);

function array_to_chart_json($array) {
        $toReturn = array();
        foreach ($array as $key=>$value) {
            $toReturn[] = array(
                'y'=>$value,
                'text'=>$key,
                'stroke'=>'black',
                'tooltip'=>$key
            );
        }
        return json_encode($toReturn);
    }
?>

<link rel="stylesheet" type="text/css" href="./dijit/themes/claro/claro.css" />

<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script>

<script>require(["dojox/charting/Chart", "dojox/charting/StoreSeries", "dojo/store/Memory", "dojo/store/Observable",
"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
   function(Chart, Default, StorieSeries, Memory, Observable, Bars, Markers, ready){
   ready(function(){

    //var dataEnrolled = <?php echo array_to_chart_json($array1); ?>;
    //var dataExpected = <?php echo array_to_chart_json($array2); ?>;
    var dataEnrolled = $array1;
    var dataExpected = $array2;


    var chart = new Chart("simplechart", {
      title: "Participants (Enrolled X Expected)",
      titlePos: "top",
      titleGap: 25,
      titleFont: "normal normal normal 20pt Tahoma",
      titleFontColor: "black"
    });

    chart.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma"});
    chart.addAxis("y", {stroke:"black", font:"normal normal bold 12pt Tahoma", vertical: true, labels:[{value:0, text:""}, {value:1, text:"INCA"}, {value:2, text:"AC"}], rotation:20});
    chart.addPlot("default", {type: "Bars", markers:true, gap:5});
    //chart.addSeries("Series A", <?php echo array_to_chart_json($enrolled_array); ?>);
    //chart.addSeries("Series B", <?php echo array_to_chart_json($expected_array); ?>);
    chart.addSeries("Series A", [dataEnrolled]);
    chart.addSeries("Series B", [dataExpected]);

    chart.render();
  });
});
</script>
</head>
<body class="Wetland">
    <div id="simplechart" style="width: 600px; height: 500px; margin: 10px auto 10px auto;"></div>
    </body>
</html>

Now we know that the query is getting the correct data and the array is receiving the full data set. So, I seem to be messing up in those too lines:

var dataEnrolled = $array1;
var dataExpected = $array2;
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

Please insert the following code on line 64

alert(dataEnrolled.toSource());
alert(dataExpected.toSource());

and check whether the data for dojo chart is formatted correctly (it will be displayed in two dialog boxes).

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

It doesn~t show anything...

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

Do you get any javascript errors? Do you use any debugging tools like Firebug?

Member Avatar
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

it does not give me any errors, it just give me a blank page. No, I have never used Firebug

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article