전체 페이지뷰

2013년 9월 11일 수요일

highchart bar chart json data


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);

resultString :: {"resultData":{"data":[{"deleteCount":87874,"docCount":87874,"indexName":"ISSUE"},{"deleteCount":2134,"docCount":2134,"indexName":"MESSAGE"},{"deleteCount":255,"docCount":255,"indexName":"NEWS"},{"deleteCount":1094,"docCount":1094,"indexName":"REDMINE"},{"deleteCount":3382,"docCount":3382,"indexName":"TEST"},{"deleteCount":495,"docCount":495,"indexName":"WIKI"}]}}
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},
        ]
    });
}

댓글 없음:

댓글 쓰기