AnsweredAssumed Answered

Multiple Charts In Info Window

Question asked by court127 on Mar 19, 2013
Latest reply on Mar 19, 2013 by court127
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);

Outcomes