Dojo bar graph from data in the db

Question

Samyx 36 Junior Poster in Training

11 Years Ago

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>

php

2 Contributors
24 Replies
255 Views
6 Days Discussion Span
Latest Post 11 Years Ago Latest Post by broj1

broj1 356 Humble servant

11 Years Ago

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.

Edited 11 Years Ago by broj1

broj1 356 Humble servant

11 Years Ago

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)};

Edited 11 Years Ago by broj1

broj1 356 Humble servant

11 Years Ago

Please put this temporary debug code immediately after line 26:

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

and post what you get.

Edited 11 Years Ago by broj1

broj1 356 Humble servant

11 Years Ago

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.

broj1 356 Humble servant

11 Years Ago

But I still have some questions, if you don't mind me. I know you are probably tired of me at this point.

No, I am quite happy to help if I can. But the problem is that I haven't used dojo in my life so I do not have a clue about how it works. You have to figure out what is the format of data that dojo chart of selected type expects and you then have to provide data in that format.

I would suggest you close this thread and start a fresh new one so others can contribute (I doubt many people are following this thread since it is so long). You give it a good title like How to create a Dojo StackedBar so Dojo gurus can jump in (hope there are any).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Samyx 36 Junior Poster in Training · Answer 1 · 2013-02-01T22:01:10+00:00

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?

Samyx 36 Junior Poster in Training · Answer 2 · 2013-02-02T09:53:48+00:00

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>

Samyx 36 Junior Poster in Training · Answer 3 · 2013-02-03T20:11:10+00:00

This is what I get

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

Samyx 36 Junior Poster in Training · Answer 4 · 2013-02-04T21:52:54+00:00

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>

broj1 356 Humble servant Featured Poster · Answer 5 · 2013-02-04T22:17:34+00:00

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.

Samyx 36 Junior Poster in Training · Answer 6 · 2013-02-05T02:06:09+00:00

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>

broj1 356 Humble servant Featured Poster · Answer 7 · 2013-02-05T12:25:05+00:00

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)));

Samyx 36 Junior Poster in Training · Answer 8 · 2013-02-05T14:18:55+00:00

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>

Samyx 36 Junior Poster in Training · Answer 9 · 2013-02-05T14:22:35+00:00

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)

broj1 356 Humble servant Featured Poster · Answer 10 · 2013-02-05T16:10:35+00:00

To my knowledge, the code:

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

is equal to the following:

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

Samyx 36 Junior Poster in Training · Answer 11 · 2013-02-06T03:43:47+00:00

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;

broj1 356 Humble servant Featured Poster · Answer 12 · 2013-02-06T13:54:22+00:00

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).

Samyx 36 Junior Poster in Training · Answer 13 · 2013-02-06T14:31:07+00:00

Samyx 36 Junior Poster in Training

11 Years Ago

It doesn~t show anything...

broj1 356 Humble servant Featured Poster · Answer 14 · 2013-02-06T16:25:20+00:00

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

Samyx 36 Junior Poster in Training · Answer 15 · 2013-02-06T17:23:21+00:00

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

broj1 356 Humble servant Featured Poster · Answer 16 · 2013-02-06T18:11:06+00:00

Without debugging tools it is like walking in a dark room. It is hard to figure out what is the format of the data passed to the charting function. Do you use Firefox? There must be a javascript console where you can get basic information about javascript code execution. I strongly recommend to install Firebug exstension though.

Samyx 36 Junior Poster in Training · Answer 17 · 2013-02-06T22:28:39+00:00

So I installed Firebug, and took a look at the code. It seems like the data has the correct format. Now, I am wondering if I have done some of the 'require' incorrectly.

Samyx 36 Junior Poster in Training · Answer 18 · 2013-02-06T22:30:15+00:00

This is what I see on Firebug:

require(["dojox/charting/Chart", "dojox/charting/StoreSeries", "dojo/store/Memory", "dojo/store/Observable",
"dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedBars", "dojox/charting/plot2d/Markers", "dojo/ready"],
function(Chart, Default, StoreSeries, Memory, Observable, StackedBars, Markers, ready){
ready(function(){
var dataEnrolled = [{"y":"5","text":0,"stroke":"black","tooltip":0},{"y":"10","text":1,"stroke":"black","tooltip":1},{"y":"7","text":2,"stroke":"black","tooltip":2},{"y":"23","text":3,"stroke":"black","tooltip":3}];
var dataExpected = [{"y":"20","text":0,"stroke":"black","tooltip":0},{"y":"50","text":1,"stroke":"black","tooltip":1},{"y":"14","text":2,"stroke":"black","tooltip":2},{"y":"100","text":3,"stroke":"black","tooltip":3}];
//alert(dataEnrolled).toSource();
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: "StackedBars", markers:true, gap:5});
//chart.addSeries("Series A", <br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: enrolled_array in C:\wamp\www\recipe\dojoTesting\barsite2.php on line <i>76</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0654</td><td bgcolor='#eeeeec' align='right'>382456</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\recipe\dojoTesting\barsite2.php' bgcolor='#eeeeec'>..\barsite2.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: Invalid argument supplied for foreach() in C:\wamp\www\recipe\dojoTesting\barsite2.php on line <i>35</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0654</td><td bgcolor='#eeeeec' align='right'>382456</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\recipe\dojoTesting\barsite2.php' bgcolor='#eeeeec'>..\barsite2.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0687</td><td bgcolor='#eeeeec' align='right'>393168</td><td bgcolor='#eeeeec'>array_to_chart_json( )</td><td title='C:\wamp\www\recipe\dojoTesting\barsite2.php' bgcolor='#eeeeec'>..\barsite2.php<b>:</b>76</td></tr>
</table></font>
[]);
//chart.addSeries("Series B", <br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: expected_array in C:\wamp\www\recipe\dojoTesting\barsite2.php on line <i>77</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0654</td><td bgcolor='#eeeeec' align='right'>382456</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\recipe\dojoTesting\barsite2.php' bgcolor='#eeeeec'>..\barsite2.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: Invalid argument supplied for foreach() in C:\wamp\www\recipe\dojoTesting\barsite2.php on line <i>35</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0654</td><td bgcolor='#eeeeec' align='right'>382456</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\recipe\dojoTesting\barsite2.php' bgcolor='#eeeeec'>..\barsite2.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0689</td><td bgcolor='#eeeeec' align='right'>393168</td><td bgcolor='#eeeeec'>array_to_chart_json( )</td><td title='C:\wamp\www\recipe\dojoTesting\barsite2.php' bgcolor='#eeeeec'>..\barsite2.php<b>:</b>77</td></tr>
</table></font>
[]);
//chart.addSeries("Series A", [{"y":"5","text":0,"stroke":"black","tooltip":0},{"y":"10","text":1,"stroke":"black","tooltip":1},{"y":"7","text":2,"stroke":"black","tooltip":2},{"y":"23","text":3,"stroke":"black","tooltip":3}]);
//chart.addSeries("Series B", [{"y":"20","text":0,"stroke":"black","tooltip":0},{"y":"50","text":1,"stroke":"black","tooltip":1},{"y":"14","text":2,"stroke":"black","tooltip":2},{"y":"100","text":3,"stroke":"black","tooltip":3}]);
chart.addSeries("Series A", dataEnrolled);
chart.addSeries("Series B", dataExpected);
chart.render();
});
});

Samyx 36 Junior Poster in Training · Answer 19 · 2013-02-07T17:01:54+00:00

Great, I got the bar working :)
But I still have some questions, if you don't mind me. I know you are probably tired of me at this point.

Questions:
1. I wanted to create a StackedBar, the result is correct but I am not using the StackedBar, you see it in the code, I am using regular Bar. When I tried to use StackedBar the graph does not show. How can I fix that?
2. I was able to add the SelectableLegend, so it can be a little fancy, and I also added Tooltip. However, for the tooltip only the Uruguay Bar is able to show the correct array value. For the other bars, it seems like its getting the array index and not the value. How can I change that so it can correcly display the value when I hove over the bar?

Thanks again for all your help.

<!DOCTYPE html>
<html >
<head>
<?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', $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);   
    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/action2d/Magnify", "dojox/charting/action2d/Tooltip", "dojox/charting/widget/SelectableLegend", "dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Bars", "dojox/charting/plot2d/Markers", "dojo/ready"],
   function(Highlight, Tooltip, SelectableLegend, Chart, Default, Bars, Markers, ready){
   ready(function(){

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

    //alert(dataEnrolled).toSource();



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

    chart.addAxis("x", {stroke:"black",font:"normal normal bold 12pt Tahoma", min:0});
    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"},{value:3, text:"Mexico-Guadalajara"}, {value:4, text:"Chile"}], rotation:20});
    chart.addPlot("default", {type: "Bars", markers:true, gap:5});
    //chart.addSeries("Series A", <?php echo array_to_chart_json($array1); ?>);
    //chart.addSeries("Series B", <?php echo array_to_chart_json($array2); ?>);
    chart.addSeries("Participants Enrolled", dataEnrolled, {fill:"blue"});
    chart.addSeries("Participants Expected", dataExpected, {fill:"lightblue"});

    var mag = new dojox.charting.action2d.Highlight(chart,"default");
    //var anima = new dojox.charting.action2d.Tooltip(chart, "default");
    new Tooltip(chart, "default");

    chart.render(); 
    var selectableLegend = new dojox.charting.widget.SelectableLegend({chart: chart, outline: true}, "selectableLegend");

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