JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > JavaScript Development
Reload this Page

Dojo - StackedBars


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 6th, 2013, 04:17 PM
samyx samyx is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2013
Posts: 5 samyx User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 55 m 56 sec
Reputation Power: 0
Dojo - 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($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/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> 
Reply With Quote
  #2  
Old February 7th, 2013, 07:03 AM
Winters Winters is offline
Super Moderator
Dev Shed Expert (3500 - 3999 posts)
  
Join Date: Jul 2003
Posts: 3,872 Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level) 
Time spent in forums: 1 Month 2 Weeks 1 Day 16 h 37 m 29 sec
Reputation Power: 2569
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.
Reply With Quote
  #3  
Old February 7th, 2013, 11:07 AM
samyx samyx is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2013
Posts: 5 samyx User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 55 m 56 sec
Reputation 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($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> 
Reply With Quote
  #4  
Old February 7th, 2013, 11:28 AM
richpri's Avatar
richpri richpri is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Location: Chicago
Posts: 49 richpri User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 h 32 m 9 sec
Reputation Power: 1
Facebook
Quote:
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($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);
    }
?> 


Please consider using a supported MYSQL interface. The MYSQL_ interface is deprecated.

See MYSQLI and PDO for more information.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Dojo - StackedBars

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap