views:

807

answers:

2

I have a web HTML page with some client-side JS codes based on dojox.charting. I don't have dojo library in my local web site (actually no web server). I use dojos' xDomain reference feature with src to google's hosting site like this:

<head>
...
<script type="text/javascript"
    djConfig1="isDebug:true"        
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js"&gt;
</script>
<script type="text/javascript"
  dojo.require("dojox.gfx");
    dojo.require("dojox.gfx.move");
    dojo.require("dojo.html");

    dojo.require("dojox.charting.Chart2D");
    dojo.require("dojox.charting.themes.PlotKit.green");

    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.themes.MiamiNice");

    dojo.require("dojox.charting.widget.Legend");
</script>
....
</head>

Here is the function to create curve chart, based on the codes in Dojo: Now With Drawing Tools.

function drawCurve(nodeChart, nodeLegend) {
  var chart1 = new dc.Chart2D(nodeChart)
    .setTheme(dc.themes.PlotKit.green)
    .addPlot("default", {
      type: "Default",
      lines: true,
      markers: true,
      tension: 2
    })
   .addAxis("x", {
      min: 0,
      max: 6,
      majorTick: { stroke: "black", length: 3 },
      minorTick: { stroke: "gray", length: 3 }
    })
    .addAxis("y", {
      vertical: true,
      min: 0,
      max: 10,
      fixLower: "major", 
      fixUpper: "major",
      majorTick: { stroke: "black", length: 3 },
      minorTick: { stroke: "gray", length: 3 }
    })
    .addSeries("Series A", [
      { x: 0.5, y: 5 },
      { x: 1.5, y: 1.5 },
      { x: 2, y: 9 },
      { x: 5, y: 0.3 }
    ])
   .addSeries("Series B", [
      { x: 0.3, y: 8 },
      { x: 4, y: 6, tooltip: "Custom tooltip"},
      { x: 5.5, y: 2 }
    ]);
  var series = chart1.series;

  var anim_a = new dc.action2d.Tooltip(chart1, "default");
  var anim_c = new dc.action2d.Magnify(chart1, "default"); // not working
  chart1.render();

  var legendChart = new dc.widget.Legend(
    {chart: chart1, horizontal: false}, nodeLegend.id);
}

My first question is that for the curve chart, the numbers along the y axis only displays 0 and 10. All the middle numbers 1 to 9 are not displayed. The values for x axis from 1 to 6 are visible. The original chart snapshot in the article does show y axis values as well, but the one on DojoToolKit Demos does show values along y axis. I am not sure what I missed in my codes. How can I enable displaying y axis values?

The next question is about the Magnify(). The DojoToolKit demo site's curve chart works fine but my chart's magnify feature does not work. I think this may be caused by xDomain reference. I may need to specify some specified js file from xDomain's dojox library. I am not sure which one I have to specify.

One thing I noticed is that my FireBug displays following errors after curve chart is drawn:

_4.fx.combine is not a function http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8
_11.action is undefined http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8

I think those undefined errors may indicate I miss loading some dojox library files in my head section.

By the way, I dont' have a web server and I prefer to use dojo's xDomain reference option. In this way, I can edit a html file in any place and send it to other people. No need to download and install dojo source library.

A: 

I think I got the missing part:

dojo.require("dojo.fx");

When I added this line to my HTML's head setction see above, the animation part set by Mangify() is working. This is only for the case you set xDomain reference to dojox for dojox.charting library.

What I found this is by using Firebug to look at DojoToolKit's Event 2D web page. In the head section there is code:

<script src="http://../action2/Magnify.js" type="text/javascript"></script>

That page has debug enabled. As a result, in FireBug window, you will see the source codes of js in a nice layout. I saw three requirements, and one is for "dojo.fx". I tried to add this one in. Then no more errors and I can see animation of magnify effect when I move mouse over points in the curve of the chart.

One thing interesting about <script src=".."> is that if the js is xDomain referenced, the js source codes are displayed partially in one long long time. If you hav the dojo library installed on your web page, ie same domain, the dojo's source codes are displayed nicely.

David.Chu.ca
A: 

Regarding the y axis values, I also find out easy way to display them (0 to 9):

.addAxis("y", {
  vertical: true,
  //min: 0
  //max: 10
....

You can also comment out min only and leave max with 10 (0, 1, ... to 10). See DojoCampus.org for more detail information about axis settings.

David.Chu.ca