Display point values on mouseover in dojox.charting.Chart

Question

I have two questions regarding dojo charts.

1) How can I show point values in a dojo Chart on mouse over? Below is the chart I developed using YUI library. you can see when I mouseover a point it displays the series name and its value at the point. In this case it is Customs Duty and Fees [value: 30,546]. My question is how I can achieve this functionality in dojo charts?

2) Is there any way that the chart displayed on screen can be exported to an Image file (png or gif)? in Yui we can right click the chart and export it to png.

I am using the dojo version 1.8.3

You may look into the following code to see how I am creating a chart:

require(["dojo/ready", "dojox/charting/Chart2D","dojox/charting/themes/Claro"],                  function(ready, Chart,ClaroTheme) {
    ready(function() {
        var mychart = Chart("mychart");

        mychart.title = "My Chart";
        mychart.titleFont = "tahoma";
        mychart.addPlot("line_plot", {
            type: "Lines",
            lines: true,
            areas: false,
            markers: true
        });

        mychart.addPlot("column_plot", {
            type: "Columns",
            lines: true,
            areas: false,
            markers: true
        });

        mychart.addAxis("x", {
            vertical: false
        });

        mychart.addAxis("y", {
            vertical: true
        });

        mychart.addSeries("line_series", [1, 3, 5, 2, 6, 1, 0, 4, 6, 4, 1], {
            plot: "line_plot"
        });

        mychart.addSeries("column_series", [1, 3, 5, 2, 6, 1, 0, 4, 6, 4, 1], {
            plot: "column_plot"
        });
        mychart.setTheme(ClaroTheme);

        mychart.render();
    });
});

http://jsfiddle.net/5VYhN/

Answer 1

In addition to the Tooltip where you have to mouse over the exact marker on the line, you can also use the MouseIndicator, which is really nifty. You can see it in action here:

http://demos.dojotoolkit.org/demos/mobileCharting/demo.html

Implementation is very easy:

new MouseIndicator(this.twoDimensionChart, "default", {
    series: "Plot",
    mouseOver: true,
    fillFunc: function(v) {
        return "#BFD6EB"
    },
    labelFunc: lang.hitch(this, function(v) {
        this.currentMouseIndicatorValue = v;
        return v.y;
    })
});

Note that this code is in a custom widget of mine. I have mouseOver set to true, so you don't have to click and drag like in the dojo example in the link... if you just mouse over, you get the value. I added the line to the labelFunc to set an instance variable to the current value used for the label (basically just holds the x and y values). I then created an onclick event listener for my custom widget so I can do some custom processing and display a dialog with extra info anytime somebody clicks anywhere on the chart:

this.on("click", lang.hitch(this, function(evt){
    this.popupResultsDialogForItem(this.currentMouseIndicatorValue.x);
}));

Obviously that's optional, but it just gives you the flexibility to add onclick functionality and reference whatever value is currently selected on the chart.

Answer 2

There is no direct support to save a chart as an image. Any dojox.gfx surface (including a chart) can be saved in a JSON format, or an SVG format. Tools for that can be found in dojox/gfx/utils.js. If your surface is done using the Canvas renderer, then you can export it as a raster image (e.g., .png) using normal non-specific to Dojo ways. I didn't check, but a canvas object may support saving as an image, if a user right-click on it.

A small cheat-sheet below:

How to get a surface from a chart:

var chart = ...;
var surface = chart.surface;

How to get a canvas element from a surface:

var canvas = surface.rawNode;

How to create an image from a canvas:

var image = new Image();
image.src = canvas.toDataUrl("image/png");

How to convert a surface to JSON, which can be send to a server:

var jsonString = dojox.gfx.utils.toJson(surface);

How to convert a surface to SVG, which can be send to a server:

var def = dojox.gfx.utils.toSvg(surface); // returns dojo.Deferred
def.then(function(svgText){
  console.log(svgText);
});

Answer 3

You can customize you mouse over by using tooltip in your data. For example:

In require statment, add "dojox/charting/action2d/Tooltip" In your chart data add 'tooltip' with text to display on mouse over

JSON chart data:

var chartdata = [{x: 8,y:"0",tooltip:"What to show during mouse over"}];

JS code to use tooltip in your chart data:

// Create the tooltip which will show during mouse over
var tip = new Tooltip(chart,"default");

// Render the chart!
chart.render();

That is all you need...Not sure about your second question...

This is easy stuff, visit this charting example page: http://dojotoolkit.org/documentation/tutorials/1.8/charting/

Using your existing example, here is how you add mouse over:

require(["dojo/ready", "dojox/charting/Chart2D","dojox/charting/themes/Claro","dojox/charting/action2d/Tooltip",], function(ready, Chart,ClaroTheme,Tooltip) {
    ready(function() {
        var mychart = Chart("mychart");

        mychart.title = "My Chart";
        mychart.titleFont = "tahoma";
        mychart.addPlot("line_plot", {
            type: "Lines",
            lines: true,
            areas: false,
            markers: true
        });

        mychart.addPlot("column_plot", {
            type: "Columns",
            lines: true,
            areas: false,
            markers: true
        });

        mychart.addAxis("x", {
             vertical: false
        });

        mychart.addAxis("y", {
            vertical: true
        });

        var column_data = [{y:1,x:1,tooltip: "column 1"}, {y: 3,x:2,tooltip: "column 2"}, {y:5,x:3,tooltip: "column 3"}, {y:2,x:4,tooltip: "column 4"}, {y:6,x:5,tooltip: "columnt 5"}, {y:1,x:6,tooltip: "column 6"}, {y:0,x:7,tooltip: "column 7"}, {y:4,x:8,tooltip: "column 8"}, {y:6,x:9,tooltip: "column 9"}, {y:4,x:10,tooltip: "column 10"}, {y:1,x:11,tooltip: "column 11"}];

        var bar_data = [{y:1,x:1,tooltip: "bar 1"}, {y: 3,x:2,tooltip: "bar 2"}, {y:5,x:3,tooltip: "bar 3"}, {y:2,x:4,tooltip: "bar 4"}, {y:6,x:5,tooltip: "bar 5"}, {y:1,x:6,tooltip: "bar 6"}, {y:0,x:7,tooltip: "bar 7"}, {y:4,x:8,tooltip: "bar 8"}, {y:6,x:9,tooltip: "bar 9"}, {y:4,x:10,tooltip: "bar 10"}, {y:1,x:11,tooltip: "bar 11"}];

        mychart.addSeries("line_series", bar_data, {
            plot: "line_plot"
        });

        mychart.addSeries("column_series", column_data, {
            plot: "column_plot"
        });
        mychart.setTheme(ClaroTheme);

        var tip = new Tooltip(mychart,"line_plot");
        var tip1 = new Tooltip(mychart,"column_plot");

        mychart.render();
    });
});