dimple.js - scatter-plot, series listed twice in tooltip

Question

For full example see: http://jsfiddle.net/qQ5WN/2/

var data = [
        { "Date": "16/08/1906", "Magnitude": 8.2 },
        ... etc ...
];

var chart = new dimple.chart(svg, data);
var x = chart.addTimeAxis("x", "Date", "%d/%m/%Y","%Y");
var y = chart.addMeasureAxis("y", "Magnitude");
var s = chart.addSeries(['Date','Magnitude'], dimple.plot.bubble);

x.timePeriod    = d3.time.years;
x.timeInterval  = 10;

y.tickFormat = ',.1f';

chart.draw();

x.tickFormat = "%a %e %b %Y";

This example is a small set of earthquake data - Dates (a time axis) and Magnitude (measure).

The requirements are:

• standard scatter-plot behaviour - if two earthquakes happen on the same day, plot them separately rather than being added together into a single larger event – hence combining both series in addSeries() disaggregation parameter
• The input date format is %d/%m/%Y, but it should be displayed on the tooltip as '%a %e %b %Y' (Sun 22 May 1960) but only as 1960 (%Y) in the x-axis ticks.

However, as soon as I enable disaggregation – problem goes away with addSeries(null,…) - the date is shown twice in the tooltip when you hover over a data point, once in the input JSON style and once in the output. (If you get rid of the final .tickformat statement it's still there twice, but as %Y.

Can I prevent this?

Thanks.

Answer 1

The issue here is that each axis and the series provide the data points to the tooltip, which then eliminates any duplicates. Because there are 2 different date formats it is mistakenly treating them as different values and showing both. The only way I can think to avoid it is to pre-format your date:

var parser =  d3.time.format("%d/%m/%Y"),
    formatter = d3.time.format("%a %e %b %Y");

data.forEach(function (d) {
    d["Date"] = formatter(parser.parse(d["Date"]));
}, this);

You then need to use this new format when setting your time axis:

var x = chart.addTimeAxis("x", "Date", "%a %e %b %Y","%Y");

You still need to have this line:

x.tickFormat = "%a %e %b %Y";

This is because the x axis will still default to providing the date format as %Y. It's a bit of a pain but I think this is a bit of an unusual case. Here's an update of your fiddle:

http://jsfiddle.net/qQ5WN/3/

I hope that helps

John