I work with a lot of time series data that comes from various devices. In this post, I will just use an example of battery data because it's nice and simple. I can easily take the battery data and chart it over time in highcharts using the DateTime axis. I always have other event data that is important to know about because it gives you context to what you are looking at but doesn't need to be charted. As an example, Someone turned on or off a light. Knowing that gives you context why the battery usage has changed. Today I put those in as a plotline. The problem with a plot like is that you are very limited on interacting with it. You can have a label but when you have a lot of plot lines close together the labels are a complete mess. I also can't really do a nice tool tip that would give the user more information about what they need to know. An example is they see the plot band and they see it was a "light turned on" event and they do something and they can see that a light with x watts turned on pulling Y amount from that battery. What works well for a plot band is that when I zoom in they are respond to the change.
I am looking for a solution, a pattern, an approach to allowing the user to display their time series based data with some related events that are overlayed over it. This approach would allow the user to dig into it a little bit to get context and a better understanding of their time series data
I don't know if this is something that is solved with Highcharts or if it's just a general UX problem. I am definitely looking for some help. Hightcharts is here to stay in this project but I can't seem to solve this problem
This is a sample battery chart that I made for this post. these are grey plot lines for events that are happening a lot and are really close together. As you can see the user has no context oh what they mean. They do know something has happened and can go crawl the data to see what those plots might be. In the real world, they know that grey is a debug event and they can dig into it from there but this really isn't a solving the problem
You could:
1. use a separate scatter series to mark events with a specific point marker, which allows you to leverage the legend, data label, and
tooltip functionality automatically
2. use the plotLines / plotBands, and create custom mousein/out events to
mimic a tooltip
3. use the flags series type from Highstock
http://www.highcharts.com/stock/demo/flags-general
4. Use the Annotate plugin found in the Highcharts plugin repository
http://www.highcharts.com/plugin-registry
Related
I have phasor information (polar vector data pairs, each with magnitude and angle, representing voltage and current measurements) that I would like to display using Javascript. They should look something like the image linked below (my rep isn't high enough to directly post it) which I stole from Jesse's question about MatPlotLib. I would also like to easily change which phasors are displayed by a simple mechanic like clicking on the legend entry.
See a phasor diagram example here.
While I have inspected several code sets, I have yet to find a chart package that is built to handle polar vectors like this. Is my Google-fu lacking or do I need to create everything from scratch?
I feel like this is a cheap workaround, but here's what I ended up doing:
I used the polar chart from jqWidgets and with the series type set to "column" and the flip property switched to "true." I put the data in an array with 0 entries for each possible angle except for where I wanted the phasor displayed. Each phasor gets a dedicated series so the legend lists them all. It's not perfect and the array is much larger than it really should need to be, but it's passable.
While it's not surprising that no power system display package is publicly available for Javascript, I'm sure one has to be out there for educational sites if nothing else.
My apologies as I am new to this, but I have done a lot of searching and I can't seem to find an open source example of what I am looking for.
I want to visualize the flow of people through a system in the style of a flow chart.
However, I would like to be able to have the boxes of the flow chart, representing each stage, change size (including appearing and disappearing) depending on the number of people at that stage, at a certain time.
I have seen animated Sankey diagrams using d3 where the path size changes over time, but I am trying to mirror a static flow diagram we publish and this looks too different.
Does anyone know if this is possible and if so could anyone point me in the direction of a suitable example?
Technically it's quite possible. You have to collect the date through your system and transform those data compatible with Shankey so that Shankey can understand it. You have to refresh the data to Sankey after a certain period of time to reflect the latest update. I have a feeling that you also need to optimize this process for the performance shake.
Any ideas on where to even begin with making a violin chart using d3? Does it exist already?
I've looked around and have figured out how to do it using ggplot2 and was hoping there'd be a ready-made example that I could learn from but haven't found one yet.
I suppose I could do a really painful process of making various size bars on top of each other, or taking a distribution, rotating it and mirroring it. But surely there's a better way.
I needed that for myself so here it is: violin plot
As far as I know, nobody has done this before, but it shouldn't be too hard. I would start as if I was making a line chart (or boxed instead of lines) for one half of a violin. That is, create the appropriate x and y scales and add the data in. The result of this I would rotate and translate to the correct position. Then do the same thing again and mirror it as well to get the other half of the violin.
This may sound complex, but SVG has built-in support for these operations (rotating and mirroring). You should be able to approach this pretty much like drawing a line graph of the distribution with 2-3 simple operations on top of that. Wrap everything in a function and you've got something you can call to create a violin.
It of course also depends in what form you have the data to make the plot. A line plot might not be feasible because of too few data points, but then you can easily use bars instead.
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-