I want to overlay two datetime x-axis which are not from the same daterange but have the same number of points (point index x from series 1 should be next to point index x from series 2).
I tried to achieve this with two x-axis where one being hidden.
I basically seems to work but the bars only align at certain zoom levels.
Zoomed-In:
Zoomed-Out:
Here is a jsfiddle with the settings I tried:
"xAxis": [{
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
visible: false
}, {
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
}
I think you want to use categories - that way you will get points axis evenly spaced, take a look: http://jsfiddle.net/8wahvryx/2/
"xAxis": [{
"type": "category",
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
}, {
"type": "category",
visible: false
}]
And if you don't want to change your data format, you can override keys from array (by default it is [x, y]) to support names:
plotOptions: {
column: {
keys: ['name', 'y']
}
},
Note: In categorised axis, point.name is used as category name below the point. Use xAxis.labels.formatter or xAxis.labels.format to change timestamps to hours.
The solution from #pawel fus might work in most cases, unfortunately did not for for me.
I ended up using the exact same values for the x-axis of both series and only set a different name for each value.
Related
Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.
You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis
I am working with the synchronised chart of Highchart. Pretty cool. However, I would like to »dictate« the min and max values for the yAxis. I added these two parameters into the JSON file, but they are not being accepted unfortunately.
JSON file:
"unit": "km/h",
"type": "line",
"min": -2,
"max": 16,
yAxis definition:
yAxis: {
title: {
text: null
},
min: dataset.min,
max: dataset.max
},
but that doesn't work. Any idea why? Here is the original graphic I am working with. Here is a fiddle.
In Highcharts API we can read:
max: number, null
...
If the endOnTick option is true, the max value might be rounded up. (...)
As a solution disable startOnTick and endOnTick options or use tickPositioner function to calculate and set tick postion manually, for example:
yAxis: {
...,
tickPositioner: function(){
var ticks = [],
step = (dataset.max - dataset.min) / 4;
for (var i = dataset.min; i <= dataset.max; i += step) {
ticks.push(i);
}
return ticks;
}
}
Live demo: https://jsfiddle.net/BlackLabel/ev5hz0pk/
API Reference:
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/yAxis.tickPositioner
I'm using Chartkick and Chart.js to visualize a data set of two lines, however, only the first tick on the x-axis displays
I've tried passing options to the dataset as per the chart.js docs, indicating that I would not like the ticks to auto skip.
<%= line_chart [
{ name: "Successes", data: #successful_requests },
{ name: "Errors", data: #error_requests }
],
dataset:{
scaleShowValues: true,
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
},
legend: "bottom",
messages: { empty: "Awaiting your first request!" }
%>
I expect the chart to show a dataset an x-axis that is labeled at all points on the x-axis.
From the docs:
autoSkip
If true, automatically calculates how many labels can be shown and hides labels accordingly.
maxTicksLimit
Maximum number of ticks and gridlines to show.
The autoSkip option controls whether some of the labels on the axes ticks are automatically skipped when the label texts would otherwise overlap. To control the number of ticks being displayed, what you're looking for is maxTicksLimit and related options. For your use case, you should probably set maxTicksLimit depending on the size of your data sets.
Also, these options can't be set on the datasets directly. Instead, you need to pass them through Chartkick to Chart.js by using the library option. So, something like this should achieve what you're trying to do:
<%= line_chart [
{ name: "Successes", data: #successful_requests },
{ name: "Errors", data: #error_requests }
],
library: {
scales: {
xAxes: [{
ticks: {
maxTicksLimit: #successful_requests.size
}
}]
}
},
legend: "bottom",
messages: { empty: "Awaiting your first request!" }
%>
Note that I'm assuming both your data sets are always of the same length.
I have the following code which display the line on the chart. I could not able to find how to format the x axis. I would like to show every thousand interval similar to y axis (0,1000,2000,3000,4000, etc). I am using Kendo UI.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
categoryAxis: {
labels: {
step: 1000,
format: "n0"
},
},
series: [{
type: "area",
line: {
style: "smooth"
},
field: "x",
categoryField: "y"
}],
});
}
Here is my fiddle:
http://jsfiddle.net/nDS3S/37/
If I get right, your code doesn't works because the step doesn't really mean that would be shown a label for each 1000, but in fact it will show a label for each serie. So your chart doesn't have 1000 series, that is why only 0 was displayed.
If you change your step to 5, you will see the labels, but displaying the exactly number for that specific serie.
Check this out.
I'm afraid you can't achieve what you want.
I used pointInterval property to set interval as 30 days but my data set contains daily data.
That method is not working. chart is displaying all the points.
please check below image for the chart i got
https://docs.google.com/file/d/0B1wfs7NUcZnGQkk2QWdEbE9ndmM/edit
What is needed is to draw only three points for three months in the above chart.
Following is the code i used to do this.
Note that 'options.data.points' has data set in format of [[date,value],[]....]
var stockChartData = {
chart: {
renderTo: 'container'
},
title: {
text: "Stock Chart"
},
credits: {
enabled: false
},
yAxis: [
{
labels: {
align: 'left',
x: 2
},
title: {
enabled: false
},
lineWidth: 2
}
],
navigation: {
buttonOptions: {
enabled: false
}
},
scrollbar: {
enabled: false
},
series: [{data: options.data.points, type: 'line', pointInterval: 24 * 3600 * 1000 *30}]
};
stockChart = new Highcharts.StockChart(stockChartData, function (chart) {
});
please help me to solve this issue
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/pointinterval-pointstart/
The data set this example uses is in the format of [value,value,...] (see http://www.highcharts.com/samples/data/large-dataset.js).
So when pointInterval for a month is used, for example the last two values will be used for the values of last two months. For the same data when pointInterval for a year is used, the same last two values is used for the last two years. So the chart doesn't ignore the between values, therefore you will not have for example an average value of the month for day values.
EDIT:
You can use plotOptions.series.dataGrouping for grouping the day values in a month:
http://jsfiddle.net/worhscy0/