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
}]
}]
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 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.
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
hello the following code put flags on series by using type: 'flags' name:'' data:[{}] and so on , "" is there is any way that i can change the flags type to draw lines or areas ?? ""
the code is very simple
series: [{
type: 'line',
name: 'AAPL',
data: ohlc,
id:'dataseries'
}, {
type: 'flags', 'this is what i wanted to change to lines
name: 'Flags on series',
data: [{
x: 1114992000000,
title: 'On series'
}, {
x: Date.UTC(2011, 3, 28),
title: 'On series'
}],
onSeries: 'dataseries',
shape: 'squarepin'
}, {
type: 'line',
name: 'Volume',
data: volume,
yAxis: 1
}]
Are you aware about Plot lines or Plot bands, that highchart supports out of the box?
They haven't given examples of these on x-Axis but they work very much when oriented vertically too
Vertical Plot lines on x axis # jsFiddle