javascripthtmldojorequiredojox.charting

Uncaught ReferenceError: require is not defined with Dojo API

I have seen multiple incarnations of this error, but not seen an answer directly related to using the Dojo API/CDN. I am just going through a quick Dojo charting tutorial to figure out how to correctly apply a pie chart. I was using the simple instructions to set up a web page I could use to test from my local (see below). Everytime I launch the .html file, I get the error - Uncaught ReferenceError: require is not defined. All previous answers point to the src being faulty, whether its a cdn, api, or file path. I have tried multiple cdn's and configurations, including src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"and 

<script data-dojo-config="async: 1"
        src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>`,

yet I still get the same error (These are straight from the documentation). Any suggestions as to what is causing this error and how to resolve it to test my simple pie chart?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial: Pie Chart!</title>
        <script> src="//ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>
    </head>
    <body>
        <script>
            require([
                'dojo/dom',
                'dojo/dom-construct',
                'dojox/charting/Chart',
                'dojox/charting/themes/Claro',
                'dojox/charting/PiePlot'
            ], function (dom, domConstruct, Chart, theme, PiePlot) {
                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
            });

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

            // Render the chart!
            pieChart.render();
        });
        </script>
        <div id="chartNode" style="width: 550px; height: 550px;"></div>
    </body>
</html>
Solution

  • The first thing that there is a type error in your script tag line 6 , closed tag script and src attrib outside the script tag , that why you have the error reuire is not ...

    Also after correcting those you'ill still have some errors ,

    so you need to fix an import

    The 'dojox/charting/PiePlot' should be replaced by 'dojox/charting/plot2d/Pie'

    and you need to declare your chartData here ,

    If you need a file version see this GIST

    Otherwise see below working snippet :

    require([
  'dojo/dom',
  'dojo/dom-construct',
  'dojox/charting/Chart',
  'dojox/charting/themes/Claro',
  'dojox/charting/plot2d/Pie'
], function(dom, domConstruct, Chart, theme, PiePlot) {
  
  chartData = [
      { y: 389, text: "data1 " },
      { y: 125, text: "data 2" },
      { y: 285, text: "data 3" },
      { y: 193, text: "data 4" },
       { y: 21, text: "No data" }
  ];

  
  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
  });

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

  // Render the chart!
  pieChart.render();
});
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<div id="chartNode" style="width: 550px; height: 550px;"></div>