Develop Reference

Switch between chart and datatable in highcharts

im working on switch between the highchart, i have written some code but it doesnt work when i click on switch above the particular chart should replace the chart with datatable.
JsFiddle Link: jsfiddle.net/GnanaSagar/psnh87ud/61/
Html file with js code used:
function switchToDataTable(id) {
var chart = $('#' + id).Highchart(),
chartDiv = $(chart.renderTo);
if (chartDiv.is(":visible")) {
chartDiv.hide();
if (!chart.dataTableDiv) {
chart.update({
exporting: {
showTable: true
}
});
} else {
$(chart.dataTableDiv).show();
}
} else {
chartDiv.show();
$(chart.dataTableDiv).hide();
}
}
Highcharts.chart('chart1', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
Highcharts.chart('chart2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
legendType: 'point',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
Highcharts.chart('chart3', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
legendType: 'point',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.0.2/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<button onclick="switchToDataTable('chart1')">Switch</button>
</div>
<div class="panel-body">
<div id="chart1" style="height: 342px;"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<button onclick="switchToDataTable('chart2')">Switch</button>
<div class="panel-body">
<div id="chart2" style="height: 342px;"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<button onclick="switchToDataTable('chart3')">Switch</button>
<div class="panel-body">
<div id="chart3" style="height: 342px;"></div>
</div>
</div>
</div>
im working on switch between the highchart, i have wrote some code but it didnt working when i click on switch above the perticular chart should replace the chart with datatable.

The way you're fetching the chart is wrong.
You should replace this:
var chart = $('#'+id).Highchart()
With this:
var chart = $("#" + id).highcharts();

How to Control Padding Space Between X Axis Data Points

I am trying to control the spacing between, in this case, columns on a chart. I need access to the space between each bar and the space between each set of bars (the big white space between them in the picture). I have spent a bunch of time reading other posts and the documentation but for the life of me I can't find exactly what I am looking for.
Here is the jsFiddle of this example. It's a mash of things, being used for a POC.
https://jsfiddle.net/ek6za4m7/
I have already tried this
xAxis: {
labels: {
padding: 1
}
}

You can use
groupPadding:0.4
property of column to increase or decrese the gap between group of columns.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
groupPadding:0.4
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.groupPadding

Highcharts Xaxis remove old data and shift left

I'm very new to any type of programming language but have had some pretty great luck finding what I needed to get a start for the project I'm working on. I am trying to use Highcharts to generate data visually for end users from a SQL database. I need my xAxis to be labeled for up to a year (January 2018 - January 2019, February 2018 - February 2019 and so on) to shift left and "hide" or "crop" old data from the chart per month when new monthly data is entered into SQL.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan 2018',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
'Jan 2019'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 90]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3, 90]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2, 90]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1, 90]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
So at the moment I have it looking like the above, when February 2019 is added it should shift January 2018 off the chart and the first set of data should be February 2018, through February 2019.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Feb 2018',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
'Jan',
'February 2019'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 90]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 , 90]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2, 90]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1, 90]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Editing the months in and out manually is what I'm doing at the moment - similar to the examples above, would be nice if it's possible to just shift it left automatically. Thanks in advance!

You can use array with month names as point names. The array should change its order after each get data.
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
year = 2018;
// Create the chart
Highcharts.chart('container', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
xAxis = this.xAxis[0];
setInterval(function() {
months.splice(0, 1);
months.push(months[0]);
var name = months[months.length - 1];
if (months[months.length - 1] == 'Jan') {
year++;
name = months[months.length - 1] + " " + year;
}
var y = Math.round(Math.random() * 100);
series.addPoint({
y: y,
name: name
}, true, true, false);
}, 1000);
}
}
},
xAxis: {
uniqueNames: false,
type: "category"
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
i;
for (i = 0; i <= 12; i++) {
if (i == 0) {
name = months[i] + " " + year
} else if (i == 12) {
year++;
name = months[i] + " " + year
} else {
name = months[i]
}
data.push({
y: Math.round(Math.random() * 100),
name: name
});
}
return data;
}())
}]
});
API Reference:
https://api.highcharts.com/highcharts/series.line.data.name
https://api.highcharts.com/highcharts/xAxis.uniqueNames
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
Live example: https://jsfiddle.net/BlackLabel/2ur6fyn4/

Redraw same highchart

I am working with highcharts with multiple bars.. What I want is that i replicate that loading effect of the chart on a specific button click... I tried the following code
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
function redrawing()
{
$('#container').highcharts().redraw();
}
but this does not work. I dont wanna change any data or anything in the chart. All i want is that it reloads on my button click.

The suggested approach is to destroy and then re-create the chart:
http://forum.highcharts.com/highcharts-usage/animation-on-redraw-t8636/#p93199
Here's a fiddle showing this working:
http://jsfiddle.net/p7xerxh0/1/
function redraw() {
$('#container').highcharts().destroy();
createChart(); // wrap your creation code in a function and call it again
}

I prepared you a demo which allows to "run start animation again" and stop/pause.
var H = Highcharts,
c = $('#container').highcharts(),
chart = c;
H.Series.prototype.afterAnimate = function() {};
function reAnimate(fromStart) {
// store animation:
var seriesAnimate = H.Series.prototype.animate;
var columnAnimate = H.seriesTypes.column.prototype.animate;
var pieAnimate = H.seriesTypes.pie.prototype.animate;
// run animation again: tested with line chart only
H.each(c.series, function (s) {
if (animation && !isObject(animation)) {
animation = defaultPlotOptions[series.type].animation;
}
var animation = s.options.animation,
clipBox = s.clipBox || c.clipBox,
sharedClipKey = ['_sharedClip', animation.duration, animation.easing, clipBox.height].join(','),
clipRect = c[sharedClipKey],
markerClipRect = c[sharedClipKey + 'm'];
if (fromStart) {
if (clipRect) {
clipRect.attr({
width: 0
});
}
if (markerClipRect) {
markerClipRect.attr({
width: 0
});
}
}
s.animate = s.type == 'pie' ? pieAnimate : (s.type == 'column' ? columnAnimate : seriesAnimate);
//s.animate(true);
s.animate();
});
}
function isObject(obj) {
return obj && typeof obj === 'object';
}
Example: http://jsfiddle.net/j86jkfvj/67/

Add category in HighCharts

How can I add a new category with data in basic column chart in highcharts. (sample fiddle and code below) Add an other category say 2013 after dec and add all 4 series data with say 50 in that.
Add another series to the newly added category with a value of 60 but it should not appear in previous categories.
I want to do it dynamically after chart is drawn in some function
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});

To add new categories, you need to use chart.xAxis[0].setCategories(array) where array contains all categories – old and new ones, not only new.
To add new series use chart.addSeries(options), and for options you should have data: [ [categoryIndex, value] ] – that will add one point for a specific category.
References:
setCategories
addSeries

Add 2013 to xAxis.categories, then add 50 to the end of each series.data
Add a new serie f and give with [0, 0, ..., 60] as data
The chart is already "dynamic" (call $('#container').highcharts(options); to draw
Working fiddle

Please have a look at http://jsfiddle.net/VYDDH/
I did changes at
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
'2013'
]
},
and
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,50]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3,50]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2,50]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1,50]
}]
Are you trying to get this this?