I want to use the Highcharts StockChart library to make a chart. Here's more info on the chart I need to create:
The type of the chart is datetime
The data is being updated on every minute (it's data from stocks), so the chart is being constantly updated.
The data of the chart is from 9:00am to 11:40am and then from 12:35pm to 3:00pm (there's a lunch break).
The data is being shown with bars in an interval of 5 minutes (data is received for every 5 minutes except for the lunch break).
The bars will start to be drawn from left to right as the data is received.
The bars width needs to be the same size regardless of how many data is being shown on the chart.
The labels of x axis of the chart need to be always the same and on the same position (from 9:00am to 3:00pm every hour) even when there's missing data (a line must be drawn on the x axis).
So, I'm using the max property set to that day at 3:00pm on the x axis of the chart. With this, I can:
Have the bars width to be the same
Have the x axis be drawn regardless of the missing data on the same interval (until 3pm).
Everything works ok until the lunch break (11:40am). However, when receiving data for 12:35pm (after lunch break), the chart will ignore the max property and the last line of the x axis that is drawn is until 1pm (this line needs to be drawn until 3pm). I assume that this is because until 11:40am all the data for 5 minutes is present, so the chart understands the interval on which the data needs to be drawn and also can draw the x axis lines on the same interval. But as soon as there's a gap on the data, the chart doesn't know anymore if data will keep coming in an interval of 5 minutes, so will just take into consideration all the data that has received until now, ignoring the max property.
I have tried different options in order to solve the issue:
I used ordinal property set to false. With this, I can solve the issue of the missing x axis labels until 3pm, but the issue is that the lunch break will have a gap on the chart. I need to merge the lunch break and having the x axis labels drawn until 3pm.
I tried to use the tickInterval property and was able to set the interval of the x axis but only for the data that is being drawn. However, the x axis label it still until 1pm and needs to be until 3pm.
I tried to use the breaks property for the lunch break while using the ordinal property set to false but didn't work. Also, the chart needs to be merged on the lunch break; using this property will create a gap on purpose, so this property won't help me to fix this issue.
So, I noticed that the interval is being changed correctly where there's data, but the lines are not being drawn where there's no data on the x axis (only until 1pm and not until 3pm). And if I use the ordinal property, it will show all the x axis lines for the missing data, but need to hide the gap for the lunch break.
Any help with this is appreciated =)
UPDATE:
I noticed that when there's still no data, if using v1.3.1 of highcharts (the one I'm currently using), the x axis lines are being drawn correctly until 3pm, but if using the latest version this doesn't happen. It seems that the max property is being ignored for the latest version.
Including the links of jsfiddle for my code on the comments (since stackoverflow doesn't allow me to post many links because don't have enough reputation).
I was able to achieve what I wanted. In the end what I did was to create null data to fill this gap for the lunch break. Also, I created null data for the remaining data until 3pm, that way the x axis lines were drawn properly: https://jsfiddle.net/K4Cj6/201/:
[1504528800000,null,null,null,null]
Thanks anyway guys =)
Related
I'm using the ios-charts library and I have a LineChart View that has x values that are dates from every weekday of this year. On the y-axis I have values between 0 and 25.
I would like to zoom in on different intervals on the LineChart View.
For example only show Data for week X one time and later change to show data for three months, etc etc.
I did not find anything in the documentation on how to do this. I used the "zoom" function with out any success.
(Example : Zoom and show the last 20 days on the x axis or zoom and show the last three months)
Has someone does this before?
It's a tough question and very advanced control. I guess you need to read carefully about the code, focusing on moveViewToX, and the logic and functions in ChartTransformer. Combining some tricks and calculations, you may find a way to fine-grainedly controll what you want to display.
Also, there is a property:
/// the maximum number of entried to which values will be drawn
internal var _maxVisibleValueCount = 100
may also help you.
I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
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
I am using a Highcharts Stock graph to show a percentage with respect to time.
http://jsfiddle.net/michaelchart/yYmPR/1/
At certain zoom levels (in this case, when zooming to a timespan of between about 6 and 12 years) the plot strangely turns from a line to sporadic points.
Any ideas as to why this might be? Or is it a bug with Highstock?
You can see an example of a working Highstock graph here http://www.highcharts.com/stock/demo/basic-line.
After posting on the Highstock forum and consequently having an issue posted on github, I found that it was because of the default value of the gapSize option. According to the docs;
gapSize : Number
Defines when to display a gap in the graph. A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken.
In practice, this option is most often used to visualize gaps in time series. In a stock chart, intraday data is available for daytime hours, while gaps will appear in nights and weekends.
Defaults to 5.
Setting gapSize to null fixes the problem.
In my particular case, the reason of this problem was bad data output.
Within "series" property, within the "data" array there was a "false" value.
Example:
series : {
"type":"column",
"name":"Test",
"data":[541,784,false,251,353]
}
Corrected the problem in the backend so "false" was interpreted as 0, and everything works now.