i have json in format :
[ { "2007": [ { "date": "2014-1-11", "val": "4" }, { "date": "2014-1-11", "val": "5" } ], "2008": { "date": "2014-1-11", "val": "6" } } ] trying display data using highcharts each year (json node) name of series , subnode of year node line char val on y axis , date on x axis :
fiddle : http://jsfiddle.net/ot24zrkt/38/
what format should jsonstring in order display correctly ?
code :
html : <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="width:500px;height:400px;margin:1.5em 1em;"></div> <script> var d = new date(); var pointstart = d.gettime(); highcharts.setoptions({ global: { useutc:false }, colors: [ 'rgba( 0, 154, 253, 0.9 )', //bright blue 'rgba( 253, 99, 0, 0.9 )', //bright orange 'rgba( 40, 40, 56, 0.9 )', //dark 'rgba( 253, 0, 154, 0.9 )', //bright pink 'rgba( 154, 253, 0, 0.9 )', //bright green 'rgba( 145, 44, 138, 0.9 )', //mid purple 'rgba( 45, 47, 238, 0.9 )', //mid blue 'rgba( 177, 69, 0, 0.9 )', //dark orange 'rgba( 140, 140, 156, 0.9 )', //mid 'rgba( 238, 46, 47, 0.9 )', //mid red 'rgba( 44, 145, 51, 0.9 )', //mid green 'rgba( 103, 16, 192, 0.9 )' //dark purple ], chart: { alignticks:false, type:'', margin:[60,25,100,90], //borderradius:10, //borderwidth:1, //bordercolor:'rgba(156,156,156,.25)', //backgroundcolor:'rgba(204,204,204,.25)', //plotbackgroundcolor:'rgba(255,255,255,1)', style: { fontfamily: 'abel,serif' } }, title: { text:'test chart title', align:'left', margin:10, x: 50, style: { fontweight:'bold', color:'rgba(0,0,0,.9)' } }, subtitle: { text:'test chart subtitle', align:'left', x: 52, }, legend: { enabled: true }, plotoptions: { area: { linewidth:1, marker: { enabled:false, symbol:'circle', radius:4 } }, arearange: { linewidth:1 }, areaspline: { linewidth:1, marker: { enabled:false, symbol:'circle', radius:4 } }, areasplinerange: { linewidth:1 }, boxplot: { grouppadding:0.05, pointpadding:0.05, fillcolor:'rgba(255,255,255,.75)' }, bubble: { minsize:'0.25%', maxsize:'17%' }, column: { //stacking:'normal', grouppadding:0.05, pointpadding:0.05 }, columnrange: { grouppadding:0.05, pointpadding:0.05 }, errorbar: { grouppadding:0.05, pointpadding:0.05, showinlegend:true }, line: { linewidth:1, marker: { enabled:false, symbol:'circle', radius:4 } }, scatter: { marker: { symbol: 'circle', radius:5 } }, spline: { linewidth:1, marker: { enabled:false, symbol:'circle', radius:4 } }, series: { shadow: false, borderwidth:0, states: { hover: { linewidthplus:0, } } } }, xaxis: { title: { text: 'x axis title', rotation:0, textalign:'center', style:{ color:'rgba(0,0,0,.9)' } }, labels: { style: { color: 'rgba(0,0,0,.9)', fontsize:'9px' } }, linewidth:.5, linecolor:'rgba(0,0,0,.5)', tickwidth:.5, ticklength:3, tickcolor:'rgba(0,0,0,.75)' }, yaxis: { minpadding:0, maxpadding:0, gridlinecolor:'rgba(204,204,204,.25)', gridlinewidth:0.5, title: { text: 'y axis<br/>title', rotation:0, textalign:'right', style:{ color:'rgba(0,0,0,.9)', } }, labels: { style: { color: 'rgba(0,0,0,.9)', fontsize:'9px' } }, linewidth:.5, linecolor:'rgba(0,0,0,.5)', tickwidth:.5, ticklength:3, tickcolor:'rgba(0,0,0,.75)' } }); function randomdata(points, positive, multiplier) { points = !points ? 1 : points; positive = positive !== true ? false : true; multiplier = !multiplier ? 1 : multiplier; function rnd() { return (( math.random() + math.random() + math.random() + math.random() + math.random() + math.random() ) - 3) / 3; } var rdata = []; (var = 0; < points; i++) { val = rnd(); val = positive === true ? math.abs(val) : val; val = multiplier > 1 ? (val * multiplier) : val; rdata.push(val); } return rdata; } </script> css : @import url(https://fonts.googleapis.com/css?family=changa+one|loved+by+the+king|fredericka+the+great|droid+serif:400,700,400italic|abel|oswald:400,300,700); body { font-family:abel, calibri, helvetica, sans-serif; font-size:95%; } javascript : var chart; var pointstart = date.utc(2014,0,1); var jsonstring = '[{"2007": [{"date": "2014-1-11","val": "4"},{"date": "2014-1-11","val": "5"}],"2008": {"date": "2014-1-11","val": "6"}}]'; var mydata = json.parse(jsonstring); $(function() { $('#container').highcharts({ chart : { type : 'line' }, title : { }, subtitle : { }, legend : { enabled : true }, tooltip : { }, plotoptions : { series : { pointstart : pointstart, pointinterval : 86400 * 30 * 1000 } }, xaxis : { type : 'datetime', tickinterval : 86400 * 30 * 1000, labels : { rotation : 0 } }, yaxis : { } }); chart = $('#container').highcharts(); chart.addseries({ data: mydata }); })
your json should contain array of objects (points), x / y params, instead of custom. date should timestamp (time in miliseconds), value number.
[{"x": 1389398400000,"y": 4},{"x": 1389398400000,"y": 5},{"x": 1389398400000,"y": 6}] example: http://jsfiddle.net/ot24zrkt/55/
Comments
Post a Comment