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.
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/
