search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.86k stars 11.93k forks source link

Interactive Charts #2

Closed nuwanbando closed 11 years ago

nuwanbando commented 11 years ago

Hi,

Any plans on making them interactive. Right now, you don't have tooltips etc for mouse pointers yeah ?

Regards, /Nuwan

smaresca commented 11 years ago

From http://www.chartjs.org/docs/#generalIssues-chartInteractivity :

"If you are looking to add interaction as a layer to charts, Chart.js is not the library for you. A better option would be using SVG, as this will let you attach event listeners to any of the elements in the chart, as these are all DOM nodes."

On Mon, Mar 18, 2013 at 4:16 AM, Nuwan Bandara notifications@github.comwrote:

Hi,

Any plans on making them interactive. Right now, you don't have tooltips etc for mouse pointers yeah ?

Regards, /Nuwan

— Reply to this email directly or view it on GitHubhttps://github.com/nnnick/Chart.js/issues/2 .

patcito commented 11 years ago

It would be good though to have basic tooltips support like github does it on its network graph using canvas https://github.com/nnnick/Chart.js/network

nnnick commented 11 years ago

I haven't planned to add interactivity to charts at this stage. The chart is a single canvas DOM node, which is similar in characteristics to an image, but with a lighter footprint.

Canvas graphics sacrifice interactivity to raw speed. It's really up to you what is more important for your particular use case. There are a number of SVG based libraries for providing interactive graphs, including gRaphael, or other libraries built off d3.js.

dsotirescu commented 11 years ago

It is relatively easy to add interactivity: keep a list of chart elements(type, coordinates)+data associated with them, add one method getElementAtMouseCoordinates(x, y). For each type of chart element you need to be able to intersect the mouse coordinate with the element's geometry. Quite easy for bars, a bit more work for pie slices, etc.

This will not sacrifice speed at all.

dsotirescu commented 11 years ago

By the way, your charts look gorgeous!

How difficult is it to add new chart types, for example a heat/tree map?

liuxiachanghong commented 11 years ago

tooltip on mouseover would be great, don't know how implement this though. I like your chart and looking forward to it.