Wavemaker using MouseZoomAndPan - charts

Question

In wavemaker a got an app that display charts with dojo charting, some charts have a lot
data so the chart is compressed so i look around and found that we could add zooming and panning, found an example on the web link:http://informatik.fh-brandenburg.de/~porebskk/dojo.html
i look at the source code and it looks like i only had to add this to my code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and then call it before rendering the chart
new dojox.charting.action2d.MouseZoomAndPan(chart, "default");
My problem is when i had this to my source code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and run the app i get "page Main as error" and my application does not work anymore
if i do this then my application comesback to life
//dojo.require("dojox.charting.action2d.MouseZoomAndPan");
i create a new application and i only had this on top of the main page and get
the error again
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
in the wavemaker debugger i get "error parsing pages/Main/Main.js"

Answer 1

I am using AMD style but this may help you. I was able to find the missing piece with your link.
Dojo toolkit had some slightly incorrect code here (MouseZoomAndPan section), but it will give you the code I have below and is why I have commented out code after MouseZoomAndPan(...);
define(["dojox/charting/themes/Claro", "dojox/charting/Chart", "dojox/charting/axis2d/Default"
, "dojox/charting/plot2d/Lines", "dojox/charting/action2d/MouseZoomAndPan"],
function (claro, Chart, Default, Lines, MouseZoomAndPan) {
return {
createZoomableChart: function () {
"use strict";
var chart = new Chart("mouseZoom");
chart.addAxis("x", { type: Default, enableCache: true })
.addAxis("y", { vertical: true })
.addPlot("default", { type: Lines, enableCache: true })
.addSeries("Series A", [1, 2, 2, 3, 4, 8, 6, 7, 5]);
var mzap = new MouseZoomAndPan(chart, "default");//, { axis: "x", "none" });
chart.render();
},
init: function() {
this.createZoomableChart();
}
};
});