| Author |
 Topic  |
|
|
quinncurtis
1586 Posts |
 Posted - 29 Oct 2020 : 10:21:08
|
I am interested primarily on your SPC Charts for Javascript component, due to most parts of our developments are web-based applications made in PHP & MySQL.
I am wondering to know if you can provide some examples on how to integrate your solution with php & MySQL. Perhaps you have some customers doing the same. |
|
|
quinncurtis
1586 Posts |
Posted - 29 Oct 2020 : 10:26:37
|
Since you are experienced with both MySQL and PHP, we have to assume that it is an easy matter for you to write the PHP code to retrieve the necessary data from the database. The data, whether strings, dates, or numeric values would be stored in PHP variables. Since your database is probably located on your server, it makes sense to access the database from PHP code, since PHP is processed on the server and not client-side within the browser.
The numeric data used to fill out one of our charts can be considered a 2D array, organized as rows of sample intervals, with 1 to N samples within each sample interval as columns. So when you read the numeric sample data from the database you place it in a PHP 2D array of numeric values. Once filled out, the 2D array would have the following structure. The number of rows and columns (number of sample intervals x samples per sample interval) would of course depend on your specific data.
// assume a PHP 2D array consisting of 10 rows and 5 columns
// The 5 columns needs to match the number of samples per sub-interval you specify in the chart building function, BuildXBarRChartPHP in this case.
$ar1 = array(
array(21,24,21,22,25),
array(22,25,23,23,25),
array(23,21,22,24,25),
array(24,27,23,25,25),
array(25,28,23,26,25),
array(26,24,23,27,25),
array(25,25,24,28,25),
array(24,26,23,27,25),
array(23,27,25,26,25),
array(22,23,23,25,25));
The question then becomes how to invoke some Javascript and pass in the data . Ignoring our software, you will find many examples on the internet of how to run Javascript code from within PHP. The most straight forward is to just use the PHP echo function to push the Javascript into the parent HTLM page. So what we do is echo Javascript code similar to what is found in the HTML page of all of our example programs. This is done mostly using PHP string manipulation. We build (concatenating using the .= operator) up a PHP string ($spcscript in the example below) which contains the Javascript we want to invoke. Then the entire $spcscript string is sent to the browser with one echo call.
In order to pass in the data, we need to convert the $ar1 array variable defined above into a Javascript compatible format. This is done using PHP json_encode function. The local Javascript variable arv is then passed as a parameter to the BuildXBarRChartPHP function. The BuildXBarRChartPHP is the chart building routine for the chart. Rather than use simulated data, it uses the 2D array passed in as the arv parameter. We added that new chart building function to the VariableControlCharts.js file found in our standard demo at: /JSTS/JavascriptExamples/VariableControlCharts/VariableControlCharts.js . The only thing you need to echo is the import
// create a javascript var statement and convert the PHP
// array into JSON
$arv = 'var arv = ' . json_encode($ar1) . ';';
// the following code builds up a string which contains the
// JavaScript code we will echo into the HTML page
// controlled by PHP
$spcscript =
'<canvas id="spcCanvas1" width="700" height="600">';
$spcscript .= '<script type="module">';
// Next we import a modified version of our //VariableControlCharts.BuildXBarRChart example, named BuildXBarRChartPHP
$spcscript .= 'import {BuildXBarRChartPHP} from "/JSTS/JavascriptExamples/VariableControlCharts/VariableControlCharts.js";';
// next we add the line which defines the data array as the
// JavaScript variable arv.
$spcscript .= $arv;
// Last we call the imported function BuildXBarRChartPHP
$spcscript .= 'BuildXBarRChartPHP("spcCanvas1", arv);';
// close out the script block in the string $spcscript
$spcscript .= '</script>';
// push the string containing the javascript into the HTML page.
echo $spcscript
The final string echo'd to the browser looks like:
<canvas id="spcCanvas1" width="700" height="600">
<script type="module">
import {BuildXBarRChartPHP} from "http://yourwebsite.com/JSTS/JavascriptExamples/VariableControlCharts/VariableControlCharts.js";
var arv = [[21,24,21,22,25],[22,25,23,23,25],[23,21,22,24,25],[24,27,23,25,25],[25,28,23,26,25],[26,24,23,27,25],[25,25,24,28,25],[24,26,23,27,25],[23,27,25,26,25],[22,23,23,25,25],[25,25,24,26,25]];
BuildXBarRChartPHP("spcCanvas1", arv);
</script>
Since the browser ends up calling the BuildXBarRChartPHP function in an external Javascript module (VariableControlCharts.js), that Javascript code does NOT need to be echo'd to from within PHP. It just needs to be in accessible Javascript file.
Here is a link to the example running on our website:
http://quinn-curtis.com/php2javascriptexample.php
The example simulates 20 sample intervals first, in order to calculate control limits, and then adds the additional 10 values supplied as the arv variable. You can use the scrollbar to scroll to those values at the end.
This PHP example is now included in our manual and an example is found in the software.
You will find the example PHP file in the JavaScriptExamplesQCSPCChart and TypeScriptExamplesQCSPCChart folders. In order to run it, it needs to be in a server accessible folder which is running PHP. The local server we use for the examples won’t work unless you go to the trouble of installing PHP to run under the local server. The BuildXBarRChartPHP chart building function is found as one of the functions in the VariableControlCharts.js (VariableControlCharts.ts) files.
|
 |
|
| |
Topic |
|
|
|
How to setup chart and pass data from within PHP
