How to Control Padding Space Between X Axis Data Points - javascript

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

Related

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/

Want to hide column having 0 value in Highchart Basic Column chart

I am trying to hide column having zero value and more than one series. Giving null is not working for me as it is giving space in between which I don't want. As example of my data please refer the link. I am having similar kind of data.
Example of data : http://jsfiddle.net/7dgd3aa7/1/
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: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 0, 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, 0, 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, 0, 51.2]
}, {
name: 'Berlin',
data: [42.4, 0, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 0, 46.8, 51.1]
}]
});

This look and behavior can be achieved by disabling grouping, creating an individual series for every point and applying pointPlacement to them. pointPlacement can be used only for series objects - that's the reason of this decomposition.
Here's a code that'll do it automatically:
load: function() {
var newSeriesArr = [],
chart = this,
groupedSeries = {},
pointOffset;
// create a new series for each point
for (var i = chart.series.length - 1; i >= 0; i--) {
var series = chart.series[i];
var pointsInSeries = series.points.length;
for (var j = pointsInSeries - 1; j >= 0; j--) {
var point = series.points[j];
// omit the point if its y value equals to 0
if (!point.y) {
continue;
}
// make sure that x property of each point is initialized
point.options.x = point.x;
var newSeriesOptions = {
data: [point.options],
// move relevant options from the original series
color: series.color,
name: series.name,
// linking series items in legend
linkedTo: series.options.id
};
if (!groupedSeries[point.x]) {
// create group
groupedSeries[point.x] = [];
}
// create series and assign it to group
groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));
if (groupedSeries[point.x].length > maxGroupedColumns) {
// update max grouped columns number
maxGroupedColumns = groupedSeries[point.x].length;
}
point.remove(false);
}
//series.remove(false);
series.setData([]);
}
// handle pointPlacement for each series
pointOffset = 1 / maxGroupedColumns;
for (var x in groupedSeries) {
var group = groupedSeries[x];
group.forEach(function(series, index) {
series.update({
pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
}, false);
});
}
chart.redraw();
}
Live demo: http://jsfiddle.net/BlackLabel/1czqor6m/

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/

No image displayed with highcharts

I am using this code to generate the graph, But when I run the same, I get no image on my brwoser. I tested the code on IE, chrome and firefox.
CODE
<!DOCTYPE html>
<html>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js">
$(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]
}]
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input type = "button" name="submit" value="Generate">
<button id="highcharts">Click me</button>
</body>
</html>
What is wrong with the code?
Please guide.

you need to close }); and also close <script> properly (../exporting.js"> </script>), check full source
You also need to add jquery plugin.
<!DOCTYPE html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"> </script>
<script>
$(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]
}]
});
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Here is fiddle

I've got a working fiddle here. To get it working:
Include Jquery: <script src="//code.jquery.com/jquery-1.9.1.js"></script>
Add a missing: });

There was incomplete js code at the end. function started ("$(function () {") must be completed with "});". You also need to add jquery plugin.
$(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]
}]
});
});
try this out http://jsfiddle.net/zZ9e2/

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?

Categories

Resources