I need to use Highcharts for one of my recent projects to show the bar chart results.
Below is an example of how to set it up to create a simple bar chart and set the json data :
var result = $.parseJSON(resultString);
var data = result.resultData.data;
// console.log ('resultString :: '+resultString);
if (data != undefined)
{
var chartTotalData= [ ];
var chartDeleteData= [ ];
// use underscore to extract the names label
// http://underscorejs.org/ : Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming
var categories = _.pluck(data, 'indexName');
// console.log ('categories :: '+categories);
categories :: ISSUE,MESSAGE,NEWS,REDMINE,TEST,WIKI
for(var i = 0 ; i < data.length ; i++ )
{
var dataOne = data[i];
chartTotalData.push({y: parseInt(dataOne.docCount) , color: 'red' });
chartDeleteData.push({y: parseInt(dataOne.deleteCount) , color: 'blue' });
}
// order important
loadBarChart(categories);
var barChart = $('#container_bar').highcharts();
barChart.series[0].setData(chartTotalData);
barChart.series[1].setData(chartDeleteData);
function loadBarChart(categories)
{
$('#container_bar').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: categories,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [
{ data : {} , name : 'TOTAL' , yAxis: 0},
{ data : {} , name : 'DELETE' , yAxis: 0},
]
});
}
댓글 없음:
댓글 쓰기