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.
Related
Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter
I have a single highstock chart with 2 y-axis - one displaying an area chart and below it a column chart.
I am trying to achieve 2 things (both of which I know are possible, just not sure how to do it).
have a single tooltip, not the 3 that are currently showing up
have that tooltip follow the cursor - either tracking the cursor as
it move across the screen, or appear only over the chart which is
being hovered over (in reality the charts will be larger than the
codepen and require the page to be scrolled).
Appreciate any help!
$cumulative_chart = Highcharts.stockChart('container', {
chart: {
type: 'area',
height: 500
},
plotOptions: {
series: {
//stacking: 'normal',
dataGrouping: {
units: [[
'day',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
}
}
},
yAxis: [{
height: '50%'
}, {
top: '65%',
height: '50%',
offset: 0
}],
xAxis: {
offset: 100
},
credits: {
enabled: false
},
tooltip: {
enabled: true,
shared: true
},
series: [{
type: 'area',
data: [[1512086400000, 10626],[1512172800000, 21634],[1512259200000, 34994],[1512345600000, 51400],[1512432000000, 68430]],
stack: 0,
name: 'chart A',
id: 'area'
},
{
type: 'column',
data: [[1512086400000, 10626],[1512172800000, 11008],[1512259200000, 13360],[1512345600000, 16406],[1512432000000, 17030]],
stack: 1,
name: 'chart B',
yAxis: 1,
id: 'column',
showInLegend: false
}]
});
codepen: https://codepen.io/anon/pen/ZozBZM
The option you are looking for is to add split:false to your tooltip. This causes for the tooltip to center itsself around one of your graphs, instead of hovering over all the graphs in your highstock chart.
A working fiddle is found here
You can find more information in the highcharts API
The following picture is my desired result (each of the column belongs to different series):
When there is only one series in the chart, it is an achievable result; but when there are two series in the chart, the positions of the bars are skewed (not exactly on tick).
The only difference between these two charts is:
{
enableMouseTracking: false,
pointPlacement: 'on',
data: finArray, //position not skewed as this series has the same data as the other series
pointWidth: argPWidth
}]
and
{
enableMouseTracking: false,
pointPlacement: 'on',
data: finArray1,
pointWidth: argPWidth
}]
I suppose that disabling grouping should solve your problem:
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
min: 0.5,
max: 2.5,
tickInterval: 1
},
plotOptions: {
column: {
grouping: false
}
},
series: [{
data: [
[1, 5]
]
}, {
data: [
[2, 2]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/mohhq9rz/
API reference: https://api.highcharts.com/highcharts/series.column.grouping
I am using Highcharts to chart server performance stats, memory, cpu, etc. I want to add support incidents and change windows to these charts. At first I though the error bar was perfect, but I would need to rotate them to horizontal. As far as I can see, the chart can be rotated, but only the entire chart, not one series.
chart: {
type: 'spline',
inverted: true
},
Any ideas how I can get little horizontal bars on my chart, to represent the duration of incidents. Colouring according to severity wins bonus points.
use plotLines to darw lines on the chart
yAxis: [{
plotLines:[{
value : where do you want the line,
color: 'color for the line'
}]
}]
the same is possible for xAxis
if you want you can add them on demand using the method addPlotLine();
here is the example for plotLines http://jsfiddle.net/QWLhC/
chart.xAxis[0].addPlotLine({
value: where do you want the plotLine,
color: 'color of the plot line'
});
You can use simple line series, where each error bar will be separate series, but all will be connected to one master series, see example: http://jsfiddle.net/3bQne/646/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
line: {
color: 'red',
lineWidth: 10,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}
},
series: [{
type: 'column',
name: 'some data',
data: [4, 11, 5, 16, 9, 22, 11, 1]
}, {
type: 'line',
name: 'errors',
id: 'err',
data: [ [0, 4],[3, 4]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [3, 1], [6, 1]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [2,10], [3,10]]
}]
});
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