Thread: StackedBars

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0

    StackedBars


    Hello Everyone,

    I am new to Dojo, so I am just testing things out and learning as it goes. I am trying to generate a StackedBar with data from a database. I had created a simple database. The queries are working fine. Everything seems ok, however it is still not drawing the graph. I can't seem to find the problem. Can anyone help me? See the code below:

    PHP Code:
    <!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($resultMYSQL_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($result2MYSQL_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/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 = <?php echo array_to_chart_json($array1); ?>;
        var dataExpected = <?php echo array_to_chart_json($array2); ?>;
            
        //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", <?php echo array_to_chart_json($array1); ?>);
        //chart.addSeries("Series B", <?php echo array_to_chart_json($array2); ?>);
        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>
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    Post the generated output also please. We cannot see the data contained within the PHP variables.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0
    I was able to fix the graph, now it is displaying. I also added SelectableLegend and Tooltip. But I still have some 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?

    Here are the values:

    array1: 5,10,7,23,25,8
    array2: 20,50,14,40,32,12

    PHP Code:
    <!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($resultMYSQL_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($result2MYSQL_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>
  6. #4
  7. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    106
    Rep Power
    4
    Originally Posted by samyx

    PHP Code:
    <!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($resultMYSQL_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($result2MYSQL_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);
        }
    ?>
    Please consider using a supported MYSQL interface. The MYSQL_ interface is deprecated.

    See MYSQLI and PDO for more information.

IMN logo majestic logo threadwatch logo seochat tools logo