highcharts correct json input - json

Question

UPDTAED:Now with the below code, the json is parsing correctly ,
But the columns are not displayed on the initial load, if i put the cursor over i can see the tooltip displaying the series name and value. However, if i re-size the browser window the columns appear. i tried adding chart.redraw(); after the updatedChart(); but it dosent help my div is as below
<div id="container" style="min-width: 400px ; height: 650; margin:0 auto"></div>
Any ideas please? Also, i cannot re-produce this problem on jsfiddle and have tested this on safari,chrome and firefox (all showing this strange behavior)
var chart;
options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series:
[]
};
$(document).ready(function() {
chart= new Highcharts.Chart(options)
console.log("calling update chart");
updateChart();
});
function updateChart() {
$.ajax({
type: "GET",
url: "test.json",
async: false,
dataType: "json",
success: function(data){
console.log(data);
var i=0;
$.each(data,function(index,item){
console.log(data.Chart1[index]);
console.log("i value is "+i);
chart.addSeries(data.Chart1[index]);
i++;
});
}
});
}
}
my json input file is below
[
{
name: 'name1',
y: [32.6,16.6,1.5]
}, {
name: 'name2',
y: [6.7,0.2,0.6]
}, {
name: 'name3',
y: [1,3.7,0.7]
}, {
name: 'name4',
y: [20.3,8.8,9.5]
},{
name: 'name5',
y: [21.5,10,7.2]
}, {
name: 'name6',
y: [1.4,1.8,3.7]
}, {
name: 'name7',
y: [8.1,0,0]
}, {
name: 'name8',
y: [28.9,8.9,6.6]
}
]

Answer 1

Edited:
var chart = null,
options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: []
};
$(document).ready(function() {
updateChart();
});
function updateChart() {
$.getJSON('test.json', function(data) {
// check if the chart's already rendered
if (!chart) {
// if it's not rendered you have to update your options
options.series = data;
chart = new Highcharts.Chart(options);
} else {
// if it's rendered you have to update dinamically
jQuery.each(data, function(seriePos, serie) {
chart.series[seriePos].setData(serie, false);
});
chart.redraw();
}
});
}
Fiddle: LINK