stingone Posted January 18, 2017 Share Posted January 18, 2017 (edited) Hi Everyone, I'd try finding some help with writing a PHP code for a dynamic graph using for example the output below: echo "Hours run pump CH+DHW: $pumphours_ch_dhw<br />"; echo "Hours run 3-way valve DHW: $threewayvalvehours<br />"; echo "Hours run CH+DHW: $hours_ch_dhw<br />"; echo "Hours run DHW: $hours_dhw<br />"; So my aim is sending the variables to a dynamic graph that stores the values and updates the graph every 5 sec.. just a line chart. so each variable above i want to show in the graph as 4 lines being updated every 5 sec with new data for that line so it ingreases/degreases depending the output. I found a easy chart below but no idea best way to implement these variables. <div style="width: 730px; margin: 20px auto; font-family:sans-serif;"> <?php /** Include class */ include( 'GoogChart.class.php' ); /** Create chart */ $chart = new GoogChart(); // Set graph data $data = array( 'IE7' => 22, 'IE6' => 30.7, 'IE5' => 1.7, 'Firefox' => 36.5, 'Mozilla' => 1.1, 'Safari' => 2, 'Opera' => 1.4, ); // Set graph colors $color = array( '#99C754', '#54C7C5', '#999999', ); // Set timeline graph data $dataTimeline = array( '2007' => array( 'January' => 31.0, 'February' => 31.2, 'March' => 31.8, 'April' => 32.9, 'May' => 33.7, 'June' => 34.0, 'July' => 34.5, 'August' => 34.9, 'September' => 35.4, 'Oktober' => 36.0, 'November' => 36.3, 'December' => 36.3, ), '2006' => array( 'January' => 25.0, 'February' => 24.5, 'March' => 24.5, 'April' => 22.9, 'May' => 22.9, 'June' => 25.5, 'July' => 25.5, 'August' => 24.9, 'September' => 27.3, 'Oktober' => 27.3, 'November' => 29.9, 'December' => 29.9, ), '2005' => array( 'January' => 15.0, 'February' => 14.5, 'March' => 14.5, 'April' => 12.9, 'May' => 12.9, 'June' => 15.5, 'July' => 15.5, 'August' => 14.9, 'September' => 17.3, 'Oktober' => 17.3, 'November' => 19.9, 'December' => 19.9, ), ); /* # Chart 3 # */ echo '<h2>Timeline</h2>'; $chart->setChartAttrs( array( 'type' => 'sparkline', 'title' => 'Firefox market share (%) 2006-07', 'data' => $dataTimeline, 'size' => array( 600, 200 ), 'color' => $color, 'labelsXY' => true, 'fill' => array( '#eeeeee', '#aaaaaa' ), )); // Print chart echo $chart; ?> </div> Edited January 18, 2017 by stingone Quote Link to comment Share on other sites More sharing options...
Jacques1 Posted January 18, 2017 Share Posted January 18, 2017 You cannot update the graph with PHP. You have to use Ajax. Either you request a new graph from the server every n seconds. Or you use a graph library written in JavaScript so that you only need to request the updated data. This is relatively complex for a beginner, so be prepared to do your own research. 1 Quote Link to comment Share on other sites More sharing options...
stingone Posted January 19, 2017 Author Share Posted January 19, 2017 You cannot update the graph with PHP. You have to use Ajax. Either you request a new graph from the server every n seconds. Or you use a graph library written in JavaScript so that you only need to request the updated data. This is relatively complex for a beginner, so be prepared to do your own research. I found a javascript graph that would be suitable: what i now like to know is how can i parse the $pumphours_ch_dhw into the chart? <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer",{ title :{ text: "Live Random Data" }, data: [{ type: "line", dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 100; var dataLength = 500; // number of dataPoints visible at any point var updateChart = function (count) { count = count || 1; // count is number of times loop runs to generate random dataPoints. for (var j = 0; j < count; j++) { yVal = yVal + Math.round(5 + Math.random() *(-5-5)); dps.push({ x: xVal, y: yVal }); xVal++; }; if (dps.length > dataLength) { dps.shift(); } chart.render(); }; // generates first set of dataPoints updateChart(dataLength); // update chart after specified time. setInterval(function(){updateChart()}, updateInterval); } </script> <script type="text/javascript" src="canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width:100%;"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Jacques1 Posted January 19, 2017 Share Posted January 19, 2017 As I've already tried to tell you, your task is relatively complex for a beginner. This means you need basic technical skills and the willingness to do some research (have you followed the Ajax link?). If you don't have that and think the graph will magically pop up when you copy and paste some code from the Internet, forget about it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.