Customised markers/tooltips on a Dojo line chart

Question

I'm using Dojo 1.8 to create a Line chart which I am using to plot time series data. The data consists of samples taken every 5 minutes over a 24 period giving up to 288 (12x24) data points.

In order to have tooltips on the chart, I need to enable markers on the chart (dojo requires this). The problem is that by default, dojo creates one marker for each data point and this results in far too many markers. Ideally, I would show a single marker for the latest data point and maybe markers every hour or two.

It's possible to customise the appearance of a marker but so far I haven't been able to find any way of customising the frequency with which the markers appear. Any suggestions would be very welcome.

Answer 1

Try using the MarkersOnly module:

require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/MarkersOnly", "dojox/charting/Series", "dojo/ready"],
function(Chart, Default, Lines, MarkersOnly, Series, ready) {
  ready(function(){
    var chart = new Chart("simplechart");
        chart.addPlot("plot_lines", { type: Lines });
        chart.addPlot("plot_markers", { type: MarkersOnly });
        chart.addAxis("x");
        chart.addAxis("y", {vertical:true});
        chart.addSeries("series_lines", [4, 2, 6, 4, 5, 8, 8, 1, 7, 9]);
        // if you want your markers at data points 6 and 7;
        chart.addSeries("series_markers", [{x:3,y:6}, {x:9,y:7}], { plot: "plot_markers" , stroke: { color: "blue" } });
        chart.render();
  });
});

Answer 2

I was really having a tough time with the documentation and I just figured it out. Here is a jsFiddle with a working example. I used Andy W's solution and worked with what I could find on DojoToolkit.org for customizing the markers.

First you need to create a MarkersOnly plot as Andy explains, then you can customize the markers. You can find all the pieces on this documentation.

//found on http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html
//CIRCLE:           "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0",
//SQUARE:           "m-3,-3 l0,6 6,0 0,-6 z",
//DIAMOND:          "m0,-3 l3,3 -3,3 -3,-3 z",
//CROSS:            "m0,-3 l0,6 m-3,-3 l6,0",
//X:                "m-3,-3 l6,6 m0,-6 l-6,6",
//TRIANGLE:         "m-3,3 l3,-6 3,6 z",
//TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z"

var customTheme = new SimpleTheme({
     markers: {
                    DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z",
                    CROSS:   "m0,-3 l0,6 m-3,-3 l6,0"
                }
            });

var chart = new Chart("chartCustomMarkers",
     {
          title: "Custom Markers Chart",
          titlePos: "top",
          titleFont: "normal normal normal 15pt Arial",
     });
chart.addPlot("default", { type: MarkersOnly })
     .addAxis("x")
     .addAxis("y", { vertical: true })
     .addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7])
     .addSeries("Series 2", [2, 5, 4, 8, 5, 6, 6, 1])
     .setTheme(customTheme)
     .render();

One of my coworkers showed me how to customize the SVG path (create your own pattern). Just go here for more info.