This is a line chart of DateTime type and when I decrease the size of the browser the tick on the x-axis changes.
What I would like is to keep the end date fixed with the current date, even if the size of the browser page changes.
Can anyone let me know how will that work?
tickPositioner callback function gives you an access to tick generated by Highcharts. This code removes the last tick and inserts a custom one:
tickPositioner: function() {
this.tickPositions.pop();
this.tickPositions.push(Date.UTC(1971, 5, 23));
}
Live demo: http://jsfiddle.net/kkulig/h6ttu3v8/
This causes that the last tick will always fall on 23 June. Also make sure that extremes on your axis have proper values so that the last tick is visible.
API reference: https://api.highcharts.com/highstock/xAxis.tickPositioner
Related
Is it possible to remove certain days in highcharts? I have a chart that only get data intervals from Monday to Friday. The problem Is that Saturday and Sunday is auto added to the graph even when there is no data for these days. I cant find anything that helps on api.highcharts.com they usually have solutions to all graph related problems but I cant seem to find anything about my problem. It's probably some easy option in the chart but I cant find anything that works.
You have two options, use highcharts and breaks.
An array defining breaks in the axis, the sections defined will be left out and all the points shifted closer to each other.
Requires that the broken-axis.js module is loaded.
It would look something like this, in a datetime axis:
xAxis: {
tickInterval: 1,
breaks: [{
from: 1537567200000,
to: 1537740000000,
breakSize: 1
}]
}
Working example: http://jsfiddle.net/ewolden/L3ykegzq/
Or switch to highstock where you can have an ordinal axis (ordinal is used by default):
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
Working example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/ordinal-true/
I am using NVD3 (a wrapper of d3) to draw a line graph. I want the data in the graph to be within the range of the axis. However, it looks inconsistent with the other labels, as the chart displays the max value of my data set on its own. See screenshot:
In this exanple, 18,554.41 is my highest data point. What I would like to see is the ticks/axis-lables to be in the same order of rounding throughout, with no overflow. i.e. 20,000,18000,16000 etc.
The caveat is that my dataset can vary quite differently - so I can't just set a max. Is there a way of just increasing the tick count by one or something?
Current relevant code:
var chart = nv.models.lineChart()
.showYAxis(true)
.forceY([0]);
chart.yAxis
.axisLabel('£')
.tickFormat(d3.format(','))
.ticks(8);
EDIT: added https://jsfiddle.net/60equ79h/2/
on the fiddle, I would like the first data set's topmost label to be 10,000. the second would be 80. i.e I would like to the y-axis to be increased by one tick
If I understand your question correctly, you can force the yAxis to have the values you define. You can hard code the values or write something clever to identify the min & max for your yAxis.
Update your chart to have the following:
chart.forceY([0, 20000]); // [min, max]
Hope it helps
I will try to explain my problem as much accurate as possible. I am looking for a javascript chart library filling the two following conditions:
From an ajax request retrieving time series,
display dynamically data when changing the time window.
such as it is perfectly done on highstocks: http://www.highcharts.com/stock/demo/basic-line
And
plot an horizontal line corresponding to the mean,
changing when the user update the time window on the chart.
Actually it is possible to display an horizontal line. But they are fixed on the whole data and do not change accordingly when the time window is modified:
http://www.highcharts.com/stock/demo/yaxis-plotlines
I am quite new to the topic and would like to know if it'sp ossible to modify Highstock classes to have such a result. Or maybe some other js libraries exists?
Using a combination of the answer here:
Highchart, get total of visible series data after setExtremes
And an example of dynamic average using all visible series that I made for a previous question, here:
http://jsfiddle.net/jlbriggs/gweuLegq/
I put together this example, using the afterSetExtremes event, like this:
xAxis : {
events:{
afterSetExtremes:function() {
var ext = this.getExtremes();
getAverage(this.chart, ext.min, ext.max, show, width, avgColor, dashStyle);
}
}
},
Working example here:
http://jsfiddle.net/jlbriggs/c93543yL/
The idea is:
1) capture the afterSetExtremes event
2) get the resulting axis min and max
3) loop through the series data
4) if a point is between the min and max, increment the count, and add the
point's y value to the sum
5) calculate the average accordingly, check for existence of average series, if exists, update, if not, add
It could as easily use a plot line that you add/remove as needed instead of a series, but I like having it as a series so that it has a legend entry.
I want to display live real data in a highstock chart.
But there is no data during the weekend.
Meaning I have data on Friday evening and Monday morning.
I don't want these points to connect between them.
This is what I have:
http://jsfiddle.net/rov8zu98/1/
[1236902400000,null],
[1237161600000,13.63],
I need a discontinued line, but null - is not ok as it also inserts a point on x axis
The thing is that I want to not display that GAP, so I want to hide it.
here is a mock-up of what I have and what I want to achieve:
As you see - I want Monday to start right after Friday ends.
Again - the image is a mock-up.
Can someone help me?
You could try adding 1 null value at the same timestamp as the first value of Monday. That seems to do what you want.
/* Mar 2009 */
[1237161600000,null], // An extra null value the same time as Monday
[1237161600000,13.63],
http://jsfiddle.net/nicholasduffy/rov8zu98/2/
You can use gapSize option.
plotOptions: {
line: {
gapSize: 1
}
},
I am using DHtmlxGantt. In my smaple gantt chart I have some tasks.
My question is "What is the default start and end values of time scale in a DHtmlxGantt chart".
I know that we can set these boundary values using gantt.config.start_date and gantt.config.end_date. But without setting that values explicitly, what would be the default start and end boundaries.
When I tried to read the same properties gantt.config.start_date and gantt.config.end_date, without setting them explicitly, the result is coming as undefined.
Could you please suggest any solution to get the default start and end values in the gantt chart time scale.
If date range is not specified explicitly, gantt uses the dates of the loaded tasks and adds some offset before the first and after the last task in scale.
http://docs.dhtmlx.com/gantt/api__gantt_scale_offset_minimal_config.html
You can get a displayed date range programmatically using gantt.getState() method http://docs.dhtmlx.com/gantt/api__gantt_getstate.html