javascript - Highcharts solid gauge dynamic update -
my idea display cpu , memory load highcharts solid gauge update every few seconds, ever do, wont run wanted, it's this:
i have php code giving me integer cpu , memory usage
$cpu = exec("mpstat 1 1 | grep 'all' | awk '{print 100 - $12}' | head -n 1"); $mem = exec("free -m | grep mem | awk '{print $3 / $2 * 100}'"); this highcharts js script:
$(function () { var gaugeoptions = { chart: { type: 'solidgauge' }, title: null, pane: { center: ['50%', '85%'], size: '105%', startangle: -90, endangle: 90, background: { backgroundcolor: (highcharts.theme && highcharts.theme.background3) || '#eee', innerradius: '60%', outerradius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // value axis yaxis: { stops: [ [0.1, '#55bf3b'], // green [0.5, '#dddf0d'], // yellow [0.9, '#df5353'] // red ], linewidth: 0, minortickinterval: null, tickpixelinterval: 400, tickwidth: 0, title: { y: -70 }, labels: { y: 16 } }, plotoptions: { solidgauge: { datalabels: { // y: 5, borderwidth: 0, usehtml: true } } } };settimeout(function () { $('#container-speed').highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 100, title: { text: 'cpu' } }, credits: { enabled: false }, series: [{ name: 'cpu', data: [0], datalabels: { format: '<div style="text-align:center"><span style="font-size:18px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || '#cecece') + '">{y:.1f} %</span><br/>' + '<span style="font-size:12px;color:silver"></span></div>' }, }] })); $('#container-rpm').highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 100, title: { text: 'ram' } }, series: [{ name: 'ram', data: [0], datalabels: { format: '<div style="text-align:center"><span style="font-size:20px;font-family:arial;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || '#cecece') + '">{y:.1f}%</span><br/>' + '<span style="font-size:12px;color:silver"></span></div>' }, }] })); var chart = $('#container-speed').highcharts(), point, newval, inc; if (chart) { point = chart.series[0].points[0]; inc = <?php echo $cpu; ?>; newval = inc; if (newval < 0 || newval > 200) { newval = point.y - inc; } point.update(newval); } chart = $('#container-rpm').highcharts(); if (chart) { point = chart.series[0].points[0]; inc = <?php echo $mem; ?>; newval = inc; if (newval < 0 || newval > 5) { newval = point.y - inc; } point.update(newval); } }, 5000);}); ...and container calling gauge:
<div style="width: 600px; height: 400px; margin: 0 auto" > <div id="container-speed" style="width: 300px; height: 200px; float: left"></div> <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div></div> now, problem when refreshes, keeps giving me same values on every refresh. in advance.
i meanwhile managed solve problem of @grzegorz blachliński's comment, here goes:
first, php code nothing more 2 variables checking cpu load , memory usage.
<?php $cpu = exec("mpstat 1 1 | grep 'all' | awk '{print 100 - $12}' | head -n 1"); $mem = exec("free -m | grep mem | awk '{print $3 / $2 * 100}'"); echo "[$cpu,$mem]";?> now, reason json_encode($cpu,$mem); returning values inside quotes , able read them integer example alert(mem);, chart didn't accept values , didn't draw chart, did workaround echoing proper format of variable values.
here's javascript file:
function setdivheight() { var div = $('#cpu-meter'); div.height(div.width() * 0.75); div = $('#memory-meter'); div.height(div.width() * 0.75); } $(function () { if( $(window).width() < 1000){ setdivheight(); $(window).on('load resize', function(){ setdivheight(); }); } var gaugeoptions = { chart: { type: 'solidgauge', events: { load: requestdata } }, title: null, pane: { center: ['50%', '85%'], size: '140%', startangle: -90, endangle: 90, background: { backgroundcolor: (highcharts.theme && highcharts.theme.background2) || '#eee', innerradius: '60%', outerradius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // value axis yaxis: { stops: [ [0.1, '#55bf3b'], // green [0.5, '#dddf0d'], // yellow [0.9, '#df5353'] // red ], linewidth: 0, minortickinterval: null, tickpixelinterval: 400, tickwidth: 0, title: { y: -70 }, labels: { y: 16 } }, plotoptions: { solidgauge: { datalabels: { y: 5, borderwidth: 0, usehtml: true } } } }; $('#cpu-meter').highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 100, title: { text: 'cpu usage' } }, credits: { enabled: false }, series: [{ data: [0], datalabels: { format: '<div style="text-align:center"><span style="font-size:20px;font-family:arial;color:#777;">{y:.2f} %</span><br/>' }, }] })); $('#memory-meter').highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 100, title: { text: 'memory usage' } }, credits: { enabled: false }, series: [{ data: [0], datalabels: { format: '<div style="text-align:center"><span style="font-size:20px;font-family:arial;color:#777;">{y:.2f} %</span><br/>' }, }] })); function requestdata() { $.ajax({ url: 'core/cpu-data.php', type: "get", datatype:"json", success: function(load) { var chart = $('#cpu-meter').highcharts(), point = 0, newval = 0, inc = 0; point = chart.series[0].points[0]; inc = load[0]; diff = newval - inc; if (diff > 0) { newval = newval + diff; } else { newval = newval - diff; } point.update(newval); chart = $('#memory-meter').highcharts(), point = 0, newval = 0, inc = 0; point = chart.series[0].points[0]; inc = load[1]; diff = newval - inc; if (diff > 0) { newval = newval + diff; } else { newval = newval - diff; } point.update(newval); settimeout(requestdata, 3000); }, cache: false }); }}); as can see, ajax getting data php file , making gauge increase , decrease it's value settimeout value (don't use setinterval).
once again, help.
Comments
Post a Comment