Rewriting Highchart function in highcharter for R-markdown - javascript

Short and sweet: Rewriting a highchart function in R.
I figured out how to write a function in highcharts to rank my values and categories in a heatmap. So that the category with the highest number will display on top and vice versa. This is represented in a year column that that has a different ranking of each year.
Issue is that the code is done in the highcharts container in javascropt and I want to recreate this piece of code in a R-markdown file but can't manage to figure out how to wrap the function that ranks the values and categories as my highchart code does. Specifically this function:
const processedData = [];
columnsData.forEach(column => {
column.data.sort((a, b) => a.value - b.value);
column.data.forEach((dataEl, index) => {
processedData.push({
name: column.year,
y: index,
value: dataEl.value,
dataLabels: {
format: dataEl.name + ': ' + dataEl.value
}
});
});
});
Any help with wrapping the function to highcharter would be great.
const columnsData = [{
year: '2001',
data: [{
name: 'A',
value: 55
}, {
name: 'B',
value: 45
}, {
name: 'C',
value: 67
}]
}, {
year: '2002',
data: [{
name: 'D',
value: 15
}, {
name: 'E',
value: 24
}, {
name: 'F',
value: 67
}]
}, {
year: '2003',
data: [{
name: 'G',
value: 77
}, {
name: 'H',
value: 56
}, {
name: 'I',
value: 58
}]
}];
const processedData = [];
columnsData.forEach(column => {
column.data.sort((a, b) => a.value - b.value);
column.data.forEach((dataEl, index) => {
processedData.push({
name: column.year,
y: index,
value: dataEl.value,
dataLabels: {
format: dataEl.name + ': ' + dataEl.value
}
});
});
});
console.log(processedData)
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
xAxis: {
type: 'category'
},
yAxis: {
visible: false
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: processedData,
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Highcharter (RMD):
spx_highchart %>%
hchart(type = "heatmap",
hcaes(
x = year,
y = class,
value = returns,
color = colour,
borderWidth = 1
)
JS Fiddle: https://jsfiddle.net/6y45fdjt/

You can use chart.load event to inject JS code:
hchart(
events = list(
load = JS("function(){
const processedData = []; columnsData.forEach(column => {
column.data.sort((a, b) => a.value - b.value);
column.data.forEach((dataEl, index) => {
processedData.push({
name: column.year,
y: index,
value: dataEl.value,
dataLabels: {
format: dataEl.name + ': ' + dataEl.value
}
});
this.series[0].update({
data: processedData
})
});
});
}
")
)
) %>%
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update

Related

Highcharts packed bubble chart not working for negative values

I am using High charts packed bubble chart and I need to show different sizes of bubbles according to its value (negative values). It is working fine when I pass positive values but size of the circle not changing when I pass negative values. Is there any way to show chart with negative values?
js fiddle link with code example
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: 'TOP Countries'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.value}'
},
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
enabled: true,
format: '{series.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'ASEAN',
data: [{
name: "ASEAN",
value: -88.2
}]
}, {
name: 'KOR ',
data: [{
name: "KOR",
value: -605.2
}]
}, {
name: 'CHN ',
data: [{
name: "CHN",
value: -427233.7
}]
}, {
name: 'ISA ',
data: [{
name: "ISA",
value: -355.39
}]
}, {
name: 'ANZ ',
data: [{
name: "ANZ ",
value: -3331.4
}]
}, {
name: 'JP ',
data: [{
name: "JP1",
value: -22470857.0
},{
name: "JP2",
value: -21470857.0
}]
}]
});
graph with negative values
graph with positive values
Properties zMin and zMax are not a part of official packedbubble series API, but they are internally used and work as in bubble series.
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
//zMin: 0,
//zMax: 1000,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vro2wzL4/
API Reference:
https://api.highcharts.com/highcharts/series.packedbubble
https://api.highcharts.com/highcharts/series.bubble.zMin

Is it possible to load tooltip with external data with React-Native-HighCharts?

Good Morning,
Is it possible to read an external variable containing a list within the settings of a HighCharts chart for React-Native?
I'm using the component: "react-native-highcharts".
My code:
import ChartView from 'react-native-highcharts';
render() {
this.state.dadosApi = [10, 10, 1, 3, 4, 6, 5, 7, 18, 19, 2, 13];
var exData = ['2h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
var Highcharts='Highcharts';
var conf={
chart: {
type: 'line',
animation: Highcharts.svg,
marginRight: 10,
tooltipArr: exData,
},
yAxis: {
title: {
useHTML: true,
text: null,
},
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: 'Linha 1',
data: this.state.dadosApi,
marker: {
enabled: false,
},
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}
tooltip:
{
headerFormat: '',
}
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
}
return (
<ChartView style={{height:300}} config={conf} options={options}></ChartView>
);
The variable "exData" is coming as "undefined". So I can not load in the "tooltip" the value of the hours of each point in the graph.
Is there any way to do this?
I need to load Tooltip values from another list. I load the line with the values from list1. But when I click on the line I want to open a tooltip containing not the value of "line1" but the corresponding value in "list2".
Example: If I click on the "4" position, the value of the line is "6", but I want to show in the tooltip the text of "list2" that is equal to "Test 4".
But the setting says that the value of list2 is empty. How should I proceed to create tooltip this way?
javascript
const tooltips = ['Teste 1','Teste 2','Teste 3','Teste 4','Teste 5','Teste 6','Teste 7','Teste 8','Teste 9','Teste 10','Teste 11','Teste 12'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
},
credits: {
enabled: false
},
series: [{
name: 'Random data',
data: this.state.dataAcionamentos,
marker: {
enabled: false,
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
//showLoading: true,
};
I got it!
My solution just for contribution.
First I create my 2 arrays for the two Series:
for (i in myObj) {
var Label1 = 'Teste 1';
valueP = myObj[i].value;
dataList1.push({
name: Label1,
y: ValueP
});
valueAux1 = myObj[i].value;
valueAux2 = myObj[i].unit;
dataList2.push({
name: valueAux2,
y: valueAux1
});
}
The results:
dataList1 =
[
{ name: 'Teste 1', y: 61.41 },
{ name: 'Teste 1', y: 51.35 },
{ name: 'Teste 1', y: 41.00 },
{ name: 'Teste 1', y: 31.29 },
{ name: 'Teste 1', y: 21.23 },
{ name: 'Teste 1', y: 11.16 },
{ name: 'Teste 1', y: 16.19 },
{ name: 'Teste 1', y: 26.87 },
{ name: 'Teste 1', y: 36.65 },
{ name: 'Teste 1', y: 31.44 },
]
dataList2 =
[
{ name: '1h', y: 61.41 },
{ name: '2h 30m', y: 41.35 },
{ name: '2h 30m', y: 51.00 },
{ name: '22h 30m', y: 36.29 },
{ name: '4h 30m', y: 31.23 },
{ name: '12h 30m', y: 21.16 },
{ name: '4h 30m', y: 18.19 },
{ name: '6h 30m', y: 46.87 },
{ name: '7h 30m', y: 37.65 },
{ name: '9h 30m', y: 30.44 },
]
So I load the graph configuration:
var conf = {
chart: {
type: 'column',
},
title: {
text: null
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF', 'rgb(76, 43, 228)']
,
title: {
text: null
},
yAxis: {
title: {
useHTML: true,
text: null
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Bar Chart',
data: dataList1,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.y}</b>'
},
},{
type: 'line',
name: 'Line 1',
data: dataList2,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.name}</b>'
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
In this way the bar chart loads the value {this.series.data.y} in the tooltip and in the line graph loads the value {this.series.data.name}.
For example:
Clicking on position "4" of the bar, loads the value of "31.29" on Tooltip.
Clicking on position "4" of the line, loads the value of "22h 30m" on Tooltip.
Please take a look at the example provided here.
In your case, you defined the config as follows:
var conf = {
chart: {
tooltipArr: exData,
},
series: [{
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}]
}
In your example, you take the tooltip data from:
var toolTip = this.series.chart.options.chart.tooltipArr;
what might quickly result in one of the accessors being undefined. If you want to customise your tooltip based on the values you receive, I would go with the formatter function. You can check, what is the x and y value, using this.x or this.y.
If you know, what do you want to display in tooltips, I would simply declare a const outside conf object and access in inside tooltip formatter function, as the author of the package does.
const tooltips = ['Tooltip1', 'Tooltip2'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
series: [{
name: 'Random data'
}]
}

How can I add custom text to the bars in echarts and modify the color of the hovering ?

I am new using this library, and basically I would like to change the texts that are shown in the tooltip and in the label of the bars. I would also like to know how to modify the color of the bars to my liking.
To try to change the text, I am putting an array of test texts so that when I do a hovering on the bar, the text corresponds to the position of the data.
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
this is my code:
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var text_toltip=[];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
chart.setOption({
backgroundColor: '#fff',
tooltip: {},
visualMap: {
max: 20,
color: ['#d94e5d','#eac736','#50a3ba']
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
zAxis3D: {
type: 'value',
min: 1
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
environment: 'none',
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: 'asset/pisa.hdr',
diffuseIntensity: 1
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
label: {
show: item[2] != 0
}
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
});
how can I do it?
https://plnkr.co/edit/LZnJdUDRQHdCRKnldWCL?p=preview
So if I understand your questions correctly:
to change visualMap.color property which specifies colors used for gradient
e.g.
visualMap: {
max: 20,
color: ['#00ff00','#0000ff'] // start and end colors for gradient
},
You can add name property to each of your axises
e.g.
yAxis3D: {
type: 'category',
data: days,
name: 'days'
},
to change text of your tooltips you add tooltip with formatter
e.g.
tooltip: {
formatter: 'my custom text and {a}, {b}, {c}, {d} and {e}'
},
alternatively formatter can be provided as a callback:
tooltip: {
formatter: function(params, ticket, callback) {
return "my text, value: " + params.value;
}
}
Using callback you can get detailed text from the server.
I also forked your plnkr: https://plnkr.co/edit/fpyhLHUZ2VAPdeQWnw4E?p=preview
UPDATE: https://plnkr.co/edit/JJMoWpZVhfyQOjdTYDvB?p=preview - this version uses your array of tooltips
Basically what you need in your case is params.dataIndex property:
tooltip: {
formatter: function(params) {
return " " + params.value + ", " + text_toltip[params.dataIndex];
}
},

ng-style not working in div which is rendering Highchart

I am trying to dynamically change the height of the chart depending upon the number of horizontal bars displayed in the chart.
I am using ng-style to pass css dynamically. ng-style works fine (http://jsfiddle.net/7veB2/) if I am not rendering the chart.
The link (http://jsfiddle.net/gsthilak/atwyh073/) has a working highcharts bar chart in horizontal fashion.
I am trying to render the chart in id="container" in the JSFiddle link below, but it does not render the chart.
JSFiddle (not working) link: http://jsfiddle.net/gsthilak/7veB2/19/
I am trying to change the height of the chart dynamically because the chart looks cramped if there are too many bars within small space.
JS Code looks like:
var app = angular.module('myApp', []);
function ctrl($scope){
$scope.myStyle= {
"width":"900px",
"background":"red"
}
$scope.chartHeight = 400+"px"
$scope.chartStyle = {
"height":$scope.chartHeight,
"margin":"0 auto",
"min-width":"310px",
"max-width":"624px"
}
}
var baseValue = 0;
var shadowBaseValue = 0;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y + baseValue;
}
return this.key === "Combined Uncertainty" || this.key === "" ? "" : this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals: false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty', '']
},
yAxis: [{
title: {
text: 'MM $'
},
labels: {
formatter: function () {
return this.value + baseValue;
}
}
}],
series: [{
threshold: 29.5,
name: 'Low',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 12.15 - baseValue,
}, {
x: 1,
y: 15.45 - baseValue,
}, {
x: 2,
y: 31.25 - baseValue,
}, {
x: 3,
y: 12.15 - baseValue,
}],
labels: [10, 5, 1, 2]
}, {
threshold: 29.5,
name: 'High',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 46.86 - baseValue,
}, {
x: 1,
y: 42.28 - baseValue,
}, {
x: 2,
y: 27.77 - baseValue,
}, {
x: 3,
y: 46.86 - baseValue,
}],
labels: [30, 10, 3, 4]
}]
});
HTML code looks like:
<div ng-app="myApp" ng-controller="ctrl">
<div id="container" ng-style="chartStyle"></div>
<div style="width: 250px; overflow: scroll; " >
<div ng-style="myStyle">Hello!</div>
</div>
</div>
Please help me to solve this problem. Thanks!

Highstock.js: Not able to create multi pane chart with two stacked column charts, one "normal" and the other "percent"

I'm trying to create a multi-pane chart (like this one http://www.highcharts.com/stock/demo/candlestick-and-volume), with the upper one being a "normal" stacked column chart and the lower one being a "percent" stacked column. But I'm only able to make it both "normal" or both "percent", which is not what I want. Tried a few combinations of plotOptions but couldn't get it to work. Here's the fiddle(http://jsfiddle.net/abhikgo/59k90959/3/): TIA.
var chartData = {"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
"bbbBBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
"bbb":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
"BBB":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
"CCC":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
"DDD":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]};
var $chart = $('#chartArea').highcharts('StockChart', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{
title: {
text: "Normal Statcking"
},
opposite: false,
height: "65%"
}
,{
title: {
text: "% Stacking"
},
opposite: false,
height: "65%",
top: '65%',
height: '35%',
offset: 0
}
],
plotOptions: {
column: {stacking: 'normal'}
},
series: [{
type: 'column',
name: 'AAA',
data: chartData.AAA
},
{
name: 'bbbBBB',
data: chartData.bbbBBB
},
{
name: 'CCC',
data: chartData.CCC
},
{
name: 'DDD',
data: chartData.DDD
},
{
name: 'bbb',
data: chartData.bbb,
yAxis: 1,
plotOptions: {
column: {
stacking: 'percent'
}
}
},
{
name: 'BBB',
data: chartData.BBB,
yAxis: 1,
plotOptions: {
column: {
stacking: 'percent'
}
}
}
]
});
The problem is the way you are trying to set stacking per specific series, this is proper way:
{
name: 'bbb',
data: chartData.bbb,
yAxis: 1,
stacking: 'percent'
}, {
name: 'BBB',
data: chartData.BBB,
yAxis: 1,
stacking: 'percent'
}
See demo: http://jsfiddle.net/59k90959/4/
SOLUTION
I could not find a way to do both chats with the library so I calculated the percentages myself and inserted them as separated series. The only catch was to proper format the tooltips.
var chartData = {
"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
"BBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
"CCC":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
"DDD":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
"EEE":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
"FFF":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]
};
var sumData = [];
$.each(chartData, function(i){
$.each(chartData[i], function(j){
if(!sumData[j]) sumData[j] = 0;
sumData[j] += this[1];
});
});
var percentData = {};
$.each(chartData, function(i){
percentData[i] = [];
$.each(chartData[i], function(j){
percentData[i][j] = [this[0], this[1]/sumData[j]];
});
});
var $chart = $('#chartArea').highcharts('StockChart', {
chart: { type: 'column' },
plotOptions: { column: {stacking: 'normal'} },
tooltip: {
formatter: function(){
console.log(this);
var s = '<span style="font-size: 10px">'+
Highcharts.dateFormat('%A, %b %d, %Y',this.x)+
'</span><br/>';
for(var i = 0; i < sumData.length - 1; i++) {
s += '<br/>' + '<span style="color: ' +
this.points[i].series.color+'">\u25CF</span>' +
this.points[i].series.name + ': ' +
this.points[i].y + 'm ' +
this.points[i].percentage.toFixed(1) + '%';
}
return s;
}
},
xAxis: { type: 'datetime', },
yAxis: [
{//normal
title: {
text: "Normal Statcking"
},
opposite: false,
height: "50%"
},
{//percent
title: {
text: "% Stacking"
},
opposite: false,
top: '50%',
height: '50%',
offset: 0
}
],
series: [
{//normal
name: 'AAA',
data: chartData.AAA
},{
name: 'BBB',
data: chartData.BBB
},{
name: 'CCC',
data: chartData.CCC
},{
name: 'DDD',
data: chartData.DDD
},{
name: 'EEE',
data: chartData.EEE
},{
name: 'FFF',
data: chartData.FFF
},
{//percent
name: 'pAAA',
data: percentData.AAA,
yAxis: 1
},{
name: 'pBBB',
data: percentData.BBB,
yAxis: 1
},{
name: 'pCCC',
data: percentData.CCC,
yAxis: 1
},{
name: 'pDDD',
data: percentData.DDD,
yAxis: 1
},{
name: 'pEEE',
data: percentData.EEE,
yAxis: 1
},{
name: 'pFFF',
data: percentData.FFF,
yAxis: 1
}
]
});
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="chartArea"></div>
</body>
</html>

Categories