Set enable/disable 3D mode with Highcharts - javascript

I made a form to change values dinamically in my chart. I can change title, subtitle, etc, but... How can I change to set enabled or disabled 3D mode??
$(document).ready(function () {
//Title inputText
$('#gra_title').blur(function(){
chart.setTitle({ text: $('#gra_title').attr("value") });
});
//Subtitle inputText
$('#gra_subtitle').blur(function(){
chart.setTitle(null, { text: $('#gra_subtitle').attr("value") });
});
//Credits checkbox
$('#gra_credits_visible').click(function () {
if ($('#gra_credits_visible').is(':checked')){
chart.credits.show();
}else{
chart.credits.hide();
}
});
......... //More events to change chart
//3D checkbox - MY PERSONAL BUG
$('#gra_3d_visible').click(function () {
if ($('#gra_3d_visible').is(':checked')){
chart.options.chart.options3d.enabled = true;
}else{
chart.options.chart.options3d.enabled = false;
}
chart.redraw();
// return TRUE or FALSE, but don't change 3D/2D mode
alert(chart.options.chart.options3d.enabled);
});
});
This is my chart:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginRight: 0,
events: {
load: function () {
this.credits.element.onclick = function () {
window.open('http://www.url.com', '_blank');
}
}
},
marginTop: 80,
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 90
}
},
plotOptions: {
column: {
depth: 90
}
},
credits: {
enabled: true,
text: 'MyWeb.com',
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '10px'
}
},
title: {
text: 'Población Mundial'
},
subtitle: {
text: 'Fuente: Wikipedia.org'
},
xAxis: {
title: {
text: 'Continentes'
},
categories: ['Africa', 'América', 'Asia', 'Europa', 'Oceanía']
},
yAxis: {
title: {
text: 'Población (millones)'
},
},
series: [{
name: 'Año 1800',
data: [107, 31, 635, 203, 2]
}]
});
I've looking for in API Documentation but I didn't find nothing.

Unfortunately you need destroy and create chart, update option for 3d is not available.

Related

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

html button not firing event to the required graph container firing to different graph in Highchart JS

i have 2 graph in 2 different div(container1,container2) and have two set of buttons. both set of buttons triggering to the graph 2 only.when 1 click buttons of graph 1 it should change the graph 1 and when i click graph 2 buttons it should change the graph 2. but graph 1 and graph 2 buttons both are triggering to the graph 2 only.
JS fiddle code http://jsfiddle.net/h5t4c8hj/7/
code
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
},
subtitle: {
text: 'plain'
},
xAxis: {
categories: ['Bin1s', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
},
series: [{
type: 'column',
colorByPoint: false,
data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
showInLegend: false
}],
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
}, function(chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
$('#plain').click(function() {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
});
$('#inverted').click(function() {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'inverted'
}
});
});
$('#polar').click(function() {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
Yuu have named the two char with the same name
You must use a chart1 for second char and refer to this in update
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart1.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
http://jsfiddle.net/6h9o5m2w/
It's because they have the same variable name. Consider naming them properly
// first chart
var chart1 = Highcharts.chart('container'
// second chart
var chart2 = Highcharts.chart('container1'
then trigger the events you wanted using their respective variables
hope that helps
You declared both charts over the same variable chart. So the latest declared chart overrides the first one. So:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
Becomes:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
You also targeted the same variable on each clickevent:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart.update({
...
});
});
Becomes:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart1.update({
...
});
});
Here is your working fiddle

Highchart: How could I set animation duration in case of adding data points to bar/column chart?

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.

Highchart: why can I not set the duration in this case?

Relevant code is here: http://jsfiddle.net/e0qxfLtt/5/
$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
setTimeout(function(){
if(index === 1){
$('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x,y]);
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
});
I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
However, that chart seems to animate over an instant despite the setting.
Could it due to the setTimeout functions?
If so, is there any way around that?

How can i call java script function by clicking x Axis label on Highchart

i will be thankful to you all if you can tell me how to call java script function clicking by xAxis label on Highchart.
belowe here there's my code.
thanks in advance.
var options = {
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'rgba(100, 100, 100, 0.2)',
width: 1500,
height: 800,
...
},
title: {
....
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
....
},
yAxis:{
...
},
labels: {
style: {
color: 'black',
fontWeight: 'bold'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
....
},
series: []
};
Here how i call my
$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});
PS: I found this way to call function by clicking on labels but it doesn't work in my case
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'bar',
},
legend: {
enabled: false
},
xAxis: {
categories: ['chr1','chr2','chr3','chr4'],
labels: {
formatter: function() {
return '<a href="http://www.w3schools.com">'+
this.value +'</a>';
}
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5]
}]
},function(chart){
$.each(chart.xAxis[0].ticks,function(i,tick){
tick.label.on('click',function(){
alert(tick.pos);
});
});
});
});
Jsfiddle
This is line where you create labels:
return '<a href="http://www.w3schools.com">'+
this.value +'</a>';
So you can simply change to this:
return '<a href="#" onclick="myFun()">'+
this.value +'</a>';
And should work.

Categories