Dojo 1.8 chart programmatic tutorial error

StackOverflow https://stackoverflow.com/questions/12910918

Question

I have been going through some of the Dojo 1.8 tutorials, which are great, but have encountered a bug in the basic charting tutorial. The declarative example works fine, but the programmatic example has an error when it tries to render the chart.

Charting tutorial: http://dojotoolkit.org/documentation/tutorials/1.8/charting/

Working declarative example: http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/basic-declarative.php

Errored programmatic example: http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/basic-programmatic.php

From my investigations it looks like the problem is with the code trying to use the 'IN' operand on a string, at which point it falls over.

The error in firebug looks like this: "TypeError: invalid 'in' operand t"

You'll need to download the non minified version of dojox/gfx/path.js and look at line 191 where you'll see this snippet of code: 

if(t instanceof Array){
    this._collectArgs(_12,t);
  }else{
    if("x" in t&&"y" in t){
      _12.push(t.x,t.y);
    }
  }

I believe that the error is where the logic falls through into the "if("x" in t&&"y" in t)" line.

Any ideas?

Was it helpful?

Solution

it seems its an error in the tutorial, the 'labelOffset' is supposed to take a Number, but they are giving it a string, thus it fails, take the quotes away and it works, see this forum post. Charting tutorial in 1.7 and 1.8

OTHER TIPS

Right I've found the reason for the bug, but not the remedy.

Its the labelOffset value being a minus number, fancy that!

So if you change the "-20" to "20" it runs without error.

Full example including the minus value causing the bug...

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo: Basic Programmatic Chart</title>
    <link rel="stylesheet" href="style.css" media="screen">
    <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen">
  </head>
  <body>
     <h1>Demo: Basic Programmatic Chart</h1>

     <!-- create the chart -->
     <div id="chartNode" style="width: 550px; height: 550px;"></div>

     <!-- load dojo and provide config via data attribute -->
     <!-- load dojo and provide config via data attribute -->
     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>
     <script>

     // x and y coordinates used for easy understanding of where they should display
     // Data represents website visits over a week period
     chartData = [
       { x: 1, y: 19021 },
       { x: 1, y: 12837 },
       { x: 1, y: 12378 },
       { x: 1, y: 21882 },
       { x: 1, y: 17654 },
       { x: 1, y: 15833 },
       { x: 1, y: 16122 }
     ];

     require([
        // Require the basic 2d chart resource
        "dojox/charting/Chart",

        // Require the theme of our choosing
        "dojox/charting/themes/Claro",

        // Charting plugins: 

        //Require the Pie type of Plot 
        "dojox/charting/plot2d/Pie",

        // Wait until the DOM is ready
        "dojo/domReady!"
      ], function(Chart, theme, PiePlot){

        // Create the chart within it's "holding" node
        var pieChart = new Chart("chartNode");

        // Set the theme
        pieChart.setTheme(theme);

        // Add the only/default plot 
        pieChart.addPlot("default", {
          type: PiePlot, // our plot2d/Pie module reference as type value
          radius: 200,
          fontColor: "black",
          labelOffset: "-20" <-- bug value here
        });

        // Add the series of data
        pieChart.addSeries("January",chartData);

        // Render the chart!
        pieChart.render();

      });
    </script>
  </body>
</html>

Just make the labelOffset value positive instead, and everything should run ok.

labelOffset: "20"
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top