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'> </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.
Regarding the y axis values, I also find out easy way to display them (0 to 9):
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.