8 ms·
Epoch – A real-time charting library
- gingerlime 12y agoLooks nice. It's great to see more d3-based charting libraries. I'm personally using Rickshaw[0] to power the charting of Giraffe[1], a light weight front-end for Graphite. Sorry for the plug, but it's important to give some context. One obvious thing that felt like Epoch was missing was hover-over info. At least I couldn't spot it on the examples. [0]https://github.com/shutterstock/rickshaw https://github.com/shutterstock/rickshaw [1]https://github.com/kenhub/giraffe https://github.com/kenhub/giraffe
- jpkeisala 12y agoAre there more d3 based libraries than the ones you mentioned?
- stollercyrus 12y agoI've used http://nvd3.org/ http://nvd3.org/ in the past.
- polskibus 12y agotry dc.js http://dc-js.github.io/dc.js/ http://dc-js.github.io/dc.js/
- buremba 12y agothere is also c3.js http://c3js.org/ http://c3js.org/
- dkersten 12y agoI've had great success with http://dimplejs.org http://dimplejs.org Makes common things easy and gets the hell out of your way when you want to customise things with D3.
- paperwork 12y agoI'm a fan of dimple as well. I created custom tags for it[1] so you can draw charts in the following manner: <dimple-chart data="data" height="300" width="300" margin-bottom="15%" type="bar"> <dimple-axis position="y" type="measure" field="Awesomeness"></dimple-axis> <dimple-axis position="x" type="category" field="Word" orderBy="Word"></dimple-axis> <dimple-legend x="10" y="10" width="500" height="30" ></dimple-legend> </dimple-chart> I just started building this using Mozilla's x-tags. Mainly to clean up my own app, others are welcome to take a look. [1]https://github.com/falconair/dimple-chart https://github.com/falconair/dimple-chart
- NicoJuicy 12y agoI think Rickshaw is one of the best http://code.shutterstock.com/rickshaw/ http://code.shutterstock.com/rickshaw/ But there's also: http://tenxer.github.io/xcharts/ http://tenxer.github.io/xcharts/
- ninjaranter 12y agoContour http://forio.com/contour/ http://forio.com/contour/
- philbo 12y agoI recently started using Giraffe as a dashboard for RUM performance data in my job. Good job man, thanks.
- omgwow 12y agoHi, I'm Ryan, I wrote Epoch. Yes, I agree hover support would be nice. My take on the initial release was that I wanted to keep it super simple. So I decided that we should first build out the basic charts without any bells or whistles. To aid developers who need more than just the basics I also built out a small class hierarchy that allows you to override / modify the default chart behaviors. It's pretty clear that library needs better support for features like this moving forward. At the very least, there should be consistent and straightforward way to extend Epoch to help with these sorts of things. If anyone is interested in continuing the discussion I've opened up a new issue in the repository specifically targeting hover behaviors: https://github.com/fastly/epoch/issues/63 https://github.com/fastly/epoch/issues/63
- mellisarob 12y agoit seems good but more content is advisable.
- omgwow 12y agoContent as is "a more robust website" or content as in "more charts and features"?
- hackerews 12y agothis is great. i like the variety of graphs, especially heatmap. however, it'd be great to have hover effects and interactive legends with these time-series like in rickshaw and dygraphs.
- streametry 12y agoLack of hover effects caught my attention as well. Additionally for time series data range selectors come in handy. Dygraphs [1], NVD3 [2] and Highcharts all have them. [1] http://dygraphs.com/gallery/#g/range-selector http://dygraphs.com/gallery/#g/range-selector [2] http://nvd3.org/examples/lineWithFocus.html http://nvd3.org/examples/lineWithFocus.html
- cbsmith 12y agoOverlaying hover effects is really pretty easy though, no?
- whocanfly 12y agoThis looks great. How do I plot a timeline where values are sum of all values that lie within a time unit, say, 1 day/1 hour?
- clubhi 12y agoYou sum all the values within the hour. Seriously, you should do most data massaging before it enters a charting package.
- eddd 12y agoi don't see any example how to plot real-time chart using http api - therefore this 'real-time' is not that useful.
- nichodges 12y agoLoad the data into the js however you want, then use the update method on the chart. D3 is pretty quick rendering, so it's about as useful real-time as you're going to see in the browser.
- deleted 12y ago[deleted]
- eterm 12y agoIt looks really good, although one slightly confusing thing is that the static line graph appears to be smoothed but the real time one is unsmoothed and there isn't a configuration option listed to change that?
- farnulfo 12y agoWhy use a common name that have a different meaning ?
- odonnellryan 12y agoMarketing.
- nichodges 12y agoI've just finished up a project using NVD3, and at first glance this looks like a slightly simpler option. This is a good thing - NVD3 has become complex to the point where I would recommend someone to just learn D3 rather than use a reusable library. Epoch appears to be a good alternative for people who just want to quickly build charts for today's web. Great work.
- streametry 12y agoI think the authors of NVD3 have recognized the complexities as well and have planned a rewrite [1] this year. [1] http://nvd3.org/blog/2014/03/state-of-nvd3/ http://nvd3.org/blog/2014/03/state-of-nvd3/
- omgwow 12y agoThanks so much, that was one of the key design decisions. We needed something that gave us the expressive power of d3 for basic charts without going overboard.
- CptMauli 12y agoAgain, something which all of these projects ignore, no step chart and no way to have gaps for missing data.
- sdrothrock 12y agoI've run into this problem a lot but end up getting around it by finding "gaps" and putting in null data manually.
- CptMauli 12y agothat implies its possible at all to represent null in a meaningful way
- johnkiernander 12y agoNot all the libraries ignore step charts! http://dimplejs.org/examples_viewer.html?id=steps_horizontal http://dimplejs.org/examples_viewer.html?id=steps_horizontal
- thibaut_barrere 12y agoHighCharts [1] and HighStock [2] (which I use extensively on my SaaS app [3] - the home page shows a real screenshot) definitely allow gaps in the data. I can only warmly recommend both! (not affiliated with them in any way, they just do a great job). [1] http://www.highcharts.com/demo/spline-irregular-time http://www.highcharts.com/demo/spline-irregular-time [2] http://www.highcharts.com/products/highstock http://www.highcharts.com/products/highstock [3] https://www.wisecashhq.com/ https://www.wisecashhq.com/
- omgwow 12y agoStep charts are a good idea. Handling missing data in general is a bit tricky and I haven't full thought through the problem. The real-time charts are build with a timestamp component which, given a specific time granularity (second, minute, etc.), could be used to handle gaps. Basic charts might require an option to switch on/off such behavior. In case you're interested, I've opened up a new issue in the repository: https://github.com/fastly/epoch/issues/64 https://github.com/fastly/epoch/issues/64 Thanks for the great suggestion!
- Argorak 12y ago"Built for Developers" - well, I certainly hope so! Who else would a JavaScript library be built for?
- jgrahamc 12y agoDesigners? Upper Management?
- tonylemesmer 12y agoa dog.
- aswanson 12y agoMaybe just for the person who originated it and no one else.
- lalwanivikas 12y agoWould you recommend this over FusionCharts for personal projects? (BTW FusionCharts is free for personal use)
- e1g 12y agoI would recommend Highcharts[1] - a very wide range of great looking charts with minimal effort. Also free for personal/non-commercial use. Unlike D3-based charting libraries, it works on everything from IE8 to mobiles. [1] http://www.highcharts.com http://www.highcharts.com
- lalwanivikas 12y agoI'm experimenting with both right now and was impressed by both the number of charts available and the customer support of FusionCharts[1]. They also have a very exhaustive documentation but I guess I should try out HighCharts too. Any specific reason for choosing Highcharts over FusionCharts? Or any bad experience with FusionCharts in the past? http://www.fusioncharts.com http://www.fusioncharts.com
- e1g 12y agoFusionCharts used Highcharts for rendering for a while, so in a way FC was a superset of HC. The two projects have parted ways last year, and FC has done great work through Raphael since then. I consider FusionCharts to be more feature rich, especially with some edge cases, but we chose Highcharts for three reasons - 1. SaaS pricing and licensing of Highcharts was more suitable given the scale of our team/application. 2. None of the unique features from FusionCharts had any purpose for our app. 3. At the time, Highcharts had better design out of the box (although FC has nearly caught up in this regard). We have found Highcharts to small in size, quick in rendering, and flexible in structure to allow us add custom plugins, so we haven't looked back. At this point I see the two options as very comparable on nearly every dimension, but it's still worth experimenting with both to see which one fits your style and product better (skinning, performance, flexibility for your feature-set etc).
- Angostura 12y ago
- snorkel 12y agoVery smooth animation, but those colors ... ech ... I wish it had the color and style customization that Highcharts offers, for example gradient fills and opacity support ... or rather I wish Highcharts update animations were this smooth.
- omgwow 12y agoSo the real-time charts support CSS styling, though I don't think they'll handle gradients at this time. Why not open up an issue on github :) ?
- haberman 12y agoLooks really nice. Since I started using React, though, I've wanted to find a similarly nice charting library that is reactive instead -- that renders to a React component with SVG instead of mutating the DOM directly. This would help minimize the number of DOM updates when just a few data points change, and seems like it would fit better within a React app. (This approach unfortunately rules out D3, which mutates the DOM directly and doesn't have smart diffing AFAIK). Anyone know of a reactive charting library?
- BinaryBullet 12y agoThere's https://github.com/facebook/react-art https://github.com/facebook/react-art which I haven't used yet. One of the problems with react v0.10 is that it doesn't yet support all SVG attributes: http://facebook.github.io/react/docs/tags-and-attributes.html http://facebook.github.io/react/docs/tags-and-attributes.htm... For instance, the other day I was trying to make a responsive chart, but couldn't due to react not supporting the 'viewbox' attribute. I then tried npm installing from the repo directly, which didn't work b/c they have a custom npm build script that needs to be ran (and after some hacking, I was still running into weird errors w/ v0.11-alpha). Anyways, react seems like it will be very interesting for svg charting once they fully support all svg attributes.
- fletchowns 12y agoIsn't SVG part of the DOM though?
- nilkn 12y agoI've never used React, but I believe it maintains a virtual DOM and uses it to compute the minimal number of changes that need to be enacted on the browser's DOM. So basically, it's precisely because SVG is part of the DOM that it could potentially be a good application of React.
- haberman 12y agoExactly. The React paradigm is to never mutate the DOM directly, but instead let React mutate it. I wrote a friendly intro here: http://blog.reverberate.org/2014/02/react-demystified.html http://blog.reverberate.org/2014/02/react-demystified.html
- grogenaut 12y agoIt'd be great to know on that front page what language it is in. Without having to browse into the git repository or extract the zip distribution.
- driverdan 12y agoPretty obvious it's some form of JavaScript (CoffeeScript in this case) since it runs in the browser.
- snowwindwaves 12y agothe killer feature for me in a charting library is the ability to have multiple Y-axis scales. Say I want to have three time-series, so I am plotting efficiency in %, power in megawatts and flow in m3/s on the Y-axis and time on the x-axis, three Y-axis scales are required. Usually I end up with multiple charts or some SCADA program has made it so the Y-axis scale changes when you select a series if there is only 1 chart.
- alok-g 12y agoAre there any charting libraries that do 2D and 3D both? If not, are there separate 2D and 3D libraries with a consistent and modern look and feel?
- hendry 12y agoAnother time line graphing library without things like moving averages that I want. :/