Adding Chart to InfoWindow

DanikBourdeau2 — Wed, 17 Apr 2013 02:28:31 GMT

I'm trying to add a chart to an InfoTemplate but I can't seem to get it to return the chart. Here is my code:

dojo.require("dojox.charting.themes.Julie"); dojo.require("dojox.charting.Chart2D"); dojo.require("dojox.charting.plot2d.Pie"); dojo.require("dojox.charting.action2d.Highlight"); dojo.require("dojox.charting.action2d.MoveSlice"); dojo.require("dojox.charting.action2d.Tooltip");  //Setting the InforTemplate for Layer var mtenTemplate = new esri.InfoTemplate(); mtenTemplate.setTitle("Mining Tenement ${tenid}"); mtenTemplate.setContent(getWindowContent);  function getWindowContent(graphic) {      var c = dojo.create("div", {         id: "demoChart"     }, dojo.create('div'));      var chart = new dojox.charting.Chart2D(c);          chart.setTheme(dojox.charting.themes.Julie);     chart.addPlot("default", {         type: "Pie",         radius: 70,         htmlLabels: true     });     chart.addSeries("Percentage of Tenement Covered by DIA Sites", [{         y: graphic.attributes.DIA_Perc,         tooltip: graphic.attributes.DIA_Perc,         text: 'DIA Sites Area'     }, {         y: graphic.attributes.Not_DIA_P,         tooltip: graphic.attributes.Not_DIA_P,         text: 'Area Not Covered'     }]);     new dojox.charting.action2d.Highlight(chart, "default");     new dojox.charting.action2d.Tooltip(chart, "default");     new dojox.charting.action2d.MoveSlice(chart, "default");      return "<b>Holder</b> " + graphic.attributes.holder1 +  "<br/><b>Tenement ID:</B> " + graphic.attributes.tenid + "<br/><b>Tenement Status:</b> " + graphic.attributes.tenstatus +  "<br/><b>Tenement Type:</b> " + graphic.attributes.type + "<br/><b>Tenement Area sqKm:</b> " + graphic.attributes.Area_sqKm +  "<br/><b>Number of DIA Sites:</b> " + graphic.attributes.DIA_S_Num + "<br/><b>DIA Sites Area sqKm:</b> " + graphic.attributes.DIA_S_Area +  "<br/><br/><b>Area Distribution</b><hr/>" + c; }

My function returns the contents of the InfoWindow where I want the chart to be at the bottom. I know I have to add chart.render() somewhere but I don't know where. I've tried many different combinations, any help would be much appreciated.

Thanks,

Re: Adding Chart to InfoWindow

SteveCole — Wed, 17 Apr 2013 14:37:21 GMT

You should review this ESRI sample to get you started. Although the sample's tabbed interface inside the infoWindow complicates a little, the basic workflow is there-

Create a dojo container

Create your chart DIV

create your chart (last line of this code block would be your chart.render()

Insert the chart element into your dojo container

Finally, at the end of your infoWindow content function, return the dojo container's node: return dContent.domNode;

Here's a full showContent function example of mine that inserts a chart into an infoWindow. I'm sorry it's a little complex but hopefully you can see what you need to see from it:

function raceByBlockgroupContent(graphic) {  var theTextContent;   theTextContent = "<table cellpadding=\"3\"><tr><td colspan=\"3\" style=\"background:#5495D6; font-weight:bold;font-size:125%;color:white\">" + graphic.attributes.pctMinor + "% of the population within this block group identified with a race other than white.</td></tr>";  theTextContent = theTextContent + "<tr><td>1.</td><td>White Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001004) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>2.</td><td>Black or African American Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001007) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>3.</td><td>American Indian and Alaska Native Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001010) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>4.</td><td>Asian Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001013) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>5.</td><td>Native Hawaiian and Other Pacific Islander Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001016) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>6.</td><td>Some Other Race Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001019) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>7.</td><td>Two or More Races:</td><td>" + dojo.number.format(graphic.attributes.B02001022) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>8.</td><td>Two Races Including Some Other Race:</td><td>" + dojo.number.format(graphic.attributes.B02001025) + "</td></tr>";  theTextContent = theTextContent + "<tr><td>9.</td><td style=\"border-bottom: 1px solid #000000\">Two Races Excluding Some Other Race, and Three or More Races:</td><td style=\"border-bottom: 1px solid #000000\">" + dojo.number.format(graphic.attributes.B02001028) + "</td></tr>";  theTextContent = theTextContent + "<tr><td colspan=\"2\" style=\"font-weight:bold;font-style:italic;font-size:115%\">TOTAL POPULATION:</td><td style=\"font-weight:bold;font-style:italic;font-size:115%\">" + dojo.number.format(graphic.attributes.B02001001) + "</td></tr></table>";   var cp1 = new dijit.layout.ContentPane({    title: "Details",    style: "height: 100%; width: 97%",  });    //Left Panel (population table)  var cp2 = new dijit.layout.ContentPane({    title: "Details",    style: "height: 100%; width: 47%; background: #D6EAFF; border: 4px solid #478FB2; float: left",    content: theTextContent  });    //Right Panel (percentage pie chart)  var cp3 = new dijit.layout.ContentPane({    title: "Details 2",       style: "height: 100%; width: 48%; float:right",     content: ""  });   cp1.containerNode.appendChild(cp2.domNode);  cp1.containerNode.appendChild(cp3.domNode);    var theChartDiv = dojo.place("<div></div>",cp3.containerNode);  var theLegendDiv = dojo.place("<div></div>",cp3.containerNode);    //create the chart  var pieChart = new dojox.charting.Chart2D(theChartDiv, {   title: "Breakdown of Total Population By Race",   titlePos: "top",   titleGap: 20,   titleFont: "bold normal normal 15pt Arial",   titleFontColor: "black"  });    //set the theme  pieChart.setTheme(dojox.charting.themes.Distinctive);    //add plot  pieChart.addPlot("default", {   type: "Pie",   radius: 100,   startAngle: 45,   labels: true,   font: "normal normal 12pt Arial",   labelWiring: "grey",   labelStyle: "columns",   fontColor: "black",   labelOffset: "-10"  });    //add the data series  var pieData = [{ "x": "White", "y": graphic.attributes.B02001004, tooltip: "White: " + dojo.number.format(graphic.attributes.B02001004), legend: " 1.    " },   { "x":"Black", "y":graphic.attributes.B02001007, tooltip: "Black / African American: " + dojo.number.format(graphic.attributes.B02001007), legend: " 2.    " },    { "x": "Native American", "y": graphic.attributes.B02001010, tooltip: "Native American: " + dojo.number.format(graphic.attributes.B02001010), legend: " 3.    " },    { "x": "Asian", "y": graphic.attributes.B02001013, tooltip: "Asian: " + dojo.number.format(graphic.attributes.B02001013), legend: " 4.    " },    { "x": "Pacific Islander", "y": graphic.attributes.B02001016, tooltip: "Pacific Islander: " + dojo.number.format(graphic.attributes.B02001016), legend: " 5.    " },    { "x": "Other", "y": graphic.attributes.B02001019, tooltip: "Other: " + dojo.number.format(graphic.attributes.B02001019), legend: " 6.    " },    { "x": "Two or More", "y": graphic.attributes.B02001022, tooltip: "Two or More Races: " + dojo.number.format(graphic.attributes.B02001022), legend: " 7.    " },   { "x": "Two Races (including Some Other Race)", "y": graphic.attributes.B02001025, tooltip: "Two or More Races (including Other): " + dojo.number.format(graphic.attributes.B02001025), legend: " 8.    " },   { "x": "Two Races (excluding Some Other Race), Three or More Races", "y": graphic.attributes.B02001028, tooltip: "Two or More Races (Excluding Other): " + dojo.number.format(graphic.attributes.B02001028), legend: " 9.    "}  ];   pieChart.addSeries("January",pieData);     //slice animation!  new dojox.charting.action2d.MoveSlice(pieChart,"default");  //tooltips!  new dojox.charting.action2d.Tooltip(pieChart,"default");  //render the chart  pieChart.render();    //Add the legend ONLY if there is more than one category with values. If not, the DOJO code will fail  var numOks = 0;    if (graphic.attributes.B02001004 > 0) {numOks++;}  if (graphic.attributes.B02001007 > 0) {numOks++;}  if (graphic.attributes.B02001010 > 0) {numOks++;}  if (graphic.attributes.B02001013 > 0) {numOks++;}  if (graphic.attributes.B02001016 > 0) {numOks++;}  if (graphic.attributes.B02001019 > 0) {numOks++;}  if (graphic.attributes.B02001022 > 0) {numOks++;}  if (graphic.attributes.B02001025 > 0) {numOks++;}  if (graphic.attributes.B02001028 > 0) {numOks++;}    if (numOks > 1) {   var legend1 = new dojox.charting.widget.Legend({chart: pieChart}, theLegendDiv);  } else {   var catDesc;   if (graphic.attributes.B02001004 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"White\"</SPAN>';}   if (graphic.attributes.B02001007 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Black\"</SPAN>';}   if (graphic.attributes.B02001010 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Native American\"</SPAN>';}   if (graphic.attributes.B02001013 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Asian\"</SPAN>'; }   if (graphic.attributes.B02001016 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Pacific Islander\"</SPAN>';}   if (graphic.attributes.B02001019 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Other\"</SPAN>';}   if (graphic.attributes.B02001022 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Two or More Races\"</SPAN>';}   if (graphic.attributes.B02001025 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Two Races (including Some Other Race)\"</SPAN>';}   if (graphic.attributes.B02001028 > 0) {    catDesc = '<SPAN style=\"font-style:italic\">\"Two Races (excluding Some Other Race), Three or More Races\"</SPAN>';}      theLegendDiv.innerHTML = '<SPAN style=\"font-weight:bold\">NOTE:</SPAN> ' + catDesc + ' contains all values<br/><br/>';    }     return cp1.domNode; }

Re: Adding Chart to InfoWindow

DanikBourdeau2 — Thu, 18 Apr 2013 02:18:13 GMT

That's some great code! Thanks for sharing Steve.

I didn't realize that I had to create a ContenPane, I figured it was implicit in the InfoWindow. Got it to work :), thanks again.

topic Re: Adding Chart to InfoWindow in ArcGIS JavaScript Maps SDK Questions

Adding Chart to InfoWindow

Re: Adding Chart to InfoWindow

Re: Adding Chart to InfoWindow