evtguy

Dojo Charts not appearing under IE8

Discussion created by evtguy on Oct 11, 2012
Latest reply on Oct 15, 2012 by evtguy
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.

Attachments

Outcomes