Multiple Charts In Info Window

[CourtneyRiggs]

First off thank you in advance for any help you can provide!!!

I am trying to have multiple charts display in an info window. I am able to have one tab with text, another tab with a chart, and a couple more tabs but the charts will not display. Below is the code I have for 3 tabs with only one of the two charts showing. I have tested the code and if I remove the code for the first chart the second chart will display.

//make a tab container
        var tc = new dijit.layout.TabContainer({
          style: "width:100%;height:100%;"
        }, dojo.create("div"));
       
        //display attribute information
        var cp1 = new dijit.layout.ContentPane({
          title: "Tract Details",
          content: "<a target='_blank' <br />Average Income: " + graphic.attributes.MeanInc + "<br />Average Household Size: " + graphic.attributes.AvgHouseho + "<br />Average Age: " + graphic.attributes.MedianAge
        });

//display a dojo pie chart for the tabs
var cp2 = new dijit.layout.ContentPane({
          title: "Race"
        });

var cp3 = new dijit.layout.ContentPane({
          title: "Gender"
        })
       
      
        tc.addChild(cp1);
        tc.addChild(cp2);
  tc.addChild(cp3);

//create the chart that will display in the second tab
        var c = dojo.create("div", {
          id: "demoChart"
        }, dojo.create('div'));

        var chart = new dojox.charting.Chart2D(c);


        dojo.addClass(chart, 'chart');
       
        //apply a color theme to the chart
        chart.setTheme(dojo.getObject("dojox.charting.themes." + theme));

        chart.addPlot("default", {
    type: "Pie",
          radius: 70,
          htmlLabels: true
        });
        dojo.connect(tc,'selectChild',function(tabItem){
          if(tabItem.title === "Race"){
          chart.resize(180,180);
          }
        });

        var White = dojo.number.round(graphic.attributes.PercWhite);
        var Hispanic = dojo.number.round(graphic.attributes.PercHisp);
        var Black = dojo.number.round(graphic.attributes.PercBlack);
        var Asian = dojo.number.round(graphic.attributes.PercAsian);
       
        chart.addSeries("Race", [{
          y: White,
          tooltip: White,
          text: 'White'
        }, {
           y: Hispanic,
          tooltip: Hispanic,
          text: 'Hispanic'
        }, {
           y: Black,
          tooltip: Black,
          text: 'Black'
        }, {
          y: Asian,
          tooltip: Asian,
          text: 'Asian'
        }]);
        //highlight the chart and display tooltips when you mouse over a slice.
        new dojox.charting.action2d.Highlight(chart, "default");
        new dojox.charting.action2d.Tooltip(chart, "default");
        new dojox.charting.action2d.MoveSlice(chart, "default");

        cp2.set('content', chart.node);
        return tc.domNode;

//create the chart that will display in the third tab
        var c3 = dojo.create("div", {
          id: "demoChart2"
        }, dojo.create('div'));

        var chart2 = new dojox.charting.Chart2D(c3);

        dojo.addClass(chart2, 'chart');
       
        //apply a color theme to the chart
        chart2.setTheme(dojo.getObject("dojox.charting.themes." + theme));

        chart2.addPlot("default", {
          type: "Pie",
          radius: 70,
          htmlLabels: true
        });
        dojo.connect(tc,'selectChild',function(tabItem){
          if(tabItem.title === "Gender"){
          chart2.resize(180,180);
          }
        });

        var Male = dojo.number.round(graphic.attributes.PercMale);
        var Female = dojo.number.round(graphic.attributes.PercFemale);
       
       
        chart2.addSeries("People", [{
          y: Male,
          tooltip: Male,
          text: 'Male'
        }, {
          y: Female,
          tooltip: Female,
          text: 'Female'
        }]);
        //highlight the chart and display tooltips when you mouse over a slice.
        new dojox.charting.action2d.Highlight(chart2, "default");
        new dojox.charting.action2d.Tooltip(chart2, "default");
        new dojox.charting.action2d.MoveSlice(chart2, "default");

        cp3.set('content', chart2.node);
        return tc.domNode;

       

      }

       
      dojo.ready(init);

[SteveCole · Accepted solution]

The code you've posted has two "return tc.domNode;" lines in it so I'm guessing that the second chart doesn't render because the first return statement is ending your function prematurely. Try commenting out the first "return tc.domNode;" located just before your "var C3=..." statement and see if that helps.

Steve

[CourtneyRiggs]

Steve,

Thank you so much!!! I had my instructor look over this and he could not find anything wrong. I have only been writing code for a few weeks so all of this is very new and confusing to me. Your fix definitely makes sense and work!!! Thank you again!!

Courtney