Search code examples
javascriptdojo

Dojo script loading error


We are doing a project with Dojox and have been struggling to load the cript. We tried using the Google cdn link: .

We also tried to import the toolkit into our project. But, failed. Gives an "Uncaught Reference error". Any help appreciated. Below is my code:

<!doctype html>
<html>
<head>
<script src="dojo-release-1.9.1/dojox/charting"></script>
<script type="text/javascript">
  require(['dojox/charting/Chart2D','dojox/charting/axis2d/Default','dojox/charting/plot2d/De    fault','dojox/charting/plot2d/Spider','dojox/charting/axis2d/Base'],function(Chart,     Default, Default, Spider, Base){
     var chart = new dojox.charting.Chart("test");
     chart.addPlot("default", {
     type:         "Spider",
     labelOffset:      -10,
     seriesFillAlpha:     0.2,
     markerSize:       3,
     precision:         0,
     spiderType:          "polygon"
 }); 


var data= [ {"CPU Utilization":1,"NetworkIn":444,"DiskReadBytes":1.00002,"NetworkOut":360.00001,"DiskWriteBytes":1.00002},
{"CPU Utilization":1.0001,"NetworkIn":444,"DiskReadBytes":1.0002,"NetworkOut":360.00001,"DiskWriteBytes":1},
{"CPU Utilization":1,"NetworkIn":486.00002,"DiskReadBytes":1.00001,"NetworkOut":360.00001,"DiskWriteBytes":1} ];


chart.addSeries("min", {data: data[0] }, { fill: "blue" });
chart.addSeries("max", {data: data[1] }, { fill: "blue" });
chart.addSeries("USA", {data: data[2] }, { fill: "blue" });

chart.render();
chart.removeSeries("min");
chart.removeSeries("max");
});
</script>
</head>
<body><div id="test" style="width: 400px; height: 240px; margin: 30px auto 0px auto;">       </div></body>
</html>

Solution

  • <script src="dojo-release-1.9.1/dojox/charting"></script>
    

    Are you sure the above actually works? I think you need to include all of Dojo. The Google CDN link would be //ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js; try that and see if it helps.


    The require callback is what takes the arguments of the modules in your dependency list, not the dojo.ready call. You also can't duplicate arguments in the callback list, like you did with Default. So, your require call should look something like the following.

    require([
        'dojox/charting/Chart2D',
        'dojox/charting/axis2d/Default',
        'dojox/charting/plot2d/Default',
        'dojox/charting/plot2d/Spider',
        'dojox/charting/axis2d/Base'
    ], function(Chart, DefaultAxis, DefaultPlot, Spider, Base) {
    

    And your dojo.ready call shouldn't take any arguments. You can also include dojo/ready as a dependency like all your others, or use the dojo/domReady! plugin. Any way you do it, it doesn't take your dependencies as arguments, otherwise they'll be overwritten. It should look similar to the following.

    dojo.ready(function () {
    

    Other than the above problems with require and the script tag, the code looks like it works. Here's a fiddle of the working code with Dojo 1.9 and the dojo/domReady! plugin to make it a little cleaner. Note the inclusion of a div with id test. I wasn't sure if you just didn't paste the rest of that file in your question or if it was actually missing. There are a bunch of errors from the SVG renderer in the console, but the chart works.