Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

C3.js: D3-based reusable chart library

c3js.org

Post reply on HN
Print view View original

51–60 of 81 posts

Re: C3.js: D3-based reusable chart library

#51

Post by ylem »

AYBABTME wrote: post #9

The type of chart I've found most useful is heat map charts, and none of the charting library I've looked at provide that: Here's an example from a Datadog dashboard: https://cloud.githubusercontent.com/assets/1189716/4064956/6... I wish such a chart style was more common, it's so much more useful than a typical line chart of the median/p9x. Unfortunately, I'm not familiar enough with D3 and such to write my own; it…

For work, we had to fork jqplot to add features like heatmaps, zooming, etc.: https://github.com/scattering/jqplot.science

We also have the notion of "interactors" which allow you to add draggable widgets to a plot: http://ncnr.nist.gov/instruments/magik/calculators/calcR_wf....

To see the heatmap in action, you can look at: http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=...

There are of course glitches, but hopefully you find some of this useful!

Re: C3.js: D3-based reusable chart library

#53

Post by ylem »

deutronium wrote: post #24

I'm looking for a chart library that can plot real-time data, can anyone give any suggestions?

I guess it would depend on your throughput rate. We've been using a port of jqplot: https://github.com/scattering/jqplot.science

You can see it in action at: http://ncnr.nist.gov/ipeek/

We developed this to allow people to monitor experiments from the comfort of their hotel room. Our rates are relatively slow on most instruments (no faster than 1 pt/sec, where a pt may be effectively an image, or just a single datapoint).

Right now, we're not running, but it's fun to watch when it's updating.

Re: C3.js: D3-based reusable chart library

#54

Post by thorway-rick »

thom_nic wrote: post #49
capkutay wrote: post #17

Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3. I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work. D3.js is an excellent, low level visualization library. But you will find yourself spending days to a couple weeks with custom styling, tooltips, legends, etc. Many high level charting libraries are nice because th…

Does anyone know of a chart lib has the ability to make a "stacked" area chart where each series gets its own Y-axis, similar to cubism.js? I like how cubism visualizes streams of data where each needs its own Y-axis but they are related on the X axis (usually a time domain.) However cubism's mechanism of updating is sort of weird, and each value needs to be one pixel. I tried to use d3's "streams" example but quickl…

I think of those stacked charts as a stack of multiple charts that happen to share a timeline. With rickshaw I just stack a bunch of graphs on top of each other in the page, and give the bottom one an X axis.

Re: C3.js: D3-based reusable chart library

#55

Post by ejp »

capkutay wrote: post #17

Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3. I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work. D3.js is an excellent, low level visualization library. But you will find yourself spending days to a couple weeks with custom styling, tooltips, legends, etc. Many high level charting libraries are nice because th…

We made a similar decision - evaluated many, chose nvd3.js. It needed a new custom chart definition, but it has been responding well for our use case (enterprise monitoring software).

Re: C3.js: D3-based reusable chart library

#57

Post by trose »

Systemic33 wrote: post #32
capkutay wrote: post #17

Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3. I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work. D3.js is an excellent, low level visualization library. But you will find yourself spending days to a couple weeks with custom styling, tooltips, legends, etc. Many high level charting libraries are nice because th…

Does nvd3 have any documentation besides some basic examples? while c3 doesn't have a completely documented API atm, it atleast has a very extensive set of examples.

Check out c3 v0.3.0's source code. It's the closest thing to self documenting code I've seen so far. Any holes in the docs have been cleared up by grepping the source really quick.

Re: C3.js: D3-based reusable chart library

#58

Post by trose »

aw3c2 wrote: post #25

Careful, this has pretty much zero documentation and inconsistent options available for each chart type. I started a project with it and after a great start realised I had to scrap it all and start from scratch with some more complete alternative (haven't started looking yet).

It just got a lot better with v0.3.0. The code is much more organized and is basically documentation on its own. They also added the ability to call/modify/add internal functions externally so its much easier to build off of.

Re: C3.js: D3-based reusable chart library

#59

Post by saraid216 »

AYBABTME wrote: post #9

The type of chart I've found most useful is heat map charts, and none of the charting library I've looked at provide that: Here's an example from a Datadog dashboard: https://cloud.githubusercontent.com/assets/1189716/4064956/6... I wish such a chart style was more common, it's so much more useful than a typical line chart of the median/p9x. Unfortunately, I'm not familiar enough with D3 and such to write my own; it…

Eh. In D3, just transform the data into X/Y coordinates, create a DIV for each one, and then change the background color based on the desired value.

I think it's d3.scale.color to automatically set up a gradient you plug a value into and get a color out.

Re: C3.js: D3-based reusable chart library

#60

Post by chenster »

ylem wrote: post #51
AYBABTME wrote: post #9

The type of chart I've found most useful is heat map charts, and none of the charting library I've looked at provide that: Here's an example from a Datadog dashboard: https://cloud.githubusercontent.com/assets/1189716/4064956/6... I wish such a chart style was more common, it's so much more useful than a typical line chart of the median/p9x. Unfortunately, I'm not familiar enough with D3 and such to write my own; it…

For work, we had to fork jqplot to add features like heatmaps, zooming, etc.: https://github.com/scattering/jqplot.science We also have the notion of "interactors" which allow you to add draggable widgets to a plot: http://ncnr.nist.gov/instruments/magik/calculators/calcR_wf.... To see the heatmap in action, you can look at: http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=... There are of course glitches,…

phpChart (http://phpchart.org) is a higher level charting library for jqplot if you don't wan to spend days to learn custom styling and scripting.
Post reply on HN