Search code examples
javascriptdojodojox.charting

Dojocharts not appearing in Mozilla and IE


I am generating a lots of charts using dojocharts.Here one is major issues in dojo ,that is browser compatibility issues. But the charts not appearing in Mozilla and IE browser it only shows in chrome.Some dojo functionality also not works.In my charts i am adding dojo indicators.If i adding indicators then the charts not display and if i remove indicator then the charts shows.But i want the charts will show both indicators and X,Y axis. I am searching from Google,SO and also dojo forums but not found proper solution to fix my problems.So suggest me how can solve my problem for browser compatibility.

Here is my code

  <script type="text/javascript">

 dojo.require("dojox.charting.Chart");
 dojo.require("dojox.charting.axis2d.Default");
  dojo.require("dojox.charting.plot2d.Default");
  dojo.require("dojox.charting.plot2d.ClusteredColumns");
 dojo.require("dojox.charting.widget.SelectableLegend");
 dojo.require("dojox.charting.plot2d.Markers");
 dojo.require("dojox.charting.plot2d.Grid");
 dojo.require("dojox.charting.plot2d.Indicator");
 dojo.require("dojox.charting.action2d.Highlight");
 dojo.require("dojox.charting.action2d.Magnify");
 dojo.require("dojox.charting.action2d.MoveSlice");
 dojo.require("dojox.charting.action2d.Shake");
 dojo.require("dojox.charting.action2d.Tooltip");
 dojo.require("dojox.charting.plot2d.Indicator");
 dojo.require("dojox.charting.widget.Legend");

 dojo.require("dojo.colors");
 dojo.require("dojo.fx.easing");
 dojo.require("dojox.charting.themes.Mytheme");
 dojo.require("dojox.dtl");
 dojo.require("dojox.dtl.Context");

    var dc = dojox.charting;

    var dur = 450;

    makeObjects = function(){
  var chart6 = new dc.Chart("chart1");
  var myLabelFunc = function(text, value, precision){
  return text;

  };
  chart6.setTheme(dc.themes.Mytheme);
   chart6.addAxis("x" ,{
                    title:"Project",
                      titleGap:40, 
                      titleFont: "normal normal bold 14px Tahoma",
                      titleFontColor: "black",
                      titleOrientation: "away",
                      stroke:"#A2ADBC", 
                      //labelSizeChange: true,
                      natural: true,
                    //  rotation:-20,
                      majorTick: {color: "#A2ADBC", length: 10},
                      majorTicks:true,
                      majorTickStep:1,
                      dropLabels:false,
                      minorTicks:false,
                    fixLower : "minor",
                    fixUpper : "minor",
                //  dropLabels : true,
                    //min : 10,
                    //max : 20,
                    //from: 0,
                    to:   10.9,
                    labels: <?php echo  json_encode($this->masterChart,JSON_NUMERIC_CHECK); ?>,
                     font: "normal normal bold 11px Constantia",      
                      fontColor: "black"                             
                    // labelFunc: myLabelFunc
                }
    );
chart6.addAxis("y", {
                    title: "Area in SqFt",
                    titleFont: "normal normal bold 14px Tahoma",
                    titleGap: 20, 
                    titleFontColor: "black",
                    stroke:"#A2ADBC",
              font: "normal normal bold 9px Tahoma",
              fontColor: "black",
                    vertical : true,
                    fixLower : "minor",
                    fixUpper : "minor",

                //htmlLabels : true,
                    majorTick: {color: "#A2ADBC", length: 10},
         minorTicks:true,
          majorTicks:true,
         majorTickStep:44,
         minorTickstep:11,

       // minorTickstep:5,

                    min : <?php echo $this->masterChart_base_line_bed[0] ['area']; ?>,
                    //max : 20,
                    from:30,
                    //to:   250
         labelFunc: myLabelFunc
                }

      );
     chart6.addPlot("default", {type: "ClusteredColumns", gap: 8,
                    labels: true,
                //  minBarSize:5,
                    labelStyle:"outside",
                    fontColor:"black",
                     precision: 1,
                    animate : {
                        duration : 1000
                    }

         });
        chart6.addPlot("indicator", { type: "Indicator", 
                vertical:false,
                values: <?php echo $this->masterChart_base_line_bed[0]['area'];     ?>,
                    //offset: { y: -10, x: 11 },
                 lineStroke: {
          color: "#ecf0f1",//"#ecf0f1",
          style: "line" 
         },
                 labels: true,
                // labelStyle:"inside",
            //maxBarSize: 35,
                //fontColor:"white",
                  precision: 1
                   //animate: { duration: 1000} 
      });
     //chart6.addPlot("grid", {type: "Grid"});
    chart6.addSeries("Master Bedroom", <?php echo   json_encode($this->masterChart_master_room_area,JSON_NUMERIC_CHECK); ?>, 

   {stroke: {

   color: "#242324"

  }// fill: "red"
  });

    var anim6a = new dc.action2d.Highlight(chart6, "default", {
    highlight: "#FF7900",
    duration: dur,
    easing:   dojo.fx.easing.cubicIn
   });
   var anim6b = new dc.action2d.Shake(chart6, "default");


   chart6.render();

        };
    dojo.addOnLoad(makeObjects);
  </script> 

Solution

  • Try adding this to your HTML header:

    <META HTTP-EQUIV="X-UA-Compatible" content="IE=edge" />
    

    IE is a piece of junk..Given me nothing but trouble over the years...