0

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> 
3
  • It's just a wild guess, but i know that dojo datagrids need to set the style property width and height to be shown. Maybe it's the same Problem here?
    – MiBrock
    Commented Jul 9, 2014 at 7:20
  • @sunman Please specify the Dojo Version, Browser version(Mozilla, IE) you are working/testing for.
    – frank
    Commented Jul 9, 2014 at 9:13
  • @frank Dojo Version - 1.9 and Mozilla and IE browser is latest
    – sunman
    Commented Jul 10, 2014 at 8:49

1 Answer 1

1

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...

Not the answer you're looking for? Browse other questions tagged or ask your own question.