1.11M Members

Dojo bar graph from data in the db

 
0
 

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.

 
0
 

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.

 
0
 

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

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>
 
1
 

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

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