javascript - Display the total count of json key-value pairs in the series in high charts -
i have json array whic has key status , 2 value pass , rescan. need display percentage of pass , rescan based on total counts in highcharts. have given hard coded values 2 , 1 in series section of code.
below highcharts code:
$(function () { // make monochrome colors , set them default pies highcharts.getoptions().plotoptions.pie.colors = (function () { var colors = [], base = highcharts.getoptions().colors[0], i; (i = 0; < 10; += 1) { // start out darkened base color (negative brighten), , end // brighter color colors.push(highcharts.color(base).brighten((i - 3) / 7).get()); } return colors; }()); // build chart $('#container').highcharts({ chart: { plotbackgroundcolor: null, plotborderwidth: null, plotshadow: false, type: 'pie' }, title: { text: 'authentic vs. rescan, 2016' }, tooltip: { pointformat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotoptions: { pie: { allowpointselect: true, cursor: 'pointer', datalabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (highcharts.theme && highcharts.theme.contrasttextcolor) || 'black' } } } }, series: [{ name: 'status', data: [ { name: 'authentic', y: 2 }, { name: 'rescan', y: 1 } ] }] }); }); /*chart theme*/ /** * dark theme highcharts js * @author torstein honsi */ highcharts.createelement('link', { href: 'https://fonts.googleapis.com/css?family=unica+one', rel: 'stylesheet', type: 'text/css' }, null, document.getelementsbytagname('head')[0]); highcharts.theme = { colors: ["#27ecea", "#90ee7e", "#f45b5b", "#7798bf", "#aaeeee", "#ff0066", "#eeaaee", "#55bf3b", "#df5353", "#7798bf", "#aaeeee"], chart: { backgroundcolor: { lineargradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [ [0, 'rgba(0,0,0,0.1)'], [1, 'rgba(0,0,0,0.1)'] ] }, style: { fontfamily: "'unica one', sans-serif" }, plotbordercolor: '#606063' }, title: { style: { color: '#e0e0e3', texttransform: 'uppercase', fontsize: '20px' } }, subtitle: { style: { color: '#e0e0e3', texttransform: 'uppercase' } }, xaxis: { gridlinecolor: '#707073', labels: { style: { color: '#e0e0e3' } }, linecolor: '#707073', minorgridlinecolor: '#505053', tickcolor: '#707073', title: { style: { color: '#a0a0a3' } } }, yaxis: { gridlinecolor: '#707073', labels: { style: { color: '#e0e0e3' } }, linecolor: '#707073', minorgridlinecolor: '#505053', tickcolor: '#707073', tickwidth: 1, title: { style: { color: '#a0a0a3' } } }, tooltip: { backgroundcolor: 'rgba(0, 0, 0, 0.85)', style: { color: '#f0f0f0' } }, plotoptions: { series: { datalabels: { color: '#b0b0b3' }, marker: { linecolor: '#333' } }, boxplot: { fillcolor: '#505053' }, candlestick: { linecolor: 'white' }, errorbar: { color: 'white' } }, legend: { itemstyle: { color: '#e0e0e3' }, itemhoverstyle: { color: '#fff' }, itemhiddenstyle: { color: '#606063' } }, credits: { style: { color: '#666' } }, labels: { style: { color: '#707073' } }, drilldown: { activeaxislabelstyle: { color: '#f0f0f3' }, activedatalabelstyle: { color: '#f0f0f3' } }, navigation: { buttonoptions: { symbolstroke: '#dddddd', theme: { fill: '#505053' } } }, rangeselector: { buttontheme: { fill: '#505053', stroke: '#000000', style: { color: '#ccc' }, states: { hover: { fill: '#707073', stroke: '#000000', style: { color: 'white' } }, select: { fill: '#000003', stroke: '#000000', style: { color: 'white' } } } }, inputboxbordercolor: '#505053', inputstyle: { backgroundcolor: '#333', color: 'silver' }, labelstyle: { color: 'silver' } }, navigator: { handles: { backgroundcolor: '#666', bordercolor: '#aaa' }, outlinecolor: '#ccc', maskfill: 'rgba(255,255,255,0.1)', series: { color: '#7798bf', linecolor: '#a6c7ed' }, xaxis: { gridlinecolor: '#505053' } }, scrollbar: { barbackgroundcolor: '#808083', barbordercolor: '#808083', buttonarrowcolor: '#ccc', buttonbackgroundcolor: '#606063', buttonbordercolor: '#606063', riflecolor: '#fff', trackbackgroundcolor: '#404043', trackbordercolor: '#404043' }, legendbackgroundcolor: 'rgba(0, 0, 0, 0.5)', background2: '#505053', datalabelscolor: '#b0b0b3', textcolor: '#c0c0c0', contrasttextcolor: '#f0f0f3', maskcolor: 'rgba(255,255,255,0.3)' }; highcharts.setoptions(highcharts.theme); /*---------------*/ below json:
var json={ "bms": [{ "id":"a", "fname": "vid123431.mp4", "lat": "73.81303019", "lng": "18.58494347", "status": "pass" },{ "id":"b", "fname": "vid123431.mp4", "lat": "23.986", "lng": "32.345645", "status": "pass" }, { "id":"c", "fname": "vid_20160801_154039509.mp4", "lat": "23.986", "lng": "32.345645", "date": "2016-08-01", "time": "15:41:37", "status": "rescan" } ] } could 1 on this?
you can loop on json data , count number of pass , rescan:
highcharts.each(json.bms, function(p) { if (p.status === 'pass') { passnumber++; } else if (p.status === 'rescan') { rescannumber++; } }); then can make series containing information counts of pass , rescan:
var series = { name: 'status', data: [{ name: 'pass', y: passnumber }, { name: 'rescan', y: rescannumber }] }; here can find example how can work: http://jsfiddle.net/worg6jlz/42/
Comments
Post a Comment