How to create a historgram from json

Question

I need to create a nice looking histogram using a json response from my back-end service.

I have looked into some freely available charting api, but none I found has option to create histogram.

Before I embark on daring and laborious task of create a histogram from scratch using jquery/css, I want to check here if someone already know solution to my problem.

BTW, I am familiar with Google's charting api and used it before. But, that too didn't have histogram option.

My example of service response json looks like this:

{
   "hist_values":[
      {
         "start_value":"0",
         "end_value":"0.1",
         "count":624202
      },
      {
         "start_value":"0.1",
         "end_value":"0.2",
         "count":80706
      },
      {
         "start_value":"0.2",
         "end_value":"0.3",
         "count":48601
      },
      {
         "start_value":"0.3",
         "end_value":"0.4",
         "count":14064
      },
      {
         "start_value":"0.4",
         "end_value":"0.5",
         "count":1619
      },
      {
         "start_value":"0.5",
         "end_value":"0.6",
         "count":1255
      }
   ]
}

There are some other similar question/answers on stackoverflow.com, since none of them answered my question satisfactorily, so I am posting a new one.

Answer 1

After a quick Google, I found an example of a Histogram on jsfiddle.

Unsure who wrote this originally, but with some tweaking you could change the code to work with your data, or you could re-format your data to closer resemble the example data set.

It works with jQuery and the Highcharts library (which can be used for personal / non-profit for free under the Creative Commons Attribution-NonCommercial 3.0 License - http://shop.highsoft.com/highcharts.html)

var chart = new Highcharts.Chart({
chart: {
        renderTo:'container',
        defaultSeriesType:'column',
        borderWidth:0,
        backgroundColor:'#eee',
        borderWidth:1,
        borderColor:'#ccc',
        plotBackgroundColor:'#fff',
        plotBorderWidth:1,
        plotBorderColor:'#ccc'
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:'Histogram Test'},
    legend:{
        //enabled:false
    },
    tooltip:{
        borderWidth:1,
        formatter:function() {
            return '<b>Range:</b><br/> '+ this.x +'<br/>'+
            '<b>Count:</b> '+ this.y;
        }
    },
    plotOptions:{
        column:{
            shadow:false,
            borderWidth:.5,
            borderColor:'#666',
            pointPadding:0,
            groupPadding:0,
            color: 'rgba(204,204,204,.85)'
        },
        spline:{
            shadow:false,
            marker:{
                radius:1
            }
        },
        areaspline:{
            color:'rgb(69, 114, 167)',
            fillColor:'rgba(69, 114, 167,.25)',
            shadow:false,
            marker:{
                radius:1
            }
        }
    },
    xAxis:{
        categories: ['> 48.00 =< 51.81','> 51.81 =< 54.63','> 54.63 =< 57.44','> 57.44 =< 60.25','> 60.25 =< 63.06','> 63.06 =< 65.88','> 65.88 =< 68.69','> 68.69 =< 71.50','> 71.50 =< 74.31','> 74.31 =< 77.13','> 77.13 =< 79.94','> 79.94 =< 82.75','> 82.75 =< 85.56','> 85.56 =< 88.38','> 88.38 =< 91.19','> 91.19 =< 94.00'],
        labels:{
            rotation:-90,
            y:40,
            style: {
                fontSize:'8px',
                fontWeight:'normal',
                color:'#333'
            },
        },
        lineWidth:0,
        lineColor:'#999',
        tickLength:70,
        tickColor:'#ccc',
    },
    yAxis:{
        title:{text:''},
        //maxPadding:0,
        gridLineColor:'#e9e9e9',
        tickWidth:1,
        tickLength:3,
        tickColor:'#ccc',
        lineColor:'#ccc',
        tickInterval:25,
        //endOnTick:false,
    },
    series: [{
        name:'Bins',
        data: [3,2,1,6,10,5,13,9,14,21,23,66,47,14,5,2],
    },{
        name:'Curve',
        type:'spline',
        visible:false,
        data: [3,2,1,6,10,5,13,9,14,21,23,66,47,14,5,2],
        //color: 'rgba(204,204,255,.85)'
    },{
        name:'Filled Curve',
        type:'areaspline',
        visible:false,
        data: [3,2,1,6,10,5,13,9,14,21,23,66,47,14,5,2],
        //color: 'rgba(204,204,255,.85)'
    }]
});

http://jsfiddle.net/jlbriggs/9LGVA/