Dojo Charts not appearing under IE8

1485
9
10-11-2012 07:59 AM
SteveCole
Frequent Contributor
Two steps forward, one step back.....

Just discovered that my use of dojo charts is not working in IE8 (but does work in Chrome, Firefox, and IE9). This ESRI Sample does work on my test machine with IE8 so I added the following HTML bits into my app to see if it would get it to work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
                .
                .

It didn't. My page will load without any errors (browser: IE8, document: IE7), and all my other dojo stuff looks and operates as it should. I'm using my charts in infoWindows and here is the code from one of my content generating functions:
function raceByBlockgroupContent(graphic) {
 //make a tab container 
 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/>';  
 } 
 //var legend1 = new dojox.charting.widget.Legend({chart: pieChart}, theLegendDiv);
 
 return cp1.domNode;
}


I've also attached a screenshot to show what the popup would look like. The javascript error that pops up occurs in the dojo vml.xd.js file and has a description of "this.rawNode.path is null or not an object."

Sadly, I need to support IE8 with this because that's the browser everyone within my organization has and my app is pretty worthless if I can't overcome this.
0 Kudos
9 Replies
derekswingley1
Frequent Contributor
I think there are a couple of places to look...

When you create your div for your chart, how about dojo.create("div") instead of "<div></div>" inside your dojo.place call? Same for your legend div if that's not showing as well.

Also, these two lines:
cp1.containerNode.appendChild(cp2.domNode);
cp1.containerNode.appendChild(cp3.domNode);


Smell funny to me. Since you're using dijits, how about:
cp2.placeAt(cp1.domNode);
cp3.placeAt(cp1.domNode);


If you're seeing all of your content panes in IE, then you can probably ignore this suggestion.
0 Kudos
SteveCole
Frequent Contributor
Thanks Derek for the suggestions. I inserted them as you suggested:

 //cp1.containerNode.appendChild(cp2.domNode);
 //cp1.containerNode.appendChild(cp3.domNode);
 cp2.placeAt(cp1.domNode);
 cp3.placeAt(cp1.domNode);

 //var theChartDiv = dojo.place("<div></div>",cp3.containerNode);
 //var theLegendDiv = dojo.place("<div></div>",cp3.containerNode);
 var theChartDiv = dojo.place(dojo.create("div"),cp3.containerNode);
 var theLegendDiv = dojo.place(dojo.create("div"),cp3.containerNode);


But they made no difference. I stepped through the code in my function line by line and everything runs fine until it hits this line:
pieChart.render();

at that point, it throws an ambiguous "object error" message with no line number. It's followed immediately by the other error I originally described. I should note that nothing appears in the popup except "undefined".
0 Kudos
derekswingley1
Frequent Contributor
Between IE's ambiguous errors, and not being able to see this directly, it's a tough one to debug.

I would try using the chart code from the sample you linked to initially in your app. Get that working, and work toward modifying it for your needs from there.

You could also check that all three of your content panes are working correctly by putting some simple text in them rather than a combination of markup and a chart.
0 Kudos
SteveCole
Frequent Contributor
Well, shoot. I moved my return statement up in the function to just before the chart creation code is and the popup displays and displays correctly (the various DIVs created are present). I'll have to study this example since it most closely matches my current chart creating code.

Thanks anyways,
Steve
0 Kudos
SteveCole
Frequent Contributor
Hey Derek (or anyone else for that matter)-

If I may ask a question about the ESRI sample that I linked in my last post in this thread-

I can't seem to understand why in ESRI's example, a call to chart.render() isn't required. In EVERY javascript code example I've looked over, the chart creation code ends with a call to chart.render(). In my current situation, if I don't include that line, my code runs without error but the chart doesn't appear. The ESRI example doesn't have it and yet the chart does appear.

Can you elaborate on that?

THANKS!
Steve
0 Kudos
derekswingley1
Frequent Contributor
The chart is being created by the JS API because the PopupTemplate.mediaInfos specifies a piechart. Internally, the JS API is creating the chart and calling chart.render.
0 Kudos
SteveCole
Frequent Contributor
Thanks Derek. Darnnit- looks like I got my samples confused. It's actually this sample that I can't understand (but maybe it's the same answer).

Sorry- and thanks! 😛
0 Kudos
derekswingley1
Frequent Contributor
That sample is set up to always show the details tab when clicking a feature. When you click the pie chart tab, this code runs:

dojo.connect(tc, 'selectChild', function (tabItem) {
  if (tabItem.title === "Pie Chart") {
    chart.resize(180, 180);
  }
});


chart.resize internally calls chart.render.
0 Kudos
SteveCole
Frequent Contributor
Gotcha. Thanks for the explanation.
0 Kudos