I'm planning to use Highstocks.js after having used Highcharts in some other projects and I've noticed that the labels when moving the mouse over a series are not the same as in Highcharts.js making it more difficult to be read.
Instead of showing only the information of the selected series, it shows the information of all of them in the same label.
This might be a bit confusing when there's multiple series as you have to pay attention to the color to identify the series name.
It doesn't even highlight the series you are currently over or anything to simplify the viewing to the final user.
You can see what I'm talking about with this two examples:
Highcharts.js (How I would like it)
Highstocks.js (How it actually is)
I'm wondering if there's anything which can be done to emulate that behavior. I've been taking a look at the series options but I didn't find anything similar.
Thanks.
Sure you can, it is very easy, just add:
shared: false
for tooltip options object on chart initialization.
fiddle: http://jsfiddle.net/5RGaC/
Related
I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.
I'm trying to setup a graph that looks somewhat like this:
The graph consists of two data series, one for the stacked and another for the averages. Pay attention that is has two x-axis (multiaxis).
Looking at the ChartJS documentation, mixed graph types are possible, but not for stacked horizontal bars. Other articles seem to outline this as well, like this one on Alligator.io. I've yet to see any chart library to showcase such an example even.
Question is therefore if this is even possible, or if I should look into alternate approaches instead.
Currently it's not possible (only proof I could find right now).
The next version of chart.js will be 3.0 which has many major impovements, including changes to the horizontal bar chart, verbatim "Remove horizontalBar and make all charts capable of being horizontal". I think it will be possible with this version. But unfortunately not now.
Here is a fiddle that I have jsFiddle. In this fiddle, what I would like to to is to add a RangeSelector on the x axis of the graph. I want to be able to view 'Vulnerabilities per Version' that span 1yr, 3yr, 5yr, and 10yr. However, I am unsure of how to go about this. From the numerous fiddles I've seen on stack overflow and blogs, I'm wondering if this is possible. For example, the mockups I saw on other fiddles show that HighStocks is the way I would want to go. However, I think that's not exactly what I'm looking for.
Ideally what I would like is to have a graph that looks like the one found on the highstock web page Highstock range example but I don't want the range selector underneath the xaxis, nor do I want the labels to be of dates. I only want the functionality of sorting the info by the buttons on top. Does anyone know of a way I an try this? Help would be appreciated
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
I'm using jqPlot for some charting. I would like to highlight regions of the background of the chart. I would like to specify rectangles bounded by the values on an axis that are the entire length of the opposite axis.
Is this do-able out of the box, or must I alter the code? Would this be a good usage for a plugin? Is there documentation on how to write one?
Update: Looks like the fill option on the series might be helpful.
Update 2: Or maybe the GridCanvasRenderer or the ShapeRenderer.
I implemented it myself with about 20 lines of code in CanvasGridRenderer. Works pretty well.