I am using the Highstock library (not Highcharts) and I'm running into an issue I'm sure can be solved.
I need to add some dynamic information to each point on a series. Highstock has a built in tooltip that displays limited information about a point onHover.
I have tried adding a new property to the point at the time of creation; however, this new property is not available in the tooltip.
What's interesting is this exact functionality is available in the Highcharts library, but I would like to stick with Highstock if at all possible.
Here is a fiddle showing the desired result in Highcharts.
I have started looking around inside the Highstock javascript file looking for a way to expand the properties of the points that actually get added to the series and I have had some limited success.
I have added the property to the block beginning on line 8319 and again on ll320. This does seem to work, but only when the chart is zoomed in... very odd.
Has anyone tried this before, or have some insight on what I may be overlooking?
You can simply add own custom properties, then in tooltip you have access to them via:
this.points[x].point.options.your_property;
See: http://jsfiddle.net/dWDE6/199/
There is only one limitations which you should be aware of: when dataGrouping is affected all points are created as new one, so you don't have access to that custom properties.
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 find a way to dynamically scale a chart's y-axis so the values are shown in single digits, with a exponential denotation at the top, effectively changing this:
To this:
Note, this works automatically in e.g. Matlab/Matplotlib/etc., but I'm struggling to find a solution with the web plotting frameworks (maybe my search language is wrong)... I know D3.js is not a charting library, but I'd be open to a solution that works with the frontend DC.js or the backend D3.js
Edit based on #Gordon's answer below, I get the following graph using this
chart.yAxis().tickFormat(d3.format('.1e'));
Is it somehow possible to move all of the e+6 to the top? Or do I need to write a custom scaling function and insert a separate text box myself?
In dc.js, the axes are straight from d3-axis.
Access them using chart.xAxis() and chart.yAxis(), and to reduce confusion, do this in a separate statement from the rest of your chart initialization.
You can use axis.tickFormat to control how the tick text is formatted.
You can use d3.format to do automatic formatting. It seems like exponent or SI notation might suit what you're doing, although it's not exactly the same as having the exponent in a separate text element like in your screenshot.
Putting it together, this is pretty close
chart.yAxis().tickFormat(d3.format('.1e'))
The tick formatting question comes up a lot. I wonder where we could put this information so that people don't have to ask.
I'm using angular nv-d3 and while making a chart, I'd like to have a specific point on the graph be highlighted.
My graph looks like:
I'm getting the data by consuming a rest response, my graphs will have 1 to 3 lines, and the each line is guaranteed to have the date point that I will be highlighting.
I could also live with just having a straight vertical line through that date, I just want a way to differentiate that specific date in the rest of the chart.
Couldn't find anything in the docs about this, and most of the methods I've found to do this use d3.select and jQuery, but I'm not sure if that will work with angular.
There are many questions out there relating to issues with chart.js re-sizing charts if the same canvas is reused (on some devices). Most of the answers refer to the fact that you need to "destroy" the chart before reusing.
pie = new Chart(pieContext).Pie(data);
and then next time, before doing the above call
pie.destroy();
And in hindsight, this appears to work. However, I had already moved onto using ChartNew.js (https://github.com/FVANCOP/ChartNew.js/) as it seems to have some enhanced functionality above (and was based on) chart.js.
NewChart.js experiences the same 're-sizing' issue, but does NOT seem to provide a destroy() method on the chart object.
How do I fix the re-sizing issue? Is there a destroy() equivalent on ChartNew.js?
Or.. Is there an alternative free library that will allow me to display Pie charts, with the data values written inside the segments and a legend down the right-hand side?
I've read a couple of posts to the developer or ChartNew.js and it seems like functions like destroy() or clean() are missing from the original Chart.js
Now, I'm not familiar with the library but maybe this thread lights up one of your lightbulbs.
Sorry if not very useful :)
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/