Please refer to this example
Real Time HighChart
I have a similar approach but I am not able to shift the time scale.
can someone please let me know which statement or setting is causing the trend to shift by time.
I am just adding the data but the scale doesn't shift automatically.
You should have set shift as true in the addPoint function
http://api.highcharts.com/highcharts#Series.addPoint()
Related
the timeseries has add method as add(date,double) . How to interchange it to add(double,date) ?
I don't think its possible the way you think but you can use if you stick to your plan to keep time on y-axis
mRenderer.addYTextLabel(10, "28/10/2014");
mRenderer.addYTextLabel(20, "29/10/2014");
mRenderer.addYTextLabel(30, "30/10/2014");
here you will set a string as time at specific points on y.
The problem is that, if I try to change the lowest point to somewhere higher, the entire chart will be lowered severely.
How do I adjust each point with no above mentioned issue?
P.S. I use Highchart's Highstock.
It would be helpful if you could show a JsFiddle with the actual working code. Without knowing what exactly is going on with your chart it's difficult to figure out what the issue is and how to fix it.
Have a look at the yAxis - Highstock API Reference, you could potentially make use of min or max to counteract the scaling. Again though, without seeing your code it's tough to know.
If I understand your problem, you are trying to set the 7th point from currently at ~150 to something really high, say 5000? I did not notice any real change in the position of other points if the new value was under 1500 (or something around twice the first point)
Appears that your chart is set to comparison mode, hence, I believe, the default max and min are (100% & -100%) by default, this is w.r.t. to first point of the series. Highcharts would auto adjust these extremes if any of the points were to lie outside this range, you could force an override using yAxis.min & max.
For instance, you can set yAxis.min to -100 and yAxis.max to 100 like this
yAxis: {
min:-100,
max:100
}
Play around with the min and max to get to the values that suits your data the most, do remember these are % comparison to the first point. Any points outside these ranges would not show in the chart.
#jsFiddle
I want to shift a chart in another way than addPoint does. You can see what I mean in my JSFIDDLE: http://jsfiddle.net/Charissima/TEEdw/3/
When the chart has filled the container and the next point is added, it shifts to the left without losing the first point.
It works fine, but sometimes I can see the chart swapping a little bit. And even worth: when running over a longer time the chart gets lost. It still works, you can see it shifting and updating y in the upper right corner, but the chart is not visible any more. Even the navigator is empty.
So my question is: Is there a better and smarter way to shift the chart this way?
data.push([ xTime, prevY ]);
data.push([ xTime, y ]);
series.setData(data, true);
var faktor = ( (chart.xAxis[0].max - chart.xAxis[0].min) / 60 / 1000 ) * 200;
chart.xAxis[0].setExtremes( chart.xAxis[0].min + faktor, chart.xAxis[0].max + faktor);
I've been working on a chart with very similar attributes and have run into similar problems. One of the undesired effects of the addPoint() shift flag is that it tries to keep the data set the same size it was initialized with. I'm guessing that is your reason for not using it. It doesn't allow you to grow your data set to a certain size and then start shifting. I had this issue with the shift so I resorted to doing exactly what you are doing. I think this is the generally accepted alternative to addPoint().
But... couple that with the idea that Highchart (or maybe just Highstock) appears to have a max number of data points it will handle. I don't know if it is the same for all charts (or even for all users/browsers) but for me yours seems to disappear when the data count is 1000. See this fiddle: > jsfiddle.net/TEEdw/4/ you can watch the data length grow to 1000 and then the chart disappears. I was running into the same issue on my chart. My solution was more complicated due to other factors in my chart. But a simple solution is to monitor the data count and when it approaches 1000, switch to the addPoint() with shift method. See this fiddle: > jsfiddle.net/TEEdw/5/ There is probably other ways to allow the data set to grow and then shift at a certain point. But this one just used your existing code. You could probably dynamically set the shift flag based on data length and only set it true once the data reaches a certain length.
EDIT: Ok... there is also a plotOptions setting called turboThreshold (http://api.highcharts.com/highcharts#plotOptions.series.turboThreshold) that can be disabled. It defaults to 1000 (so that makes sense). Setting it to zero allowed your chart to keep going after 1000. See this fiddle: jsfiddle.net/TEEdw/6/
In a candlestick graph i am building, the latest bar is cut-off partially such that even the bar is not visible. Thus it's difficult to judge the high and low by seeing the bar.
I'm unable to post a pic now but it's like the last rectangle being cut in half.
I'm tried a lot of options in the api but can't figure out why this is not showing correctly. The chart margin and axis offset options havent' helped. Is there a way i can set the series margin from the plot area so that it displays right.
For this problem, the best solution is to insert a dummy series which should be hidden from every aspect of the chart. So try this, insert a dummy series from the last point of the data series to some extra buffer(as per need). Then remove this series from the chart by explicitly removing it from the legends (using showinlegend),chart(setting linewidth to 0) and from tooltip by having a check in formatter. Hope this solves your problem.
I had the same problem and couldn't figure it out, because no matter how I changed the xAxis.maxPadding or changed the xAxis.max, it would always cut off the last candlestick when I clicked on the range selector.
To solve it, (hack) I just added an extra data point in my series and set it 1 day past the last day and set all values to null.
Without any code or a pic, it's hard to tell the problem, but it sounds like you need to use the max padding option. http://api.highcharts.com/highcharts#xAxis.maxPadding. You may also want to look at endOnTick as well as whether you are setting max on the axis.
I am using the TeeChart VCL Delphi module. I am trying to plot a candlestick chart. I have the following questions:
When I run the code it shows me the last date data on the right hand side. However, the y-axis is not automatically scaling at all. If I scroll backwards, it automatically adjust the y-axis scales. However, if I go far to the right which is the end, it does not auto-scale the y-axis anymore. What am I doing wrong?
The x-axis is the days of the week. However, I have no data for the weekend. It shows as empty space. How do I remove that?
How do you change the cursor so it shows the date/time for the X,Y you choose?
When I run the code it shows me the last date data on the right hand
side. However, the y-axis is not automatically scaling at all. If I
scroll backwards, it automatically adjust the y-axis scales. However,
if I go far to the right which is the end, it does not auto-scale the
y-axis anymore. What am I doing wrong?
What about setting the Y axis (left axis) to be automatic? For example:
Chart1.Axes.Left.Automatic:=True;
A more drastic solution would be also forcing the chart to repaint after adding each point.
Series1.Add(value);
Chart1.Draw;
If any of that helps please send us a simple example project we can run "as-is" to reproduce the problem here. You can attach your files here.
The x-axis is the days of the week. However, I have no data for the
weekend. It shows as empty space. How do I remove that?
You should do as in the All Features\Welcome!\Chart Styles\Financial\Candle (OHLC)\Axis Labels no Weekends example in the new features demo. This demo is included with registered and evaluation versions. Otherwise you can download it here.
How do you change the cursor so it shows the date/time for the X,Y you
choose?
There are two examples in the demo that can help you on this:
All Features\Welcome!\Tools\Annotation\Annotation Callout
All Features\Welcome!\Tools\Cursor\Synchronizing Two