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
Related
Working with a simple highcharts bar graph such as so: http://jsfiddle.net/bvuWR/106/
$(function () {
var chart;
$(document).ready(function() {
$("#updateAxis").click(function(){
chart.xAxis[0].setCategories(['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Lemon']);
for (var i = 0; i < chart.series.length; i++)
{
chart.series[i].addPoint(Math.random() * 5, true, true);
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
Is there any way that I can grab data passed as a data series and add under the category?
This example has the data hardcoded in the config, however, I'll be passing the values to the data series dynamically and the value in the category would need to change as well.
You can set axis type as category and define categories from points names.
xAxis: {
type: 'category'
},
series: [{
name: 'John',
data: [{
y: 5,
name: 'Apples'
}, {
y: 2,
name: 'Oranges'
}, {
y: 3,
name: 'Pears'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/d41cvheL/
API: https://api.highcharts.com/highcharts/xAxis.categories
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
}]
}]
I can accomplish basic drill down functionality in dotnet highcharts, meaning i can drill down a column chart into other column charts.
However i am attempting to drill down a column chart into a stacked column chart.
Meaning that for each column on level 1 there would be multiple stacked columns on level 2 (when you click the first regular column chart)
I am using dotnet highcharts and asp.net mvc.
I believe my problem lies when i drill down, as the code i have for a stacked column and regular column work, however when putting them together i cant seem to get the result im looking for.
So much like this example:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
i want to drill down my column graph, but instead of having another layer of columns i would like stacked column.
I have tried adding plotoptions for normal stacking inside the drilldown method and have tried adding a stack tag to each instance of data, but none seem to be working.
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.
I want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?
In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);