We're a community of 1076K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,075,970 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion
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…

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.

broj1
Nearly a Posting Virtuoso
1,211 posts since Jan 2011
Reputation Points: 167
Solved Threads: 164
Skill Endorsements: 13

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
Junior Poster
104 posts since Sep 2009
Reputation Points: 46
Solved Threads: 2
Skill Endorsements: 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();
});
}); 
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 46
Solved Threads: 2
Skill Endorsements: 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>
Samyx
Junior Poster
104 posts since Sep 2009
Reputation Points: 46
Solved Threads: 2
Skill Endorsements: 0

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

broj1
Nearly a Posting Virtuoso
1,211 posts since Jan 2011
Reputation Points: 167
Solved Threads: 164
Skill Endorsements: 13

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
 
 
© 2013 DaniWeb® LLC
Page rendered in 0.0801 seconds using 2.97MB