I'm trying to create a custom chart based on the Highstock Basic Line Chart.
To be more exact I'd like to create a drawdown-chart (see drawdown chart on wikipedia). I don't want to discuss the formula :), but the way to change the data display in Highstock/Highcharts following a certain rule. It could be a more simple one: imagine you want to display f(x) = 100 for every data point although your data is completely different.
The following requirements shall be fulfilled:
I want to use as much functionality as possible from Highstock like scaling the chart axes, call redraw on "dragging" the time line, etc.
I want to use the Highstock patterns to extend its charts: wrapping or pushing event listeners and in doing so, ensuring my code stays readable and maintainable.
The best try was to wrap the processData function. In its body I manipulated xData and yData and called the super method as explained here: Extending Highcharts
The chart broke displaying certain time ranges. The original data seemed to be displayed there.
I can't get any further unaided. I would be really happy if someone could help me with that.
Thanks in advance!
Niels
1) You can catch redraw event and then call your actions.
Scalling axis by parameters:
http://api.highcharts.com/highstock#yAxis.height
http://api.highcharts.com/highstock#yAxis.top
Dynamically
http://api.highcharts.com/highcharts#Axis.update
Related
Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.
I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.
How can one make bokeh use zoom only on one axis and automatically scale objects, so they take exactly the space given and add some padding on extreme points off zoom-able axis parallels, while rendering empty space out of scope?
In other words (or "madskills" to be exact):
Example plot.
This is most widely used for stocks plotting, so consider I want to copy zoom behavior of https://www.tradingview.com/chart/?symbol=FX:XAUUSD with Bokeh.
Thank you in advance.
Zoom on X axis only by using 'xwheel_zoom' tool:
from bokeh.plotting import figure
fig = figure(tools='xwheel_zoom', active_scroll='xwheel_zoom')
Auto-scale the other (Y) axis by invoking a custom JavaScript event whenever the first axis changes. In this event, you scan through the visible data and amend the axis range. Like in the following gist example: https://gist.github.com/kernc/719918ada11298168efd956afc1a04a8
As of Bokeh 0.12.7 there is nothing built-in that will do this. Auto-ranging is always over the entire data set. There is no option to have auto ranging happen only over a subset of the data that is currently visible according to the extents of some other dimension.
It's possible to extend Bokeh, so it it conceivable that you could write a custom extension subclass of DataRange1d but it would not be a completely trivial matter:
http://docs.bokeh.org/en/latest/docs/user_guide/extensions.html
However, it seems like a reasonable feature request, so I'd encourage you to file a GitHub issue to discuss adding this capability directly to the core library:
https://github.com/bokeh/bokeh/issues
FWIW Bokeh now has ywheel_zoom along with a number of other options introduced: https://github.com/bokeh/bokeh/pull/4841/files#diff-b846337d25cde71b26a5158abd54a002de416da396954ec636ff006a6d80da81R222
I have a column chart made with Highcharts and I want to add lines associated with each column showing benchmarks. I know Highcharts has a concept of plot lines, where there is one benchmark value given for the whole chart, but in my case, each column needs it's own benchmark. Here is a super simple example of how I want this to look:
I have some ideas of how I could do this, but they all seem like kind of indirect solutions. I could implement the benchmark lines as another column series, and style them so that only the top of the column shows, or as a scatter series where the "points" are actually lines, but I don't know if either of those are possible and they sound like a complicated way to do something simple. Hopefully I'm just missing an obvious feature of Highcharts.
Does anyone know how to do this? Thanks.
I currently have a fairly basic composite line chart that looks like this:
I would like to add the following "dynamic" annotations to it:
By "dynamic" I mean that these totals and computed ratio need to be updated whenever the date filter is changed by the user, or there is a brush selection.
I am stuck on two aspects:
What is the recommended way to approach this? So far I have explored two paths:
Drawing SVG elements into the chart using a renderlet: I'm not able to access the crossfilter object to retrieve the data.
Create a custom D3 rendering outside of the chart: I'm not able to get the stats to update when the date selector is changed or the chart is 'brushed'. Also, this somehow reduces the flexibility of having the annotations within the chart itself (as far as I understand).
As an aside, can the ratio be computed directly in crossfilter? If so how?
The way you have this mocked up, I would recommend just setting these up as separate charts. Probably the best option is to use dc.numberDisplay.
Regarding computing ratios - yes, you can compute them in Crossfilter, but don't do that. Maintain both components of the ratio on a single Crossfilter group (using custom reducers, Reductio, or Universe) and do the division at reporting time. In dc.js, this means calculating the ratio in the valueAccessor of the chart.
I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.