Is there a way to have 'datetime' for the xAxis type on the main series, but then when a series is clicked on, have the drilldown use categories for that time?
In this jsfiddle example (http://jsfiddle.net/kadams/3e3xqv7e/), you can see that when 'category' is used as the xAxis type, the drilldown data correctly uses the drilldown series names 'A', 'B', and 'C' on the xAxis. But when the xAxis type is changed to 'datetime', and and the millisecond time is used for the 'x' value in place of a name for the main series, the categories on the drilldown don't show 'A', 'B', or 'C' anymore. Just meaningless dates.
UPDATE for clarification - I would prefer to use the 'datetime' type instead of 'category' type with values formatted as dates, because Highcharts will throw the 'too many ticks' error when the x-axis is big: http://www.highcharts.com/errors/19. I give the 'category' type example in the fiddle below simply to demonstrate that 'A', 'B', 'C' do show properly when the type is not 'datetime'.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
},
xAxis: {
type: 'category',
// type: 'datetime',
dateTimeLabelFormats: {
hour: '%l:%M %p'
}
},
legend: {
enabled: false
},
series: [{
name: 'Total',
colorByPoint: true,
data: [{
y: 8,
drilldown: 'Bob',
name: 'Bob', //used with 'category' xAxis type
x: 1420700400000 //used with 'datetime' xAxis type
}]
}],
drilldown: {
series: [{
id: 'Bob',
name: 'Bob',
data: [{
name: 'A',
y: 3
}, {
name: 'B',
y: 3
}, {
name: 'C',
y: 2
}]
}]
}
});
});
I have found a solution for your problem! Sebastian Bochan gave me some ideas. You need to separate xAxis and set a different type to each one. So, here you have to add your categories as Highcharts's way.
xAxis: [{
id: 0,
type: 'datetime'
},
{
id: 1,
type: 'categories',
categories: data.categories
}
]
Then you have to add this code in your serie to link it with your new Axis.
drilldown: {
series: [{
name: "test",
id: "test",
xAxis: 1, // <--- your desired X axis ID
data: [
[your data]
]
}]
}
Probably you'll see a small difference on bottom chart, but all works for me.
I hope this help to you ;)
You need to add this to your xAxis:
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
},
Check out the fiddle.
Related
How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below
But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come.
Highcharts.chart('container', {
chart: {
showAxes: true
},
title: {
text: ''
},
xAxis: {
type: "category",
categories: ['Semi-Final','Final Phase'],
max: 2,
labels: {
x: 10,
y: 30,
},
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
visible: false
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Cricket', 20 ],
],
type: 'sankey',
}]
});
The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:
events: {
load: function() {
var max = this.series[0].nodeColumns.length - 2;
this.xAxis[0].update({
max: max
})
}
}
Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/
API: https://api.highcharts.com/highcharts/xAxis.max
I'm trying to create a column highchart where I can compare 3 measures (e.g. x, y and z axes) attributed to each category on the x axis. All the measures exist in the same dataframe, so I want to access them from the same series.
I understand that I am able to display one measure (when attributing it to 'y') and access the other measures by creating new variables like 'MyVal' into the point object (as seen here), but this only seems to give me the ability to access them in tooltip. Is there anyway I can attribute each a variable and also display them all side by side (rather then just displaying 'y')
Thank you!
This is a very confusing question.
The y value tells the chart where to plot the data point in relation to the yAxis.
The y axis of a chart is simply the vertical axis (in most cases).
I assume that you are saying you want to simply plot your three values as three columns (but, again, it is unclear what you are actually trying to do); this is simply a matter of adding three data points to your data series - not adding three dimensions to your single data point.
You can do it as simply as:
series: [{
data: [4,5,3]
}]
In conjunction with predefined categories, or by specifying the categories in the data:
series: [{
data: [{
'name': 'Measure 1',
y: 4
}, {
'name': 'Measure 2',
y: 5
}, {
'name': 'Measure 3',
y: 3
}]
}]
Fiddle example:
http://jsfiddle.net/3d3fuhbb/208/
Output:
What else do you require?
{{EDIT -
Additional options:
1) grouped column
Fiddle:
http://jsfiddle.net/3d3fuhbb/209/
Data structure:
series: [{
name: 'Measures',
data: [4]
},{
name: 'Measure B',
data: [5]
},{
name: 'Measure C',
data: [3]
}]
2) fiddle with the x placement, use single category:
Fiddle:
http://jsfiddle.net/3d3fuhbb/211/
Data structure:
series: [{
pointRange: 0.25,
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name;
}
},
data: [{
'name': 'Measure 1',
x: -0.25,
y: 4
}, {
'name': 'Measure 2',
x: 0,
y: 5
}, {
'name': 'Measure 3',
x: 0.25,
y: 3
}]
}]
3) skip the categories, hide the axis labels, use the x axis title in its place:
fiddle:
http://jsfiddle.net/3d3fuhbb/212/
Data Structure:
series: [{
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name;
}
},
data: [{
'name': 'Measure 1',
y: 4
}, {
'name': 'Measure 2',
y: 5
}, {
'name': 'Measure 3',
y: 3
}]
}]
Does anyone have any examples of using Highchart to achieve a result like the one in the image?
function drawChart(result) {
var response =
{
Month: result.Month,
Data: result.Data,
Title: result.title
};
$('#dvChart').highcharts({
chart: {
type: 'column'
},
title: {
text: title
},
xAxis: {
categories: response.Month
},
yAxis: [{
min: 0,
title: {
text: "# Of Tests"
},
},
],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
}
}
}
,
series:
response.Data
});
}
My code above can achieve stacked chart but I dont know how to put cumulative lines to the chart.
To get line type series with stacked column series you should set type of type per series for ones with other type than the one defined in chart.type option.
Example: http://jsfiddle.net/t3v579uj/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['r', 'e', 's', 'p', 'o']
},
yAxis: [{
min: 0,
title: {
text: "# Of Tests"
}
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal'
}
},
series: [{
data: [1,2,3,4]
},{
data: [1,2,3,4]
},{
data: [1,2,3,4]
},{
type: 'line',
data: [2,3,4,5]
}]
});
});
I'm trying to alert/fetch the period value from SMA indicator series if the series is clicked.
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name: '15-day SMA',
linkedTo: 'primary',
showInLegend: true,
type: 'trendline',
algorithm: 'SMA',
periods: 15
}]
SMA technical indicators- http://jsfiddle.net/laff/WaEBc/
In the reference the period value is defined 15. just alert this value. Thanks in advance.
You can set event click directly in series options:
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name: '15-day SMA',
linkedTo: 'primary',
showInLegend: true,
type: 'trendline',
algorithm: 'SMA',
periods: 15,
events: {
click: function() {
console.log(this.options.periods);
}
}
}]
Demo: http://jsfiddle.net/WaEBc/32/
Try put into plot options block click handler like this:
plotOptions: {
series: {
point: {
events: {
click: function() {
var i = this.x;
}
}
}
}
},
Investigate in the debug properties of this object
Using Highcharts, how can I select a point using it's id? For example, if I create a chart using the following code:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [{
name: 'Point1',
x: 1,
y: 2
}, {
name: 'Point2',
x: 2,
y: 5
}]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
The tooltip tells me that when I hover over a point, what the id is. However, I can't figure out the syntax to identify that point. I know that chart1.series[0].name returns Jane. Also,
chart1.series[0].data[0].namereturnspoint1` Is there an easy way that I can just select the point and change the color knowing only 'point1'?
I'm wondering if there is a more efficient way other than looping through all of the points each time.
You can set an id for each point you want to get.
series: [{
name: 'Jane',
data: [{
'name': 'Point1',
'id': 'point1',
'x': 1,
'y': 2
}, {
'name': 'Point2',
'id': 'point2',
'x': 2,
'y': 5
}]
}, {
name: 'John',
data: [5, 7, 3]
}]
Then you can get the point by the following code.
// assuming that chart is your chart var
chart.get('point1');
demo
Or if you don't want to set an id you can simple loop thrue points to compare the name you want to find with the point name.
Reference:
http://api.highcharts.com/highstock#object-Chart