0

I am using two identical scripts inside two tabs in order to create a dojo chart in each one: tabs page.

If you open the page with Google Chrome, Safari both tabs render the charts.

If you open it with Firefox the second tab does NOT render it's chart. If you open it with Explorer 11 the second tab renders it's chart in random sizes.

Can somebody tell me why I am getting this error in the second tab?

All my browsers are updated to their latest versions.

The script uses the latest versions of dojo, jquery:

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>

  <script>
    require([
             "dojox/charting/Chart",
             "dojox/charting/Chart2D", 
             "dojox/charting/action2d/MoveSlice" , 
             "dojox/charting/action2d/Tooltip",
             "dojo/ready"], 
            function(Chart, Chart2D, MoveSlice, Tooltip, ready){

ready(function(){

var chart1 = new Chart("He1");

                chart1.addPlot("default", {
                    type: "Pie"
                });
                chart1.addSeries("He1", [
                    {y: 1, text: 1},
                    {y: 1, text: 2}

                ]);
                new Tooltip(chart1, "default");
                new MoveSlice(chart1, "default");

chart1.render();

});

    });

    </script>

</head>
<body class="calcite">
<div>
    <div id="He1" style="width: 140px; height: 140px; "></div>
</div>

</body>
</html>
2
  • While sensomarket web page uses accordion, your code does not. Can you update your code to reflect problem described? And even better, can you make working jsfiddle out of it (as I did last time for you here) so that it is easier to track down the issue?
    – andy
    Commented Jan 15, 2018 at 19:51
  • @andy I am using the same code from the jsfiddle you provided. In my WordPress Theme accordion module I insert the link to the code <iframe src="..."></iframe> I am not sure I can recreate in jsfiddle the code for the accordion, it is created by the theme page builder. Thank you
    – Michelle
    Commented Jan 15, 2018 at 21:30

1 Answer 1

Reset to default
1

To make multiple charts in accordion create appropriate layout and then initialize charts and accordion container wrapping them.

For example you can modify your layout to

<body class="calcite">
  <div id="accordion" style="height: 280px">
    <div id="pane1">
      <div id="He1" style="width: 140px; height: 140px; "></div>
    </div>
    <div id="pane2">
      <div id="He2" style="width: 140px; height: 140px; "></div>
    </div>
  </div>
</body>

Then create you He1 and He2 charts as before, and finally initialize accordion and panels like this:

var acc = new AccordionContainer({}, "accordion");
acc.addChild(new ContentPane({
  title: "Chart one",
}, "pane1"));
acc.addChild(new ContentPane({
  title: "Chart two",
}, "pane2"));
acc.startup();

See working example here: https://jsfiddle.net/1k6w8otn/4

Note that it does not require any iframe. I strongly advocate for pure programming, using any builders (as you mentioned in comments) will usually lead to spaghetti code and many times you get yourself unable to fix it. Dojo toolkit is also far from best choice, it is niche library these days (no up to date books, virtually no community behind etc) and if you are not forced to use it, do some research and look for better JS library.

Not the answer you're looking for? Browse other questions tagged or ask your own question.