I'm doing my first steps with dxchart of DevExtreme. At the moment I've got follow code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DevExtreme Chart</title>
<!--FRAMEWOKR-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="./lib/globalize.min.js"></script>
<script src="./lib/dx.charts.js"></script>
<!--JS-->
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="chartContainer" style="width:100%; height: 440px"></div>
</body>
</html>
JS:
$(document).ready(function(){
var dataSource = [
{
argument: '15.06.2016',
puls: 102,
temperatur: 37.6,
weight: 91
},
{
argument: '16.06.2016',
puls: 99,
temperatur: 35.1,
weight: 88
},
{
argument: '17.06.2016',
puls: 87,
temperatur: 38.0,
weight: 87
},
{
argument: '18.06.2016',
puls: 91,
temperatur: 36.3,
weight: 87
},
{
argument: '19.06.2016',
puls: 112,
temperatur: 37.1,
weight: 90
}
];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: "spline",
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
axis: "pulsAxe"
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.seriesName
}
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
"export": {
enabled: true
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
series: [
{
name: "Puls",
valueField: "puls"
},
{
name: "Temperatur",
valueField: "temperatur",
axis: "temperaturAxe"
},
{
name: "Gewicht",
valueField: "weight",
axis: "weightAxe"
}
],
valueAxis: [
{
name: "pulsAxe",
title: "Puls",
position: "left",
label: {
customizeText: function(value) {
return value.value + " bpm"
}
}
},
{
name: "temperaturAxe",
title: "Temperatur",
position: "left",
label: {
customizeText: function(value) {
return value.value + " °C"
}
}
},
{
name: "weightAxe",
title: "Gewicht",
position: "left",
label: {
customizeText: function(value) {
return value.value + " kg"
}
}
}
]
});
});
My result is this:
As you can see, there is a simple spline chart, with three various y-axes and three various value-ranges for this axes on the chart. For each axe, I've got an label (bpm, °C and kg). I implemented also the tooltip of dxchart. At the moment when I hover a point, in the tooltip there is only the value. I also would like to add dynamicly to the tooltip the label after the value. That means, when I hover a value of the axe "Puls", it should show for example this: 91 bpm. How can I do this. I tried it with the customizeTooltip: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/tooltip/?version=16_1#customizeTooltip
I had the idea, to check the seriesName and assign the label in the return something like this, but it didn't work:
tooltip: {
enabled: true,
customizeTooltip: function(point) {
if (point.seriesName == "Puls") {
return {
text: point.value + " bpm"
}
} else if (point.seriesName == "Gewicht") {
return {
text: point.value + " kg"
}
} else if (point.seriesName == "Temperatur") {
return {
text: point.value + " °C"
}
}
}
},
Hi please check the Plunker https://plnkr.co/edit/6Uoh30bb8qBNWIIbyX0O?p=preview
check your library includes
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="chartContainer" style="width:100%; height: 440px"></div>
<!-- Put your html here! -->
</body>
</html>
and JS
// Add your javascript here
$(function(){
var dataSource = [
{
argument: '15.06.2016',
puls: 102,
temperatur: 37.6,
weight: 91
},
{
argument: '16.06.2016',
puls: 99,
temperatur: 35.1,
weight: 88
},
{
argument: '17.06.2016',
puls: 87,
temperatur: 38.0,
weight: 87
},
{
argument: '18.06.2016',
puls: 91,
temperatur: 36.3,
weight: 87
},
{
argument: '19.06.2016',
puls: 112,
temperatur: 37.1,
weight: 90
}
];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: "spline",
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
axis: "pulsAxe"
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
console.log(obj.seriesName)
if (obj.seriesName == "Puls") {
return {
text: obj.value + " bpm"
}
} else if (obj.seriesName == "Gewicht") {
return {
text: obj.value + " kg"
}
} else if (obj.seriesName == "Temperatur") {
return {
text: obj.value + " °C"
}
}
// return {
// text: obj.seriesName
// }
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
"export": {
enabled: true
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
series: [
{
name: "Puls",
valueField: "puls"
},
{
name: "Temperatur",
valueField: "temperatur",
axis: "temperaturAxe"
},
{
name: "Gewicht",
valueField: "weight",
axis: "weightAxe"
}
],
valueAxis: [
{
name: "pulsAxe",
title: "Puls",
position: "left",
label: {
customizeText: function(value) {
return value.value + " bpm"
}
}
},
{
name: "temperaturAxe",
title: "Temperatur",
position: "left",
label: {
customizeText: function(value) {
return value.value + " °C"
}
}
},
{
name: "weightAxe",
title: "Gewicht",
position: "left",
label: {
customizeText: function(value) {
return value.value + " kg"
}
}
}
]
});
});
Related
Is it possible to change the animation of line chart on Apexcharts.js from bottom-top to left-right when launching the chart?
I forked this example on Codepen and dug the docs but can't a way to do that.
<div id="chart">
</div>
#chart {
max-width: 650px;
}
var options = {
chart: {
height: 380,
type: "line",
id: "areachart-2"
},
dataLabels: {
enabled: false
},
stroke: {
curve: "straight"
},
series: [
{
data: series.monthDataSeries1.prices
}
],
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime",
labels: {
rotate: 0,
formatter: function(val) {
return dayjs(val).format('MMM YYYY')
}
},
tooltip: {
formatter: function(val) {
return dayjs(val).format('MMM YYYY')
}
}
},
tooltip: {
x: {
formatter: function(val) {
return dayjs(val).format('MMM DD, YYYY');
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var totalIncident = [151, 169, 311, 614, 840];
var ransomDemands = [18, 60, 150, 383, 555];
var forensicsCosts = [24, 33, 58, 109, 103];
var xCat = ['2017', '2018', '2019', '2020', '2021'];
var defaultValues = new Array(totalIncident.length).fill(null);
var totalIncidentD = [...defaultValues]
var ransomDemandsD = [...defaultValues]
var forensicsCostsD = [...defaultValues]
var options = {
series: [{
name: "Total Incident Costs",
data: defaultValues
}, {
name: "Ransom Demands",
data: defaultValues
}, {
name: "Forensics Costs",
data: defaultValues
}],
colors: ['#A0CEE8', '#4060AC', '#EC6058'],
chart: {
height: 500,
width: 1200,
type: 'line',
zoom: {
enabled: false
},
fontFamily: 'Raleway, sans-serif',
animations: {
speed: 13000,
easing: 'linear',
dynamicAnimation: {
speed: 1000
}
}
},
dataLabels: {
enabled: true,
formatter: function (val, opt) {
if (val === null) return;
return val + "K"
},
},
stroke: {
curve: 'straight'
},
title: {
text: 'Ransomware',
align: 'center'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
xaxis: {
type: 'category',
tickPlacement: 'between',
categories: xCat,
},
yaxis: {
min: 0,
max: 1000,
labels: {
formatter: function (value) {
return value + "K";
}
},
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var i = 0;
var dataInterval = setInterval(function () {
totalIncidentD[i] = totalIncident[i];
ransomDemandsD[i] = ransomDemands[i];
forensicsCostsD[i] = forensicsCosts[i];
chart.updateSeries([{
name: "Total Incident Costs",
data: totalIncidentD
}, {
name: "Ransom Demands",
data: ransomDemandsD
}, {
name: "Forensics Costs",
data: forensicsCostsD
}])
i = i + 1;
if (i === xCat.length) clearInterval(dataInterval)
}, 1000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.apexcharts-canvas {
margin: auto;
}
</style>
</head>
<body>
<div id="chart"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>
I am using highcharts and facing the issue.
In my data I have different ratings for different quarters and I am trying
to show all "ratings" on xaxis for all "quarters".
enter code here
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
var response = {
"KBByRating":[
{
"FiscalQtr":"FY2018 Q4",
"FiscalQtrData":[
{
"Rating":"2.5",
"Count":1
},
{
"Rating":"4.0",
"Count":1
},
{
"Rating":"5.0",
"Count":1
}
]
},
{
"FiscalQtr":"FY2018 Q3",
"FiscalQtrData":[
{
"Rating":"2.33",
"Count":1
},
{
"Rating":"1.0",
"Count":3
},
{
"Rating":"5.0",
"Count":17
}
]
},
{
"FiscalQtr":"FY2018 Q2",
"FiscalQtrData":[
{
"Rating":"3.67",
"Count":1
},
{
"Rating":"5.0",
"Count":8
}
]
}
]
};
var ratings=[],ratingsCount=[],periodRatingData=[];
_.each(response.KBByRating, function(val){
ratings=[];
ratingsCount=[];
_.each(val.FiscalQtrData, function(main){
ratings.push(main.Rating),
ratingsCount.push(main.Count);
});
periodRatingData.push({
name: val.FiscalQtr,
data:ratingsCount
});
});
Highcharts.chart('container',
{
chart:{
type: 'column'
},
title: {
text: 'Knowledge Articles Published By Rating'
},
subtitle: {
text: ''
},
colors: ['#005073','#64e572','#24cbe5'],
xAxis: {
categories:ratings,
labels: {
formatter: function(){
var str = this.value;
if(str < 0){
str = '';
}
return str;
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'middle'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '' +'Count'+ ': ' + this.y;
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth: 40,
groupPadding: '.05',
shadow: false
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span>';
}
},
credits: {
enabled: true
},
exporting: {
enabled: true
},
series: periodRatingData
});
but I am getting only few ratings which is not correct. Could you please
help out to fix this.
Here I have created live example on jsfiddle:
https://jsfiddle.net/ugyef9ju/
I have the following code to generate a pie chart. I am calling an external json file to generate the pie chart.
For some reason. it not generating the pie chart. what am i missing or doing wrong?
Here is my code below:
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
// options.xAxis.categories = json[0]['data'];
// options.series[0] = json[1];
// options.series[1] = json[2];
// chart = new Highcharts.Chart(options);
// debugger
console.log(json);
alert(json);
options.series[0].data = json
chart = new Highcharts.Chart(options);
});
}, 0)
</script>
JSON - pie.json
[{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
Here we are.The pie json data need a transfrom as I show you below:
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{type:"pie"}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
console.log(json);
alert(json);
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}, 0);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body></html>
pie..json
[{
"name": "Microsoft Internet Explorer",
"y": 56.33
}, {
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
}, {
"name":"Firefox",
"y": 10.38
}, {
"name":"Safari",
"y": 4.77
}, {
"name":"Opera",
"y": 0.91
}, {
"name": "Proprietary or Undetectable",
"y": 0.2
}]
Highcharts drilldown is not working . Scenario is From graph, if i click any point It needs to show another graph using avgTimes.testIds (check below json). But i am unable to get testId value when i click on the point.
Please check Json and Javascript for reference .
"this.series.data.indexOf( this.point )" code is not working to get the indexValue, it is giving "undefined" as response.Please check javascript code
Response json Json:
{
"testid": {
"name": "testId",
"data": [
208,
207,
206,
205,
202
]
},
"xaxis": {
"xaxis": "xaxis",
"data": [
"2016/03/21 01:50:04",
"2016/03/20 04:56:20",
"2016/03/20 04:41:56",
"2016/03/18 11:09:53",
"2016/03/18 09:33:15"
]
},
"avgTimes": {
"name": "avgTime",
"units": "ms",
"data": [
1894,
3141,
44966,
1792,
22929
],
"testIds": [
208,
207,
206,
205,
202
]
}
}
Below is the javascript which i am using
var options;
var chart;
$(document).ready(function() {
init();
});
function init() {
$('#back_btn').hide();
options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'<b>'+ this.x +': '+ this.y+' '+'</b><br/>'+
'TestId: '+this.series.options.testIds[this.series.data.indexOf(this.point)];
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
//document.write(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$.getJSON("http://localhost:8080/reports/graph/transaction?testId="+this.series.options.testIds[this.series.data.indexOf( this.point )], function(json){
options.xAxis.categories = json.xAxis.xaxisList;
options.series[0] = json.avgTimes;
options.series[1] = json.tps;
options.series[2] = json.minTimes;
options.series[3] = json.maxTimes;
options.xAxis.labels = {
formatter: function() {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
}
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function(json){
options.xAxis.categories = json.xaxis.data;
options.series[0]= json.avgTimes;
//options.series[1]=json.testid;
//options.series[1].extra= json.testid;
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Dynamic Drill Down in Highcharts</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="date.js"></script>
<script src="dynamicChats.js"></script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<strong><div id="dateDisplay">2013-02</div></strong>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Back
</body>
</html>
this.point is undefined that's why you can't retrieve the index from this.series.data array. It seems that when a point is clicked on the graph, this refers to the point object itself in the click handler.
You should replace the line bellow :
this.series.options.testIds[this.series.data.indexOf(this.point)]
by this one :
this.series.options.testIds[this.series.data.indexOf(this)]
I also moved the creation of the object options inside the getJSON callback function :
<script>
var chart;
$(document).ready(function () {
init();
});
function init() {
$('#back_btn').hide();
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function (json) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function () {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
'<b>' + this.x + ': ' + this.y + ' ' + '</b><br/>' +
'TestId: ' + this.series.options.testIds[this.series.data.indexOf(this.point)];
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function () {
//document.write(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf(this.point)]);
$.getJSON("http://localhost:8080/reports/graph/transaction?testId=" + this.series.options.testIds[this.series.data.indexOf(this)], function (json) {
options.xAxis.categories = json.xAxis.xaxisList;
options.series[0] = json.avgTimes;
options.series[1] = json.tps;
options.series[2] = json.minTimes;
options.series[3] = json.maxTimes;
options.xAxis.labels = {
formatter: function () {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
};
options.xAxis.categories = json.xaxis.data;
options.series[0] = json.avgTimes;
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
</script>
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>