CODEWITHSUNDEEP
javascriptd3.jstooltipdata-visualizationdimple.js
Jake Zieve
Jake Zieve

Reputation: 455

Override D3 Dimple tooltips with chart data

I realize this may be my misunderstanding of series with Dimple, but I can't figure out how to use getTooltipText() to override the tooltip with values from the original data (i.e. the chart) rather than just the axis (i.e. x,y,z).

Say I have data like this:

var data = [{"project_id":"1114","project_status":"Active","request_date":"2014-05-31","project_type":"CRISPR","cost":"0","due_date":"2014-08-14","service_durations_days":"75","days_overdue":"1","active_services":""},...]

And the chart/axes/series are initialized like so:

 var chart = new dimple.chart(svg, data);
 chart.addTimeAxis("x", "request_date","%Y-%m-%d","%Y-%m-%d");
 chart.addCategoryAxis("y", "project_type");
 var z = chart.addMeasureAxis("z", "cost");
 var s = chart.addSeries("project_status", dimple.plot.bubble);

Can I call anything from within here:

s.getTooltipText = function(e){
  console.log(e);
  return ["test"];
}

that would return the project_id, service_durations_days, days_overdue or active_services for display?

Upvotes: 3

Views: 1896

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

You can include them in your series definition and they become accessible. The reason they aren't immediately accessible is that Dimple aggregates the data to the level required for drawing the chart, so if it doesn't require a field it ignores it. You can include the extra fields in the first parameter of the addSeries method:

chart.addSeries([
    "project_id",
    "service_durations_days",
    "days_overdue",
    "active_services",
    "project_status"
], dimple.plot.bubble);

Here is a fiddle modified from Greg Ross's to show this alternate approach: http://jsfiddle.net/6n5r6vyb/3/

Upvotes: 3

Related Questions