Always show labels in legend for Dygraphs - javascript

I am plotting multiple series of time course data against each other, and many of the sets of data were captured at different times. The graphs looks like what is seen in the Independent Series example:
http://dygraphs.com/gallery/#g/independent-series
However, the users find it distracting that what is in the legend changes as you mouseover the graph. I would like it to consistently display A: (value) B: (value) instead of just the line that has a y-value associated with the x-value.
I haven't been able to find a way to do this in my searching, and was hoping someone had found a way to work around this.
Thanks!

It's not possible to do this with the built-in legend. You'll have to write your own using highlightCallback and unhighlightCallback.

Related

Is there a way to show all values corresponding to a value on x-axis in the tooltip of Google Charts linechart?

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.

Javascript bar chart, where bar is split into triangles

I am having kinda a hard time to find a solution for a special type of bar chart.
The graph:
https://i.stack.imgur.com/wIHWz.png
After a long time of searching the web, I wasn't able to find a good solution for this. I was using chart.js and the first thing I tried was to fill a bar with .svg, but sadly it is possible to fill it only with pattern. Another thing I thought may work was to design my own bar via two separate stacked line graphs, but there I wasn't successful becouse of the dependency on xAxis (to create a triangle I would need three labels, and the result was still total ****).
I would really appreciate if anybody would be helpful and suggest an idea how to go around this as I am absoulutely out of ideas.

Display thresholds on n3-chart

I'm using n3-chart/line-chart (https://github.com/n3-charts/line-chart) in my angular project.
I'm wondering if there is any way of displaying thresholds in the chart? Ideally this could be done by enabling the grid option, and set a color for the grid on certain y-axis values. However, I haven't found any information if that is possible or not.
The only work around I could think of is to create a "threshold series" that only has two measurements, one for the min x value and one for the max x value. The chart in this codepen example demonstrates this: http://codepen.io/ulrikl/pen/rOXNdd
So, my question is: Is this the only way of achieving thresholds?
n3-charts creator here, symbols are now supported so take a look at http://n3-charts.github.io/line-chart/#/docs, jump to the Symbols section and you'll be all set, hopefully !

multiple graphs for kendo UI

I am using multiple series for scatter graph in kendo(each series represent one attribute). Since every series has multiple ranges, hence I am required to NOT use multiple series instead draw each graph separately and show in the same window. Is there any option provided for the same?
Ex:
Please see the below URL:
http://demos.telerik.com/kendo-ui/scatter-charts/scatter-line
I have the same requirement as above, except the 3 graphs '0.8C', 1.8C' and '3.1C' have to be drawn as separate graphs(separate X and Y axis) but should be displayed in the same window? Is it possible? Any response will be highly appreciated.
Edit: I found one image(via google) to represent what I intend to say:

Show labels per serie in Highstock.js as in Highcharts.js

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/

Categories

Resources