Newton Company Dashboard Demo

COMPANY A

Branch 1 Dashboard

Sample Bar Chart

Sample Sub Header

No Data Found

' } return seriesName } }, tooltip: { enabled: 'yes', theme: 'light', shared: 'yes' === "yes", intersect:!('yes' === "yes"), style: { fontSize: '12px', fontFamily: 'Poppins' } }, responsive: [{ breakpoint: 1024, options: { chart: { height: parseInt('350') }, } }, { breakpoint: 674, options: { chart: { height: parseInt('200') }, } } ] }; if ("" === "yes") { columnOptions.yaxis.labels.formatter = function (val) { if('1'){ let decimal = parseInt('0') || 0; if(""){ val = graphinNumberWithCommas(val,',',decimal) } else if("" && typeof graphinaAbbrNum !== "undefined"){ val = graphinaAbbrNum(val , parseInt("") || 0 ); }else{ val = parseFloat(val).toFixed(decimal) } } return '' + val + ''; } } if("1"){ columnOptions.yaxis.tickAmount = parseInt("0"); columnOptions.dataLabels.formatter = function (val) { if(Number.isNaN(val)){ return ''; } if(""){ val = graphinNumberWithCommas(val,',') } else if("" && typeof graphinaAbbrNum !== "undefined"){ val = graphinaAbbrNum(val , parseInt("") || 0 ); } return '' + val + ''; }; }else{ columnOptions.dataLabels.formatter = function (val) { if(Number.isNaN(val)){ return val; } val = parseFloat(val).toFixed(parseInt("0") || 0 ) ; if(""){ val = parseFloat(val).toLocaleString(',') } val = '' + val + ''; return val; }; } if ("yes" ) { columnOptions.tooltip['enabledOnSeries'] = [0]; } if ("") { columnOptions['annotations'] = { yaxis: [ { y: 0, strokeDashArray: parseInt("0"), borderColor: '#000000' } ] }; } if(""){ let style ={ color:'#000000', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } let title = ''; let xaxisYoffset ='bottom' === 'top' ? -95 : 0; if(typeof axisTitle !== "undefined"){ axisTitle(columnOptions, 'xaxis' ,title, style ,xaxisYoffset); } } if(""){ let style ={ color:'', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } let title = ''; if(typeof axisTitle !== "undefined"){ axisTitle(columnOptions, 'yaxis' ,title, style ); } } if(''){ columnOptions.xaxis.tickAmount = parseInt("30") || 6; columnOptions.xaxis.min = parseInt('0') || 0; columnOptions.xaxis.max = parseInt('0') || 200; } if(''){ columnOptions.yaxis.tickAmount = parseInt("0") || 6; columnOptions.yaxis.min = parseFloat('0') || 0; columnOptions.yaxis.max = parseFloat('0') || 200; } if(""){ let style = { color:'', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } columnOptions['yaxis'] = [columnOptions.yaxis] let columnYaxisTemp ={ opposite: '1', labels: { show: '', formatter: function (val) { if("" ){ val = graphinNumberWithCommas(val,',') } return '' + val + '' }, style }, tickAmount: parseInt(''), title: { text: '', style } } if(''){ columnYaxisTemp.tickAmount = parseInt('') || 6; columnYaxisTemp.min = parseFloat('0') || 0; columnYaxisTemp.max = parseFloat('0') || 200; } columnOptions.yaxis.push(columnYaxisTemp) } if (typeof initNowGraphina !== "undefined") { initNowGraphina( myElement, { ele: document.querySelector(".column-chart-191f345"), options: columnOptions, series: [{name: '', data: []}], animation: true }, '191f345' ); } if (window.ajaxIntervalGraphina_191f345 !== undefined) { clearInterval(window.ajaxIntervalGraphina_191f345) }

Sample Line Chart

Sample Sub Header

No Data Found

' } return seriesName } }, tooltip: { enabled: '1', shared: 'yes' , intersect: !('yes' ), theme: 'light', style: { fontSize: '12px', fontFamily: 'Poppins' } }, responsive: [{ breakpoint: 1024, options: { chart: { height: parseInt('350') } } }, { breakpoint: 674, options: { chart: { height: parseInt('200') } } } ] }; if ("" ) { lineOptions.yaxis.labels.formatter = function (val) { let decimal = parseInt('0') || 0; if("" ){ val = graphinNumberWithCommas(val,',',decimal) } else if("" && typeof graphinaAbbrNum !== "undefined"){ val = graphinaAbbrNum(val , parseInt("") || 0 ); }else{ val = parseFloat(val).toFixed(decimal) } return '' + val + ''; } } if ("yes" ) { lineOptions.tooltip['enabledOnSeries'] = [0]; } if ("" ) { lineOptions['annotations'] = { yaxis: [ { y: 0, strokeDashArray: parseInt("0"), borderColor: '#000000' } ] }; } lineOptions['markers'] ={ size: '0'.split('_,_'), strokeColors: '#fff'.split('_,_'), strokeWidth: '0'.split('_,_'), shape: 'circle'.split('_,_'), showNullDataPoints: true, hover: { size: 3, sizeOffset: 1 } }; if(""){ let style ={ color:'#000000', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } let title = ''; let xaxisYoffset ='' ? -95 : 0; if(typeof axisTitle !== "undefined"){ axisTitle(lineOptions, 'xaxis' ,title, style,xaxisYoffset ); } } if(""){ let style ={ color:'', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } let title = ''; if(typeof axisTitle !== "undefined"){ axisTitle(lineOptions, 'yaxis' ,title, style ); } } if(''){ lineOptions.yaxis.tickAmount = parseInt("0") || 6; lineOptions.yaxis.min = parseFloat('0') || 0; lineOptions.yaxis.max = parseFloat('0') || 200; } if(""){ let style = { color:'', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } lineOptions['yaxis'] = [lineOptions.yaxis] let lineYaxisTemp = { opposite: '1', labels: { show: '', formatter: function (val) { if("" ){ val = graphinNumberWithCommas(val,',') } return '' + val + '' }, style }, tickAmount: parseInt(''), title: { text: '', style } } if(''){ lineYaxisTemp.tickAmount = parseInt('') || 6; lineYaxisTemp.min = parseFloat('0') || 0; lineYaxisTemp.max = parseFloat('0') || 200; } lineOptions.yaxis.push(lineYaxisTemp) } if (typeof initNowGraphina !== "undefined") { initNowGraphina( myElement, { ele: document.querySelector(".line-chart-fe74c25"), options: lineOptions, series: [{name: '', data: []}], animation: true }, 'fe74c25' ); } if (window.ajaxIntervalGraphina_fe74c25 !== undefined) { clearInterval(window.ajaxIntervalGraphina_fe74c25) }

Sample Area Chart

Sample Sub Header

No Data Found

' } return seriesName } }, tooltip: { enabled: '1', shared: 'yes' === "yes", intersect:!('yes' === "yes"), theme: 'light', style: { fontSize: '12px', fontFamily: 'Poppins' } }, responsive: [ { breakpoint: 1024, options: { chart: { height: parseInt('350') } } }, { breakpoint: 674, options: { chart: { height: parseInt('200') } } } ] }; if ("" ) { areaOptions.yaxis.labels.formatter = function (val) { let decimal = parseInt('0') || 0; if("" ){ val = graphinNumberWithCommas(val,',',decimal) } else if("" && typeof graphinaAbbrNum !== "undefined"){ val = graphinaAbbrNum(val , parseInt("") || 0 ); }else{ val = parseFloat(val).toFixed(decimal) } return '' + val + ''; } } if ("yes") { areaOptions.tooltip['enabledOnSeries'] = [0]; } if ("" ) { areaOptions['annotations'] = { yaxis: [ { y: 0, strokeDashArray: parseInt("0"), borderColor: '#000000' } ] }; } if(""){ let style ={ color:'#000000', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } let title = ''; let xaxisYoffset ='' ? -95 : 0; if(typeof axisTitle !== "undefined"){ axisTitle(areaOptions, 'xaxis' ,title, style ,xaxisYoffset); } } if(""){ let style ={ color:'', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } let title = ''; if(typeof axisTitle !== "undefined"){ axisTitle(areaOptions, 'yaxis' ,title, style ); } } if(''){ areaOptions.yaxis.tickAmount = parseInt("0") || 6; areaOptions.yaxis.min = parseFloat('0') || 0; areaOptions.yaxis.max = parseFloat('0') || 200; } if(""){ let style = { color:'', fontSize: '12px', fontFamily: 'Poppins', fontWeight: '', } areaOptions['yaxis'] = [areaOptions.yaxis] let areaYaxisTemp = { opposite: '1', labels: { show: '', formatter: function (val) { if("" ){ val = graphinNumberWithCommas(val,',') } return '' + val + '' }, style }, tickAmount: parseInt(''), title: { text: '', style } } if(''){ areaYaxisTemp.tickAmount = parseInt('') || 6; areaYaxisTemp.min = parseFloat('0') || 0; areaYaxisTemp.max = parseFloat('0') || 200; } areaOptions.yaxis.push(areaYaxisTemp) } areaOptions['markers'] ={ size: '0'.split('_,_'), strokeColors: '#fff'.split('_,_'), strokeWidth: '0'.split('_,_'), shape: 'circle'.split('_,_'), showNullDataPoints: true, hover: { size: 3, sizeOffset: 1 } }; if (typeof initNowGraphina !== "undefined") { initNowGraphina( myElement, { ele: myElement, options: areaOptions, series: [{name: '', data: []}], animation: true }, '564a9cc' ); } if (window.ajaxIntervalGraphina_564a9cc !== undefined) { clearInterval(window.ajaxIntervalGraphina_564a9cc) }

Sample Pie Chart

Sample Sub Header

No Data Found

' } return seriesName } }, tooltip: { enabled: '1', theme: 'light', style: { fontSize: '12px', fontFamily: 'Poppins' }, y: { formatter: function(val,w) { let valueInStringShow = 'no' let valueInString = '0' let prefix = '' let postfix = '' if(''){ val= graphinNumberWithCommas(val,',') }else{ val = valueInStringShow == 'no' ? val : graphinaAbbrNum(val , valueInString); } if(""){ let totals = w.globals.seriesTotals.reduce((a, b) => { return a + b; }, 0) if(postfix.trim() === ''){ postfix = '%'; } return prefix + val+" (" + parseFloat(val/totals * 100).toFixed('0') +postfix+")" } return prefix + val + postfix } } }, stroke: { show: '', width: parseInt('0') }, responsive: [{ breakpoint: 1024, options: { chart: { height: parseInt('350') } } }, { breakpoint: 674, options: { chart: { height: parseInt('350') } } } ] }; if(""){ let valueInStringShow = 'no' let valueInStringValue = '0' let showlabel = 'no' let showValue = 'no' let prefix = '' let postfix = '' let numberformat = 'no' if(typeof chartDatalabelsFormat !== "undefined"){ chartDatalabelsFormat(pieOptions, showlabel, showValue, numberformat, prefix, postfix ,valueInStringShow, valueInStringValue,'','0'); } } if (typeof initNowGraphina !== "undefined") { initNowGraphina( myElement, { ele: document.querySelector(".pie-chart-67667a9"), options: pieOptions, series: [{name: '', data: []}], animation: true }, '67667a9' ); } if (window.ajaxIntervalGraphina_67667a9 !== undefined) { clearInterval(window.ajaxIntervalGraphina_67667a9) }

Sample Radial Chart

Sample Sub Header

No Data Found

' } return seriesName } }, tooltip: { theme: 'light', enabled: 'yes', style: { fontSize: '12px', fontFamily: 'Poppins' }, y: { formatter: function(val) { if(''){ val= graphinNumberWithCommas(val,',') }else if("" && typeof graphinaAbbrNum !== "undefined"){ val = graphinaAbbrNum(val , parseInt("") || 0 ); } return '' + val + '' } } }, responsive: [{ breakpoint: 1024, options: { chart: { height: parseInt('350') } } }, { breakpoint: 674, options: { chart: { height: parseInt('350') } } } ] }; if(''){ radialOptions.plotOptions.radialBar.track.background = '#808080' } if (typeof initNowGraphina !== "undefined") { initNowGraphina( myElement, { ele: document.querySelector(".radial-chart-7816cbd"), options: radialOptions, series: [{name: '', data: []}], animation: true }, '7816cbd' ); } if (window.ajaxIntervalGraphina_7816cbd !== undefined) { clearInterval(window.ajaxIntervalGraphina_7816cbd) }

Sample Donut Chart

Sample Sub Header

No Data Found

' } return seriesName } }, tooltip: { enabled: '1', theme: 'light', style: { fontSize: '12px', fontFamily: 'Poppins' }, y: { formatter: function(val,w) { let valueInStringShow = 'no' let valueInString = '0' let prefix = '' let postfix = '' if(''){ val= graphinNumberWithCommas(val,',') }else{ val = valueInStringShow == 'no' ? val : graphinaAbbrNum(val , valueInString); } if(""){ let totals = w.globals.seriesTotals.reduce((a, b) => { return a + b; }, 0) if(postfix.trim() === ''){ postfix = '%'; } return prefix + val+" (" + parseFloat(val/totals * 100).toFixed('0') +postfix+")" } return prefix + val + postfix } } }, stroke: { show: '', width: parseInt('0') }, responsive: [{ breakpoint: 1024, options: { chart: { height: parseInt('350') } } }, { breakpoint: 674, options: { chart: { height: parseInt('350') } } } ] }; if(""){ let valueInStringShow = 'no' let valueInStringValue = '0' let showlabel = 'no' let showValue = 'no' let prefix = '' let postfix = '' let numberformat = 'no' if(typeof chartDatalabelsFormat !== "undefined"){ chartDatalabelsFormat(donutOptions, showlabel, showValue, numberformat, prefix, postfix ,valueInStringShow, valueInStringValue,'','0'); } } if (typeof initNowGraphina !== "undefined") { initNowGraphina( myElement, { ele: document.querySelector(".donut-chart-c301300"), options: donutOptions, series: [{name: '', data: []}], animation: true }, 'c301300' ); } if (window.ajaxIntervalGraphina_c301300 !== undefined) { clearInterval(window.ajaxIntervalGraphina_c301300) }