7 ms·

New Chart.js beta version launched

152 points by nnnnnick 12y ago

deleted 12y ago
[deleted]
bnycum 12y ago
I like Chart.js, I can't tell if I'm looking at the beta from my phone though. I'd hope they add a scatter plot then it'd be close to perfect. There might be a fork I haven't found yet, but I know anything I made wouldn't look as nice.
- nnnnnick 12y ago
  New site is responsive for mobile, so you should be seeing the new version! This new release allows for custom chart types, using the same core API, so hopefully we'll see some community led new chart type extensions soon!
  - bnycum 12y ago
    Thanks! I'll see if I can give it a shot, I just went back after grabbing my laptop and noticed the section on writing new chart types. Maybe I can figure it out. I have a project in mind I could use this for.
bricss 12y ago
You've made my day! Thx!
dewey 12y ago
Interactive mode for tooltips. That's great news, very excited about that!
capkutay 12y ago
Would someone who's familiar with chart.js do a quick comparison between other popular charting libraries? I've mostly used rickshaw and d3.
- Throwaway0812 12y ago
  Don't forget Highcharts... http://www.highcharts.com http://www.highcharts.com
  - scrollaway 12y ago
    I really like the feel of HighCharts. I've been using HighStock (their financial charts) for traffic analytics graphs and it works really well.
  - cglee 12y ago
    Just from a cursory glance, it appears that Chartjs is entirely free and you can do what you want with it, while Highcharts is not.
    - hayksaakian 12y ago
      It would be nice if this distinction was stated unambiguously on the front page here's the license if you were looking for it like I was https://github.com/nnnick/Chart.js/blob/master/LICENSE.md https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
      - eterm 12y ago
        Took me ages to find the license, I ended up clicking documentation and still having to search for the word license to find it. I wish it was more prominent on the landing page.
    - skeletonjelly 12y ago
      Highcharts is free for non commercial
  - paul_f 12y ago
    Big fan of Highcharts. Like that you can export charts to a png. Big deal for me, don't think chart.js offers anything like that?
jbrooksuk 12y ago
Awesome! We've been waiting for this for some time - nice release Nick!
- nnnnnick 12y ago
  Cheers, sorry it took so long!
georgewfraser 12y ago
Why canvas instead of svg?
- nnnnnick 12y ago
  SVG is a good solution too, but it can really suffer performance-wise, especially on mobile, tablet and when animating svg node positions.
  - bicknergseng 12y ago
    Have you done any benchmarking of canvas vs svg charts?
    - nnnnnick 12y ago
      I did a while back for my university dissertation, I'll have to see if I can dig it out. IIRC: canvas tends to outperform svg when dealing with a lot of individual objects, due to them being individual dom nodes in svg. However svg will outperform canvas drawing fewer nodes, on a larger canvas, due to canvas being bitmap based.
  - petilon 12y ago
    Canvas is bitmap-based, while SVG is vector. If you need to print the chart SVG is going to look a lot better. Also, if you pinch-zoom the chart, SVG is going to look better. Canvas doesn't support animation -- you have to code it yourself. SVG performance is quite good unless you have thousands of elements, which a chart isn't going to have.
    - Kiro 12y ago
      > Canvas doesn't support animation -- you have to code it yourself. What do you mean?
      - coldtea 12y ago
        The obvious. That canvas is just a set of pixels with colors (a bitmap image). To get animation, you have to explicitly change them every X milliseconds. Whereas SVG has actual objects, that you can apply items like animateTransform, animateMotion etc to them directly, in a declarative style.
knes 12y ago
Looking foward to use the new beta through angles (https://github.com/lgsilver/angles https://github.com/lgsilver/angles) the Angular wrapper for chartjs.
maxmcd 12y ago
Homepage grid breaks at 1440px wide for me (Chrome/osx). Great update, love the tooltips.
hackerews 12y ago
Nick this is awesome. Would love to feature your work on blockspring.com so non-engineers can use chart.js graphs directly.
- nnnnnick 12y ago
  Sounds ace, let me know if there's anything I can do to help!
- loganu 12y ago
  Blockspring looks like a great resource. Free to use? Spits out code to paste into html? Nick, Charts looks awesome and might make its way into my next project.
eweise 12y ago
Can the data in the charts be updated in realtime? I'm looking for graphs to display operations type data like cpu usage, etc over time.
- Rodeva 12y ago
  Each one of the chart types has a prototype method .update() which will re-draw the chart with your updated values, so real-time updates are possible. [1] http://www.chartjs.org/docs/ http://www.chartjs.org/docs/
- kamicut 12y ago
  Check out Epoch: http://fastly.github.io/epoch/ http://fastly.github.io/epoch/
ak39 12y ago
Hi Nick, Is Chartjs related to Chartjs from DevExpress? Edit: Link http://js.devexpress.com/Documentation/Howto/Data_Visualization/Basics/Create_a_Widget?version=14_1 http://js.devexpress.com/Documentation/Howto/Data_Visualizat...
- LX-350 12y ago
  It is not. Currently using DevExpress at work. They've actually re-branded it as DevExtreme with their latest release (v14.1).
blhack 12y ago
It looks like this version includes a chart legend for pie/doughnut charts! Unless I am very mistaken, the old version, which I am using in my latest product, did not :(. Hooray chartjs people, I love your product :) -- it is definitely my favorite charting library :). BTW, does anybody know of a charting library that will make nice 1D scatter plots? (Like this: http://i.stack.imgur.com/LGBAG.png http://i.stack.imgur.com/LGBAG.png). These are very useful visualizations for event frequency, but I can't find any libraries that make them.
- dzderic 12y ago
  You should be able to recreate that 1D scatter plot using a regular scatter plot and setting all of the y values to 0 (unless I'm missing something).
- minikomi 12y ago
  Do you have any examples of how you'd like them to look in the browser? It shouldn't be hard to throw something together with d3 which simply takes an array. edit: quick example. http://jsfiddle.net/R532h/ http://jsfiddle.net/R532h/
piratebroadcast 12y ago
At work, we use Google Charts to chart data, then send images of those charts to users via email, inline. We are told that this functionality will be deprecated in the API some time next year. Anyone have an idea of how to mitigate that? Emails dont support javascript so not sure how to get around this. Just for some clarity, if you happen to use Sendgrid, they do the same thing. Google chart images in an email.
- maxmcd 12y ago
  Something that involves this possibly? http://www.paulhammond.org/webkit2png/ http://www.paulhammond.org/webkit2png/ Might be overkill, but would allow quite a bit of flexibility.
- ninjay 12y ago
  The general idea is to render the chart in a headless browser and grab a screenshot. http://phantomjs.org/screen-capture.html http://phantomjs.org/screen-capture.html
- ricree 12y ago
  If you're ok with hosting the images yourself, I'd recommend matplotlib (http://matplotlib.org/ http://matplotlib.org/ ) as a pretty good chart library.
- e1g 12y ago
  Google Charts are rendered through SVG, and fortunately you have two options to reliably convert any SVG to PNG. One options is "Batik Rasterizer"[1] - it is a single .jar file, fast, and accurately renders 99% of our cases. The other options is Wkhtmltopdf[2] - it comes with a companion wkhtmltoimage binary which convert SVG to PNG through a customised webkit engine. It also is fast, and can handle our most complex visualisations. All we do is grab the SVG source with JS, post it back to the server, and get the image back (after it is scaled/watermarked/optimised). This setup has worked well for us for some years now. Further we can easily interchange charting libraries with on concern about their native exporting options because we handle the rendering ourselves. [1] https://xmlgraphics.apache.org/batik/tools/rasterizer.html https://xmlgraphics.apache.org/batik/tools/rasterizer.html [2] http://wkhtmltopdf.org/ http://wkhtmltopdf.org/
SakiWatanabe 12y ago
Is there any free(for commercial use) candlestick charts available?
wingerlang 12y ago
Neat, I was looking over lots of different charting libraries the other day and this looks great. And it is free to use in commercial projects which, hopefully, will be relevant for me in the future!
- JelteF 12y ago
  Check out this one as well: https://morrisjs.github.io/morris.js/ https://morrisjs.github.io/morris.js/
andyhmltn 12y ago
I've used Chart.JS for quite a few big projects but I always found it lacking in some crucial features (hover/tap events & legends)
- lalwanivikas 12y ago
  andyhmltn, try FusionCharts or HighCharts instead. I have had good experience with FusionCharts till now and it also has the features(hover/tap events & legends) that you are looking for. Feel free to mail me if you get stuck somewhere. Can't say much about HighCharts as I am yet to experiment with all its features. But everyone here seems to love them, so you can find good support for it as well.
ergo14 12y ago
I've used rickshaw and nvd3 - chart.js seems pretty minimal compared to them.
- samdb 12y ago
  We tried NVD3 when we built http://www.chartblocks.com http://www.chartblocks.com as it would have saved us loads of time. It wasn't great though and had almost no flexibility.
  - cpeterso 12y ago
    If NVD3 didn't work out for you, what did charting library did you choose instead?
brok3nmachine 12y ago
I recently spent about 20 minutes setting up c3 (http://c3js.org/ http://c3js.org/) for a commercial product I'm developing. Great library, but its footprint is fairly hefty. Looking forward to giving this a try, if it is just as quick to implement.
fredsted 12y ago
Finally hover tooltips for bar graphs! A pretty important feature Chart.js was lacking before in my opinion.
Flip-per 12y ago
I just gave it a try. It's nice and easy to use, but I need to draw a legend which it surprisingly doesn't seem to support, so I won't use it. Otherwise it'd have been a good match for my simple purposes (non-scaled, non-animated, non-interactive). BTW, "options.pointDot = false" doesn't seem to have any effect. "options.pointDotRadius = 0" worked for me.
- ceejayoz 12y ago
  The "modular" section of the page appears to show a legend.
  - Flip-per 12y ago
    True, but for line charts the labels are just used for the tooltips, not for any legend. For the old charts.js version there is a legend-extension on github (https://github.com/bebraw/Chart.js.legend https://github.com/bebraw/Chart.js.legend) which I didn't try because I didn't think it'd be compatible with the current beta-release (I might be wrong).

152 points by nnnnnick 12y ago

deleted 12y ago

[deleted]

I like Chart.js, I can't tell if I'm looking at the beta from my phone though. I'd hope they add a scatter plot then it'd be close to perfect. There might be a fork I haven't found yet, but I know anything I made wouldn't look as nice.

nnnnnick 12y ago
New site is responsive for mobile, so you should be seeing the new version! This new release allows for custom chart types, using the same core API, so hopefully we'll see some community led new chart type extensions soon!
- bnycum 12y ago
  Thanks! I'll see if I can give it a shot, I just went back after grabbing my laptop and noticed the section on writing new chart types. Maybe I can figure it out. I have a project in mind I could use this for.

bricss 12y ago

You've made my day! Thx!

dewey 12y ago

Interactive mode for tooltips. That's great news, very excited about that!

capkutay 12y ago

Would someone who's familiar with chart.js do a quick comparison between other popular charting libraries? I've mostly used rickshaw and d3.

Throwaway0812 12y ago
Don't forget Highcharts... http://www.highcharts.com http://www.highcharts.com
- scrollaway 12y ago
  I really like the feel of HighCharts. I've been using HighStock (their financial charts) for traffic analytics graphs and it works really well.
- cglee 12y ago
  Just from a cursory glance, it appears that Chartjs is entirely free and you can do what you want with it, while Highcharts is not.
  - hayksaakian 12y ago
    It would be nice if this distinction was stated unambiguously on the front page here's the license if you were looking for it like I was https://github.com/nnnick/Chart.js/blob/master/LICENSE.md https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
    - eterm 12y ago
      Took me ages to find the license, I ended up clicking documentation and still having to search for the word license to find it. I wish it was more prominent on the landing page.
  - skeletonjelly 12y ago
    Highcharts is free for non commercial
- paul_f 12y ago
  Big fan of Highcharts. Like that you can export charts to a png. Big deal for me, don't think chart.js offers anything like that?

jbrooksuk 12y ago

Awesome! We've been waiting for this for some time - nice release Nick!

nnnnnick 12y ago
Cheers, sorry it took so long!

georgewfraser 12y ago

Why canvas instead of svg?

nnnnnick 12y ago
SVG is a good solution too, but it can really suffer performance-wise, especially on mobile, tablet and when animating svg node positions.
- bicknergseng 12y ago
  Have you done any benchmarking of canvas vs svg charts?
  - nnnnnick 12y ago
    I did a while back for my university dissertation, I'll have to see if I can dig it out. IIRC: canvas tends to outperform svg when dealing with a lot of individual objects, due to them being individual dom nodes in svg. However svg will outperform canvas drawing fewer nodes, on a larger canvas, due to canvas being bitmap based.
- petilon 12y ago
  Canvas is bitmap-based, while SVG is vector. If you need to print the chart SVG is going to look a lot better. Also, if you pinch-zoom the chart, SVG is going to look better. Canvas doesn't support animation -- you have to code it yourself. SVG performance is quite good unless you have thousands of elements, which a chart isn't going to have.
  - Kiro 12y ago
    > Canvas doesn't support animation -- you have to code it yourself. What do you mean?
    - coldtea 12y ago
      The obvious. That canvas is just a set of pixels with colors (a bitmap image). To get animation, you have to explicitly change them every X milliseconds. Whereas SVG has actual objects, that you can apply items like animateTransform, animateMotion etc to them directly, in a declarative style.

knes 12y ago

Looking foward to use the new beta through angles (https://github.com/lgsilver/angles https://github.com/lgsilver/angles) the Angular wrapper for chartjs.

maxmcd 12y ago

Homepage grid breaks at 1440px wide for me (Chrome/osx). Great update, love the tooltips.

hackerews 12y ago

Nick this is awesome. Would love to feature your work on blockspring.com so non-engineers can use chart.js graphs directly.

nnnnnick 12y ago
Sounds ace, let me know if there's anything I can do to help!
loganu 12y ago
Blockspring looks like a great resource. Free to use? Spits out code to paste into html? Nick, Charts looks awesome and might make its way into my next project.

eweise 12y ago

Can the data in the charts be updated in realtime? I'm looking for graphs to display operations type data like cpu usage, etc over time.

Rodeva 12y ago
Each one of the chart types has a prototype method .update() which will re-draw the chart with your updated values, so real-time updates are possible. [1] http://www.chartjs.org/docs/ http://www.chartjs.org/docs/
kamicut 12y ago
Check out Epoch: http://fastly.github.io/epoch/ http://fastly.github.io/epoch/

ak39 12y ago

Hi Nick, Is Chartjs related to Chartjs from DevExpress? Edit: Link http://js.devexpress.com/Documentation/Howto/Data_Visualization/Basics/Create_a_Widget?version=14_1 http://js.devexpress.com/Documentation/Howto/Data_Visualizat...

LX-350 12y ago
It is not. Currently using DevExpress at work. They've actually re-branded it as DevExtreme with their latest release (v14.1).

blhack 12y ago

It looks like this version includes a chart legend for pie/doughnut charts! Unless I am very mistaken, the old version, which I am using in my latest product, did not :(. Hooray chartjs people, I love your product :) -- it is definitely my favorite charting library :). BTW, does anybody know of a charting library that will make nice 1D scatter plots? (Like this: http://i.stack.imgur.com/LGBAG.png http://i.stack.imgur.com/LGBAG.png). These are very useful visualizations for event frequency, but I can't find any libraries that make them.

dzderic 12y ago
You should be able to recreate that 1D scatter plot using a regular scatter plot and setting all of the y values to 0 (unless I'm missing something).
minikomi 12y ago
Do you have any examples of how you'd like them to look in the browser? It shouldn't be hard to throw something together with d3 which simply takes an array. edit: quick example. http://jsfiddle.net/R532h/ http://jsfiddle.net/R532h/

piratebroadcast 12y ago

At work, we use Google Charts to chart data, then send images of those charts to users via email, inline. We are told that this functionality will be deprecated in the API some time next year. Anyone have an idea of how to mitigate that? Emails dont support javascript so not sure how to get around this. Just for some clarity, if you happen to use Sendgrid, they do the same thing. Google chart images in an email.

maxmcd 12y ago
Something that involves this possibly? http://www.paulhammond.org/webkit2png/ http://www.paulhammond.org/webkit2png/ Might be overkill, but would allow quite a bit of flexibility.
ninjay 12y ago
The general idea is to render the chart in a headless browser and grab a screenshot. http://phantomjs.org/screen-capture.html http://phantomjs.org/screen-capture.html
ricree 12y ago
If you're ok with hosting the images yourself, I'd recommend matplotlib (http://matplotlib.org/ http://matplotlib.org/ ) as a pretty good chart library.
e1g 12y ago
Google Charts are rendered through SVG, and fortunately you have two options to reliably convert any SVG to PNG. One options is "Batik Rasterizer"[1] - it is a single .jar file, fast, and accurately renders 99% of our cases. The other options is Wkhtmltopdf[2] - it comes with a companion wkhtmltoimage binary which convert SVG to PNG through a customised webkit engine. It also is fast, and can handle our most complex visualisations. All we do is grab the SVG source with JS, post it back to the server, and get the image back (after it is scaled/watermarked/optimised). This setup has worked well for us for some years now. Further we can easily interchange charting libraries with on concern about their native exporting options because we handle the rendering ourselves. [1] https://xmlgraphics.apache.org/batik/tools/rasterizer.html https://xmlgraphics.apache.org/batik/tools/rasterizer.html [2] http://wkhtmltopdf.org/ http://wkhtmltopdf.org/

SakiWatanabe 12y ago

Is there any free(for commercial use) candlestick charts available?

wingerlang 12y ago

Neat, I was looking over lots of different charting libraries the other day and this looks great. And it is free to use in commercial projects which, hopefully, will be relevant for me in the future!

JelteF 12y ago
Check out this one as well: https://morrisjs.github.io/morris.js/ https://morrisjs.github.io/morris.js/

andyhmltn 12y ago

I've used Chart.JS for quite a few big projects but I always found it lacking in some crucial features (hover/tap events & legends)

lalwanivikas 12y ago
andyhmltn, try FusionCharts or HighCharts instead. I have had good experience with FusionCharts till now and it also has the features(hover/tap events & legends) that you are looking for. Feel free to mail me if you get stuck somewhere. Can't say much about HighCharts as I am yet to experiment with all its features. But everyone here seems to love them, so you can find good support for it as well.

ergo14 12y ago

I've used rickshaw and nvd3 - chart.js seems pretty minimal compared to them.

samdb 12y ago
We tried NVD3 when we built http://www.chartblocks.com http://www.chartblocks.com as it would have saved us loads of time. It wasn't great though and had almost no flexibility.
- cpeterso 12y ago
  If NVD3 didn't work out for you, what did charting library did you choose instead?

brok3nmachine 12y ago

I recently spent about 20 minutes setting up c3 (http://c3js.org/ http://c3js.org/) for a commercial product I'm developing. Great library, but its footprint is fairly hefty. Looking forward to giving this a try, if it is just as quick to implement.

fredsted 12y ago

Finally hover tooltips for bar graphs! A pretty important feature Chart.js was lacking before in my opinion.

Flip-per 12y ago

I just gave it a try. It's nice and easy to use, but I need to draw a legend which it surprisingly doesn't seem to support, so I won't use it. Otherwise it'd have been a good match for my simple purposes (non-scaled, non-animated, non-interactive). BTW, "options.pointDot = false" doesn't seem to have any effect. "options.pointDotRadius = 0" worked for me.

ceejayoz 12y ago
The "modular" section of the page appears to show a legend.
- Flip-per 12y ago
  True, but for line charts the labels are just used for the tooltips, not for any legend. For the old charts.js version there is a legend-extension on github (https://github.com/bebraw/Chart.js.legend https://github.com/bebraw/Chart.js.legend) which I didn't try because I didn't think it'd be compatible with the current beta-release (I might be wrong).