n3-charts / line-chart

Awesome charts for AngularJS.
http://n3-charts.github.io/line-chart/
MIT License
1.2k stars 180 forks source link

Individualized tooltips for each dot #164

Closed gtheilman closed 9 years ago

gtheilman commented 10 years ago

I'm setting up a tutorial for my students on how to predict drug concentrations.

Rather than having the x/y values appear in the tooltip, I want to be able to set arbitrary text for each dot, sort of like in this image:

3645186

What I'd like to do is pass the value of the tooltip along with the x and y values:

    $scope.data = [
        {x: new Date("October 13, 2014 06:00:00"), value: 0.5,  tipLabel: "CpInitial"},
        {x: new Date("October 13, 2014 06:30:00"), value: 8,     tipLabel: ""},
        {x: new Date("October 13, 2014 07:00:00"), value: 7,     tipLabel: "CPo"},
        {x: new Date("October 13, 2014 11:00:00"), value: 0.5,  tipLabel: "unknown"}

    ];

I would imagine that I would need to set up a function in the formatter to render the tooltip, but I can't figure out how to pass the "tipLabel" value into the formatter function.

Any thoughts as to how I could do this?

lorem--ipsum commented 10 years ago

That's currently not possible without looping over the data array externally (see http://plnkr.co/edit/qMWjJyvzX5ifTqooSaux?p=preview for a crappy hack).

The tooltipFormatter function should also receive either the original row or at least its index. I created an issue about that : #165

On a side note, I'd be glad to hear about how you use this lib for your students, or see the final result ! :-)

Thanks !

gtheilman commented 10 years ago

Thank you for your help.

On Fri, Nov 21, 2014 at 10:25 AM, Lorem Ipsum notifications@github.com wrote:

That's currently not possible without looping over the data array externally (see http://plnkr.co/edit/qMWjJyvzX5ifTqooSaux?p=preview for a crappy hack).

The tooltipFormatter function should also receive either the original row or at least its index. I created an issue about that : #165 https://github.com/n3-charts/line-chart/issues/165

Thanks !

— Reply to this email directly or view it on GitHub https://github.com/n3-charts/line-chart/issues/164#issuecomment-63994897 .

Gary D. Theilman, Pharm.D. Associate Professor of Pharmacy Practice University of Mississippi School of Pharmacy 2500 North State Street Jackson, MS 39216 601-984-2616