Highcharts Treemap Drilldown/drillup issue - highcharts

I am trying to capture drill up/down event when using HighCharts treemap as in example http://jsfiddle.net/ghh1x7vt/1/
I will have to dynamically set the data label size/color as i drill down/up. Can someone help me doing this?
$(function () {
var data = {
"Eastern Mediterranean": {
"Egypt": {
"Communicable & other Group I": "74.3",
"Noncommunicable diseases": "781.7",
"Injuries": "33.5"
},
"South Sudan": {
"Injuries": "143.4",
"Communicable & other Group I": "831.3",
"Noncommunicable diseases": "623.4"
},
"Sudan": {
"Injuries": "133.6",
"Noncommunicable diseases": "551.0",
"Communicable & other Group I": "495.0"
},
"Libya": {
"Injuries": "62.8",
"Noncommunicable diseases": "550.0",
"Communicable & other Group I": "52.6"
},
"Jordan": {
"Noncommunicable diseases": "640.3",
"Injuries": "53.5",
"Communicable & other Group I": "52.5"
},
"Pakistan": {
"Communicable & other Group I": "296.0",
"Noncommunicable diseases": "669.3",
"Injuries": "98.7"
},
"Djibouti": {
"Noncommunicable diseases": "631.1",
"Communicable & other Group I": "626.0",
"Injuries": "106.0"
},
"Syrian Arab Republic": {
"Communicable & other Group I": "41.0",
"Injuries": "308.0",
"Noncommunicable diseases": "572.7"
},
"Morocco": {
"Noncommunicable diseases": "707.7",
"Communicable & other Group I": "131.5",
"Injuries": "47.0"
},
"Yemen": {
"Communicable & other Group I": "515.0",
"Noncommunicable diseases": "626.9",
"Injuries": "84.3"
},
"Bahrain": {
"Injuries": "33.5",
"Noncommunicable diseases": "505.7",
"Communicable & other Group I": "48.5"
},
"United Arab Emirates": {
"Noncommunicable diseases": "546.8",
"Injuries": "31.5",
"Communicable & other Group I": "35.6"
},
"Lebanon": {
"Noncommunicable diseases": "384.6",
"Injuries": "40.6",
"Communicable & other Group I": "30.5"
},
"Saudi Arabia": {
"Noncommunicable diseases": "549.4",
"Injuries": "41.1",
"Communicable & other Group I": "71.3"
},
"Iran (Islamic Republic of)": {
"Injuries": "74.9",
"Communicable & other Group I": "56.2",
"Noncommunicable diseases": "569.3"
},
"Iraq": {
"Communicable & other Group I": "87.0",
"Noncommunicable diseases": "715.5",
"Injuries": "128.5"
},
"Qatar": {
"Communicable & other Group I": "28.3",
"Injuries": "41.0",
"Noncommunicable diseases": "407.0"
},
"Afghanistan": {
"Communicable & other Group I": "362.7",
"Injuries": "169.2",
"Noncommunicable diseases": "846.3"
},
"Somalia": {
"Noncommunicable diseases": "550.7",
"Communicable & other Group I": "927.2",
"Injuries": "188.5"
},
"Kuwait": {
"Communicable & other Group I": "82.5",
"Injuries": "25.4",
"Noncommunicable diseases": "406.3"
},
"Oman": {
"Injuries": "52.8",
"Noncommunicable diseases": "478.2",
"Communicable & other Group I": "84.2"
},
"Tunisia": {
"Noncommunicable diseases": "509.3",
"Communicable & other Group I": "65.0",
"Injuries": "39.1"
}
}
};
var points = [],
region_p,
region_val,
region_i,
country_p,
country_i,
cause_p,
cause_i,
cause_name = [];
cause_name['Communicable & other Group I'] = 'Communicable diseases';
cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
cause_name['Injuries'] = 'Injuries';
region_i = 0;
for (var region in data) {
region_val = 0;
region_p = {
id: "id_" + region_i,
name: region,
color: Highcharts.getOptions().colors[region_i]
};
country_i = 0;
for (var country in data[region]) {
country_p = {
id: region_p.id + "_" + country_i,
name: country,
parent: region_p.id
};
points.push(country_p);
cause_i = 0;
for (var cause in data[region][country]) {
cause_p = {
id: country_p.id + "_" + cause_i,
name: cause_name[cause],
parent: country_p.id,
value: Math.round(+data[region][country][cause])
};
region_val += cause_p.value;
points.push(cause_p);
cause_i++;
}
country_i++;
}
region_p.value = Math.round(region_val / country_i);
points.push(region_p);
region_i++;
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
redraw: function () {
var rootNode = this.series[0].rootNode;
if (rootNode === '') {
alert(' NO DRILLED - LEVEL 0 ')
} else {
if (rootNode.split('_').length == 2) {
alert(' DRILLED - LEVEL 1');
} else if (rootNode.split('_').length >= 2) {
alert(' DRILLED - LEVEL 2');
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}],
subtitle: {
text: 'Click points to drill down. Source: WHO.'
},
title: {
text: 'Global Mortality Rate 2012, per 100 000 population'
}
});
});

Related

Highchart hide a category and rescale is messing

I'm trying to draw a chart where categories can be filtered, and it's working pretty nicely, I used this to do it.
Problem is : my last category is the total of the others, and so is taller. I want that when the "total" checkbox is unchecheck the chart resize, but it doesn't and resize only if I also uncheck the "class7" checkbox.
you can try it here : https://jsfiddle.net/4rfdgvum/
var chart=null;
$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'column',
shadow: true
},
title: {
text: 'My Title'
},
xAxis: {
categories: [{"class":"class1","name":"cat1"},{"class":"class2","name":"cat2"},{"class":"class3","name":"cat3"},{"class":"class4","name":"cat4"},{"class":"class5","name":"cat5"},{"class":"class6","name":"cat6"},{"class":"class7","name":"cat7"},{'class': 'total','name':'total'}],
labels: {
formatter: function() {
return this.value.name;
},
useHTML: true
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Numbers'
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x.name + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function(){
return Highcharts.numberFormat(this.percentage,0) + '%';
}
}
}
},
series: [{
name: 'Ok',
color: 'green',
stack: 'a',
data: [
223,174,139,27,17,6,3,589 ]
},
{
name: 'Not Ok',
color: 'red',
stack: 'a',
data: [
21,29,26,14,15,11,11,127 ]
},
{
name: 'Partialy Ok',
color:'orange',
stack: 'a',
data: [
5,11,25,1,1,3,0,46 ]
},
{
name: 'Not usable',
color:'grey',
stack: 'a',
data: [
20,70,67,160,163,170,168,818 ]
},
{
name: 'Not done',
color:'brown',
stack: 'a',
data: [
173,158,185,240,246,252,260,1514 ]
}
]
}, function() {
$('input[type=checkbox]').bind('click', function() {
togglePointsByClass(this.value, $(this).is(':checked'), chart)
});
});
var visibleArr = [0,1,2,3,4,5,6,7];
function togglePointsByClass(className, shouldShow, chart) {
var isChartDirty = false;
if (shouldShow) {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className) {
visibleArr.push(i);
}
});
} else {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className && visibleArr.indexOf(i) > -1) {
visibleArr.splice(visibleArr.indexOf(i), 1);
}
});
}
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
})
}
}
$('#container').highcharts().redraw();
});
Thanks
You can use axis.setExtremes() for setting max of the yAxis.
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
}, false, false);
const max = visibleArr.reduce((a, b) => Math.max(chart.yAxis[0].stacks.columna[b].total, a), -Infinity)
chart.yAxis[0].setExtremes(0, max);
}
example: https://jsfiddle.net/mw7euo1a/

Update Tooltip onclick using customButton Highcharts

How can i update my tooltip when i clicked on toggle button?
I tried to add this (this.tooltip[0].update) on my button.toggle.onclickfunction():-
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000000).toFixed(2), 0, ',');
}
},
title: {
text: '<b>RM Billion</b>',
}
});
this.tooltip[0].update({
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br> ' + this.series.name + ' : RM <b>' + Highcharts.numberFormat((this.y / 1000000).toFixed(2), 0, ',') + '</b>';
}
}
});
}
I thought by adding this.tooltip[0].update would change/update the tooltip as coded above, but nothing change. How can i do this?
Below are my current codes:-
Highcharts.chart('containerImport', {
title: {
text: 'Imports from ' + dataTitle['titleName'] + ', ' + dataYear[0] + ' - ' + dataYear[dataYear.length - 1],
align: 'left',
margin: 50
},
subtitle: {
text: '',
x: -20
},
lang: {
toggleButtonTitle: 'Currency Format',
contextButtonTitle: 'Print Chart'
},
xAxis: {
title: {
text: '<b>YEAR</b>',
align: 'high'
},
categories: dataYear
},
yAxis: {
title: {
text: '<b>RM Million</b>',
style: {
fontFamily: 'Arial'
},
align:'high',
rotation:0,
y: -13,
},
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000).toFixed(2), 0, ',');
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br> ' + this.series.name + ' : RM <b>' + Highcharts.numberFormat((this.y / 1000000).toFixed(2), 0, ',') + '</b>';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: dataTitle['titleName'],
data: totalDataTrade
}],
exporting: {
enabled: true,
buttons: {
contextButton: {
_titleKey: 'contextButtonTitle',
},
toggle: {
_titleKey: 'toggleButtonTitle',
text: '$',
menuItems: [{
text: 'Billion',
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000000).toFixed(2), 0, ',');
}
},
title: {
text: '<b>RM Billion</b>',
}
});
}
}, {
text: 'Million',
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000).toFixed(2), 0, ',');
}
},
title: {
text: '<b>RM Million</b>',
}
});
}
}, {
text: 'Hundred Thousand',
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 100000).toFixed(2), 0, ',');
// return Highcharts.numberFormat((this.value / 100000), 2, '.');
}
},
title: {
text: '<b>RM Hundred Thousand</b>',
}
});
}
}]
},
}
}
});
Any kind of helps would be appreciated! Thank you in advanced.
Move the tooltip property inside the series and then use Series.update()
onclick: function() {
this.series[0].update({
tooltip: {
pointFormat: 'tooltip changed'
}
});
}
example: https://jsfiddle.net/r4dfhkgy/

Show only two axis values in highcharts

I would like to show just the 2GB and the 4GB values (just 2 values) in the y-axis of this chart (see jsFiddle):
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Size']
},
yAxis: {
min: 0,
max: 4294967296,
labels: {
formatter: function() {
var maxElement = this.axis.max;
var kb = 1024, mb = 1048576, gb = 1073741824;
if (maxElement > gb) {
return (this.value / gb).toFixed(1) + " GB";
} else if (maxElement > mb) {
return (this.value / mb).toFixed(1) + " MB";
} else if (maxElement > kb) {
return (this.value / kb).toFixed(1) + " KB";
} else {
return (this.value) + " B";
}
}
},
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + filesize(this.y);
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Versioned trees',
data: [94371840]
}, {
name: 'Metadata',
data: [115343360]
}, {
name: 'Data',
data: [1395864371.2]
}]
});
});
Is it possible?
You can use the tickPositions property, like this:
tickPositions:[0, 1073741824 * 2, 1073741824 * 4]
It doesn't appear to respect the min:0 if you don't include 0, but you can hide the 0 label by adding:
showFirstLabel: false
Updated Fiddle:
http://jsfiddle.net/jlbriggs/kv684von/2/
Reference:
http://api.highcharts.com/highcharts#yAxis.tickPositions

show alternate colors while doing datagrouping of area chart in highcharts

I am new to javascript and so to highcharts. i am stuck in a task for long time.
I have created a highstock chart using highchart API. i am getting data using ajax call and display it in highstock chart. All works fine up till here. My page has option to recreate the chart with showing data in weekly, monthly and quarterly form. For this purpose i used datagrouping on my area chart and here the problem comes up.Now what i want is if user select, say weekly period, then all alternate weekly period areas should have opposite colors, for example, if 1st is dark grey then 2nd should be light grey and then 3rd again dark grey and so on.
2nd thing i want gaps between every group data.
Note that i have multiple series in the chart.
Is there any way to do this. Can any one please help me.
here is my code
function line_chart() {
$.getJSON('http://<?php echo $location; ?>/js/highcharts/server_processing/issuer/tbldailyprice2.php?' + ticker, function (data) {
// Create the chatu b ajanrt
mychart = $('#container2').highcharts('StockChart', {
chart: {
events: {
load: function () {
chart = this;
if (period_name == 'default') {
chart.series[0].update({
dataGrouping: {forced: false,
enabled: false,
approximation: '',
units: [['day', [1]]],
}
});
} else if (period_name == 'Quarterly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {forced: true,
approximation: 'sum',
enabled: true,
units: [['month', [3]]],
},
});
} else
if (period_name == 'Monthly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {
approximation: 'sum',
forced: true,
enabled: true,
units: [['month', [1]]],
}
});
} else
if (period_name == 'Weekly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
approximation: 'sum',
dataGrouping: {forced: true,
enabled: true,
approximation: 'sum',
units: [['week', [1]]],
}
});
}
$.getJSON('http://' + closeperiodsurl, function (newdata) {
chart.series[0].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=buy", function (newdata) {
chart.series[2].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=sell", function (newdata) {
chart.series[3].setData(newdata);
// series.setData(data);
});
}
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
}, tooltip: {
shared: false,
crosshairs: true,
formatter: function () {
var rV = null;
var symbol = '$';
var color;
var company = "?c=<?php echo $_REQUEST["c"] ?>";
var ticker_id = "&t=<?php echo $_REQUEST["t"] ?>";
if (this.series.name == 'Buy' || this.series.name == 'Sell' || this.series.name == 'Periods') {
var date = "&date=" + this.x;
if (this.series.name == 'Buy') {
color = '#0000FF';
} else if (this.series.name == 'Sell') {
color = '#FF0000';
}
$.ajax({
//dataType: "json",
url: '../js/highcharts/server_processing/issuer/trade_summary.php' + company + ticker_id + date,
async: false, // this will stall the tooltip
success: function (ajax) {
rV = ajax;
// converting currency values to symbols
var chek = rV.search("EUR");
var chek1 = rV.search("GBP");
var chek_minus = rV.search("-");
if (chek != -1) {
symbol = '\u00A3';
rV = rV.replace("EUR", "\u00A3");
} else if (chek1 != -1) {
rV = rV.replace("GBP", "\u20AC");
symbol = '\u20AC';
}
var split_text = rV.split('<br/>');
// changing the color of last row of tooltip for +ve and _ve values of net trades
if (chek_minus == -1) {
rV = split_text[0] + '<br/><span style="color:' + color + '">' + split_text[1] + '</span>';
} else {
rV = split_text[0] + '<br/><span style="color:#ff0000">' + split_text[1] + '</span>';
}
}
});
}
if (this.series.name == 'Periods') {
var date = "&date=" + this.x;
var transactions = '';
$.ajax({
//dataType: "json",
url: 'http://' + closeperiodsurl + date + '&action=hover',
async: false, // this will stall the tooltip
success: function (ajax) {
transactions = ajax;
}
});
var period_format = '';
if (period_name == 'Quarterly') {
period_format = period_name;
var s = '';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "1st Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "2nd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + "3rd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + "4th Quarter"
}
period_format = s + " " + Highcharts.dateFormat('%Y', this.x);
} else if (period_name == 'Monthly') {
period_format = Highcharts.dateFormat('%b %Y', new Date(this.x));
} else if (period_name = 'Weekly') {
var s = '';
if (Highcharts.dateFormat('%e', this.x) >= 1 && Highcharts.dateFormat('%e', this.x) <= 7) {
s = s + "1st Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 8 && Highcharts.dateFormat('%e', this.x) <= 14) {
s = s + "2nd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 15 && Highcharts.dateFormat('%e', this.x) <= 21) {
s = s + "3rd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 22 && Highcharts.dateFormat('%e', this.x) <= 28) {
s = s + "4th Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 29 && Highcharts.dateFormat('%e', this.x) <= 31) {
s = s + "5th Week"
}
period_format = s + " " + Highcharts.dateFormat('%b %Y', this.x);
}
return period_format + "<br/>" + transactions + "<br/>" + symbol + numberWithCommas(this.y) + " Repurchased";
} else
return (Highcharts.dateFormat('%e', new Date(this.x)) == '1') ? Highcharts.dateFormat('%est %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '2') ? Highcharts.dateFormat('%end %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '3') ? Highcharts.dateFormat('%erd %b %Y', new Date(this.x)) : Highcharts.dateFormat('%eth %b %Y', new Date(this.x)))) + '<br/>' +
(this.series.name == 'Buy' || this.series.name == 'Sell' ? rV : '');
},
valueDecimals: 2
},
xAxis: {
lineColor: '#000',
lineWidth: 1,
type: 'datetime',
maxZoom: 3600000 * 24 * 30 * 2, // roughly 2 months
//maxZoom: 28 * 24 * 3600000, // fourteen days
maxPadding: 0.05
},
// Y AXIS - PRIMARY
yAxis: [{
//minorTickInterval: 'auto',
lineColor: '#000',
// max: 1000,
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: ''
}
}, {// Secondary yAxis
title: {
text: 'Close Periods',
max: 0.4,
min: 0.3,
gridLineColor: '#FFFFFF',
gridLineWidth: 0,
},
//labels:false,
opposite: true
}],
navigator: {
// hides the plotted line at bottom of the chart
series: {
lineWidth: 0,
marker: {
enabled: false
}
}
},
plotOptions: {
series:{ pointPadding:0,
groupPadding:5,
pointWidth:25
}
},
series: [{
// CLOSE PERIOD
name: '',
maxPointWidth: 90,
color: '#c0c0c0',
yAxis: 1,
type: close_period_chart_type,
lineWidth: 1,
shadow: false,
fillOpacity: '0.85',
data: [],
dataGrouping: {
approximation: '',
enabled: false,
forced: false,
units: [['month', [1]]],
},
}, {
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2,
enabled: true
}
}, {
//BUYS
name: 'Buy',
//unit: '%',
color: '#ffffff',
type: 'scatter',
enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/buy.png)'
},
data: [],
tooltip: {
enabled: true
}
}, {
// SELLS
name: 'Sell',
//unit: '%',
color: '#ffffff',
type: 'scatter',
// enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/sell.png)'
},
data: [],
}],
});
});
}

Highcharts redraw not working with alignTicks

I have updated from version 2.1.6 to 4.0.4 and I have problem with refreshing the alignTicks option.
I start with the property at true and then I set it to false via a button.
From true to false the graph is only updated after a windows resize or if I disable/enable one set of data. From false back to true then it work correctly...
Here an example:
chart = new Highcharts.Chart({
'chart': {
'renderTo': 'graph',
'type': 'line',
'zoomType': 'x',
'alignTicks': true
},
'tooltip': {
'formatter': function () {
var d = new Date(this.x);
return 'Time: <b>' + ('0' + d.getUTCHours()).slice( - 2) + ':' + ('0' + d.getUTCMinutes()).slice( - 2) + ':' + ('0' + d.getUTCSeconds()).slice( - 2) + '</b><br/> Value: <b>' + this.y + '</b>';
}
},
'credits': false,
'title': {
'text': 'Date: 04-11-2014 - Location: Locale'
},
'xAxis': {
'type': 'datetime'
},
'yAxis': [
{
'title': {
'text': 'SK_angle',
'style': {
'color': '#4572A7'
}
},
'labels': {
'style': {
'color': '#4572A7'
}
},
'opposite': false,
'allowDecimals': true
},
{
'title': {
'text': 'EL_angle',
'style': {
'color': '#AA4643'
}
},
'labels': {
'style': {
'color': '#AA4643'
}
},
'opposite': true,
'allowDecimals': true
},
{
'title': {
'text': 'Software Status',
'style': {
'color': '#89A54E'
}
},
'labels': {
'style': {
'color': '#89A54E'
}
},
'opposite': false,
'allowDecimals': false
}
],
'series': [
{
'color': '#4572A7',
'name': 'SK_angle',
'yAxis': 0,
'data': [
[1415064918000,305.89],
[1415064919000,335.0],
[1415064923000,306.05],
]
},
{
'color': '#AA4643',
'name': 'EL_angle',
'yAxis': 1,
'data': [
[1415064918000,37.87],
[1415064919000,37.2],
[1415064923000,37.9],
]
},
{
'color': '#89A54E',
'name': 'Software Status',
'yAxis': 2,
'data': [
[1415064918000,1362],
[1415064919000,1362],
[1415064923000,1256],
]
}
]
});
$('#scaleAlign').click(function() {
if (chart.options.chart.alignTicks) {
chart.options.chart.alignTicks = false;
$('#scaleAlign').attr('value','Align Scale');
}
else {
chart.options.chart.alignTicks = true;
$('#scaleAlign').attr('value','Unalign Scale');
}
chart.isDirtyBox = true;
chart.redraw();
});
http://jsfiddle.net/04Lffe0r/3/
Update the code like this: http://jsfiddle.net/04Lffe0r/4/
By adding this:
chart.series[0].isDirty = true;
Because the series should be set as dirty for the chart to redraw.

Resources