fhumanes author
This graphics representation solution that is incorporated in PHPRunner is one of the best javascript libraries to represent graphics of very different types in our applications. The implementation that makes it PHPrunner is very simple and takes many revisions without evolving, perhaps because the main functionality of PHPrunner is not to make control panels or graphical representation of the results of the applications, but rather to make applications and enhance them with some graphics high quality. The license that incorporates PHPRunner gives us the possibility of doing all these types of graphics:
Although the help offered by PHPrunner for the use of AnyChart is simple, but scarce, the manufacturer of AnyChart has a very complete web of examples and possibilities and explanations of the product that we can obtain. Also, indicate that in case of any doubt the support of this manufacturer serves you and gives solutions, with the simple fact of indicating that you are a user of PHPrunner. The example I have made in order to facilitate knowledge of AntChart configuration, both in the integration of PHPrunner and the use of it without the integration of PHPrunner, only aims to explain and facilitate knowledge of the use of this library of javascript and power get part of the potential that it has. For the example I used a data model (Invoices) that I have already used in other examples. I want it to be very simple, because the example will be simple, with the aim of being understood by everyone, without the need for specific knowledge in PHP, JavaScript or HTML. So, the example has: . The management of Customers, Invoices, Products and Lines of invoices. . A pie chart used with the PHPrunner integration, more CSS and javascript personalization . A pie chart using AnyChart without the integration of PHPRunner "Custom". . Two scorecard using one and another chart. In the two graphics solutions I have implemented a solution so that the graphics look good (provided) both on the computer and on the mobile. This is important, because the standard solution of PHPrunner produces a bad visualization in mobile. To take into account the resolution I used these data:
With this style sheet:
@media screen and (max-width:320px) {
html, body, #container {width: 100%; height: 200px; margin: 0; padding: 0; }
}
@media screen and (max-width:480px) and (min-width:320px) {
html, body, #container {width: 100%; height: 250px; margin: 0; padding: 0; }
}
@media screen and (max-width:768px) and (min-width:480px) {
html, body, #container {width: 100%; height: 300px; margin: 0; padding: 0; }
}
@media screen and (max-width:1024px) and (min-width:768px) {
html, body, #container {width: 100%; height: 400px; margin: 0; padding: 0; }
}
@media screen and (min-width:1024px) {
html, body, #container {width: 100%; height: 500px; margin: 0; padding: 0; }
}
The version of the AnyChart library is 8.6, while the one with PHPrunner is 8.4. This is another advantage of using the library outside of the PHPrunner integration. As an integration solution for "heavy" libraries with PHPrunner is to put these libraries externally to the project, this is the URL http: // localhost / ComponentCode / where I leave the different libraries that use my projects. This facilitates my updating and control and above all, it has made my PHPrunner projects not grow too much. How is the integration of any javascript library in PHPrunner developments? I do it using the solution to define the "Custom" presentation of the fields.
The code could be put directly in the text box, but I like to have it very identified and easily accessible, so I put them as files in "Custom Files". In this case the written code is this where the code to be generated is divided into 3 pieces (1 and 3 fixed) and the 2nd depending on the values of the BD:
<?php
global $conn;
global $mlang_defaultlang; // "Spanish" if ($mlang_defaultlang == "Spanish") {
$locales = "<script src=\"/ComponentCode/anychart/locales/es-es.js\"></script>";
} else {
$locales = "<script src=\"/ComponentCode/anychart/locales/en-us.js\"></script>";
}
// Control of dependencies de record master "
$keyMaster = $_SESSION["ChartCustomWhere"]; // Obtenida en trigger before SQL
$keyMaster = str_replace("idcliente", "cliente_idcliente", $keyMaster); // Adecuar where $trunk1="
<script src=\"/ComponentCode/anychart/js/anychart-base.min.js\"></script>
$locales
<style>
@media screen and (max-width:320px) {
html, body, #container {width: 100%; height: 200px; margin: 0; padding: 0; }
}
@media screen and (max-width:480px) and (min-width:320px) {
html, body, #container {width: 100%; height: 250px; margin: 0; padding: 0; }
}
@media screen and (max-width:768px) and (min-width:480px) {
html, body, #container {width: 100%; height: 300px; margin: 0; padding: 0; }
}
@media screen and (max-width:1024px) and (min-width:768px) {
html, body, #container {width: 100%; height: 400px; margin: 0; padding: 0; }
}
@media screen and (min-width:1024px) {
html, body, #container {width: 100%; height: 500px; margin: 0; padding: 0; }
}
</style> <div id=\"container\"></div>
<script type=\"text/javascript\">
anychart.onDocumentReady(function() {
// create pie chart with passed data
var data = anychart.data.set([
"; $trunk2=''; $where = '';
if ($keyMaster <> '') {
$where = "where $keyMaster";
} $strSQLExists = "SELECT
idfactura,
cliente_idcliente,
NombreRazonSocial,
TotalFactura,
FechaFactura
FROM factura
$where"; $rsExists = db_query($strSQLExists,$conn); while ($PETICION = db_fetch_array($rsExists)) { $idFactura='Factura: '.$PETICION["idfactura"].' Cliente: '.$PETICION["NombreRazonSocial"];
$TotalFactura=$PETICION["TotalFactura"];
$FechaFactura=$PETICION["FechaFactura"];
$trunk2.=" ['$idFactura', $TotalFactura, $FechaFactura],";
}
$trunk2 = substr($trunk2, 0, -1);
$trunk3="
]); var wealth = data.mapAs({'x': 0, 'value': 1}); var chart = anychart.pie(wealth); // Set your licence key before you create chart.
anychart.licenseKey(‘see in example);
// Set logo source.
// You can't customize credits without a license key. See https://www.anychart.com/buy/ to learn more.
var credits = chart.credits();
credits.enabled(false);
credits.logoSrc(''); // turn on chart animation
chart.animation(true); // set chart title text settings
chart.title('Facturas del Cliente'); // Tooltip
var tooltip = chart.tooltip();
// tooltip.title().text('Factura ');
tooltip.format(\"Valor: {%value}{groupsSeparator:\\\.,decimalPoint:\\\,,decimalsCount:2} ({%yPercentOfTotal}{decimalPoint:\\\,,decimalsCount:2}%)\");
// URL Format in: https://docs.anychart.com/Common_Settings/Text_Formatters chart.labels().format('{%Value}{groupsSeparator:\\\.,decimalPoint:\\\,,decimalsCount:2} ({%yPercentOfTotal}{decimalPoint:\\\,,decimalsCount:2}%)'); // set legend title text settings
var legend = chart.legend();
// set legend position and items layout
legend.position(\"center\");
legend.align(\"Bottom\");
legend.fontSize(10);
legend.itemsLayout(\"vertical\"); // set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
"; $value=$trunk1.$trunk2.$trunk3; ?>
Also, we edit the HTML of the page to remove the border and lines that PHPrunner sets for the "list" pages.
I leave all the example in PHPrunner version 10.2, so you can try it on your equipment. Download source Also, I leave the example in operation in the url: DEMO The application is in English and Spanish. For any questions or what you need, contact through [email="fernandohumanes@gmail.com"]fernandohumanes@gmail.com[/email], and I will be happy to help you.
|
|