When I want to create chart, I found that there is something weird.
The value sequence is correct, but xAxis categories aren't as my expectation.
I want to know how to fix this problem.
If need another information, please let me know.
In the category type axis, the first column is placed on the x=0 at the xAxis, which corresponds to the first value of the categories array. If you set the first series.data x to 1, it takes the second value from the categories array. You can easily fix that, by setting null as the first value:
xAxis: {
categories: [null, 1, 2, 3, 4, 5, 6]
},
Demo:
https://jsfiddle.net/BlackLabel/aemvthz6/
API Reference:
https://api.highcharts.com/highcharts/xAxis.categories
Related
My Y-Axis array :
["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"]
The chart doesn't show all number, it only shows 1, 3, 5, and so on. 2, 4, 6 is getting skipped. How do I force Highcharts to show all labels?
JFiddle
What you want is to set the label.step to `:
labels: {
step: 1
}
This forces highcharts to render a label for every category/tick.
The default behavior is to remove ticks if they are too close to one another. You can force all ticks by using a tickPositioner, rather than specifying categories:
yAxis: {
title: null,
tickPositioner: function () {
return [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
}
},
Note the quotes were removed, i.e. the returned array contains numbers (rather than string literals as was the case in the original question). Not sure why it doesn't work with string literals.
See also http://api.highcharts.com/highcharts#yAxis.tickPositioner
I've been trying to add some custom yAxis labels to highcharts but I've not been able to so far. I've tried using formatter from a predefined array of strings and I've tried addAxis method but that doesn't get me the results I'm looking for.
Basically I have some numbers (lets say 4 and 4000) and I want to have these as my yLabels. However, I do NOT want the giant space between them. They need to be one right after the other and in ascending order. I cannot figure out how to do this leaving them as integers and I cannot figure out how to dynamically add them to highcharts as strings. I'm not even sure if this is possible
Any help would be greatly appreciated.
Here is the Y-axis label formatter documentation from Highcharts you're probably looking for. I wrote this fiddle to simulate the custom y-axis functionality you were wanting, although I'm not sure how you want to map those values to the x-axis data. This should give you a good starting point.
Code for reference:
$('#container').highcharts({
yAxis: {
categories: ['4', '4000', 'Foobar'],
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
data: [0, 1, 2]
}]
});
This stackoverflow question may also help although I noticed some dead links.
In highcharts, I have a bunch of simple, standartized categorial data. See fiddle here.
series: [{
name: 'sample element 1',
data: [3, 3, 2]
}, {
name: 'sample element 2',
data: [1, 4, 3]
}, {
name: 'sample element 3',
data: [2, 4, 4]
}, {
name: 'sample element 4',
data: [4, 2, 2]
}]
Is it possible with highcharts to display a categorial scatter diagram, only without the dot overlap in the categories, in the manner shown below? Each value would have its own dot representative, showing distributions for each variable in that way.
Advanced feature: When hovering over a single value dot, the lines between all dots of the corresponding sample element should reappear so that the connections between the values become obvious.
Would that take a lot of deep code customization, or am I better off doing that with a different framework like d3.js? Thanks for ideas!
I have typically done this by adding a decimal to the x value of the points that need to 'stack', as it were.
There isn't a great (easy) way to do it dynamically that I have found, but if your values are going to fall within a fairly controlled range, it works well.
Example:
http://jsfiddle.net/zew9dt8e/2/
In case when values are the same, there are printed in the same place. But you can use http://api.highcharts.com/highcharts#plotOptions.series.pointPlacement to move serie.
Im working with stacked column using Highcharts.
The data series im constructing is similar to this
series: [{
name: 'Apples',
data: [['2014-01-01',5], ['2014-01-02',3], ['2014-01-04',2], ['2014-01-05',7], ['2014-01-06',8]]
}, {
name: 'Oranges',
data: [['2014-01-01',3], ['2014-01-02',7], ['2014-01-04',9], ['2014-01-05',11], ['2014-01-06',19]]
}, {
name: 'Grapes',
data: [['2014-01-01',15], ['2014-01-02',23], ['2014-01-03',12], ['2014-01-05',17], ['2014-01-06',18]]
}]
http://jsfiddle.net/emgq47px/
If you take a closer look at the data, im missing 2014-01-04 data for Apples but instead the data is stacked on 2014-01-03.
One way of solving this would be to prepopulate categories and follow the same order for inserting my y values but that wont be a good way to solve as i may deal with large data sets down the line.
Any tips to head in the right direction is greatly appreciated.
UPDATE:
I'm populating my x and y co-ordinates with values from database. Database gives me date in (YYYY-mm-dd) format. So i'm converting that string to epoch time using strtotime function in PHP strtotime($res[0])
But then when I populate draw the highchart, i see wrong dates. I checked with online available epoch converters and it looks like conversion is right but i still cant figure out whats wrong here.
Even the x axis ticks seems to be slightly off.
Many thanks for your suggestions.
http://jsfiddle.net/emgq47px/3/
RESOLVED:
I had to multiply epoch time with 1000. This works.
Original answer: HighCharts - timeseries chart - irregular datetime interval on xAxis
Probably the best way is to use a datetime axis. This allows highcharts to know the data contains dates, and it can sort out the axis properly.
xAxis: {
lineWidth: 2,
type: 'datetime'
},
Once you do this, you need to supply valid date times in your data like this:
data: [[Date.UTC(2014, 0, 1),5],
[Date.UTC(2014, 0, 2),3],
[Date.UTC(2014, 0, 4),2],
[Date.UTC(2014, 0, 5),7],
[Date.UTC(2014, 0, 6),8]]
Note, months go from 0 to 11, not 1 to 12, so zero is January.
http://jsfiddle.net/0ofLx86d/
The problem is that you are marking x-axis type is category
xAxis: {
lineWidth: 2,
type: 'category'
},
So when you assign data data: [['2014-01-01',5], ['2014-01-02',3], like this to it then the first value is considered as category so when you assign ['2014-01-03',12] as last then it replaces previous one ['2014-01-04',12]. You can test it by keeping first two as 03 and last one as 04, then it will take 04 and not show 03.
Solution
Replace
type: 'category' to 'datetime'
and date to epoch time
data: [[1388534400000,5], [1388620800000,3], [1388793600000,2], [1388880000000,7]]
You can use custom function for label if you want to display date on x-axis in different format or use Date.UTC
Demo
I want to use the Highcharts' Master detail chart as visualized here: http://www.highcharts.com/demo/dynamic-master-detail
However, I don't want to use intervals in order for the script to automatically assign Date values to each point of data, because my data are not necessarily continuous. E.g. I might have data for one minute and nothing for the next minute.
Ideally, I want to visualize three days in this chart. Each point will be a value of a specific minute of a specific date.
Any suggestions how I can do that? I don't mind using other libraries, if that's necessary.
Let me know if I didn't make myself clear or if you need more information.
Thank you.
The data properties in the series object can except either an array of values, in which case it will assume data to be equally spaced. Alternatively you can pass an array of arrays, where the outer array has size same as number of points, and each element of this array is another array of size 2, with first element as epochTime and the 2nd being the value. There is also a third option as explained below
Documentation # http://www.highcharts.com/stock/ref/#series--data
Excerpt of the documentation
data : Array<Mixed>
An array of data points for the series. The series object is expecting the points to be ordered from low to high. The reason for this is to increase performance. While in many cases the data is fetched from a server, it's also more convenient to sort on the server and thereby save on client resources. The points can be given in three ways:
A list of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. Example:
data: [0, 5, 3, 5]
A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:
data: [[5, 2], [6, 3], [8, 2]]
A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
View JSFiddle Example