This topic is locked

AnyChart, a hidden gem in PHPRunner

7/15/2019 2:12:15 PM
PHPRunner Tips and Tricks
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.

admin 7/17/2019

Fernando,
thank you for a great article!
It would be nice if you can tell where in your application we can see that custom chart, what custom features you added there etc.

fhumanes author 7/19/2019

Thanks Sergey.
In my blog, where I can leave files for downloads, I have set the complete example so that everyone who wants it and has PHPrunner 10.2, can see in detail the example (which is very simple).
For any questions you may have, I also leave my email in order to help you.
This is the way I use to integrate any javascript library to the projects made in PHPRunner.
Regards,
fernando

admin 7/19/2019

Yes, I and other users have questions, answer them in your article:

  1. In your live demo, where exactly can we see custom charts? Why not supply links directly to those custom charts.
  2. What makes those custom charts special. You can say, for instance, PHPRunner's built-in chart didn't have this functionality and I have added it via this specific code. This kind of explanation will help potential readers the purpose of the article.

fhumanes author 7/20/2019

My goal with this article is:

  • Inform that we have a very good product "AnyChart" and that there are many more possibilities than the one provided by PHPRunner. To identify possibilities only and is an example, I put the great quantity of graphics that can be obtained. https://www.anychart.com/en/products/anychart/gallery/
  • Inform that if we need more examples and help on PHPRunner graphics we can go to the manufacturer's help: https://www.anychart.com/en/products/anychart/docs/ and that this gives us support with the license of PHPRunner.
  • Inform that this library of javascript and any other, we can integrate it in our PHPRunner projects, in a very simple way.
  • Inform, through the example, that with the integration of PHPRunner you can do many things and customize our graphics. It will be the decision of each one, depending on the needs, to use one or the other method.
  • Inform how we can have a better visualization of our graphics on mobile devices.
    Only this is what I want to explain and I believe that with my example, my objective is fulfilled.
    Thank you very much for all the suggestions that you make me.
    Greetings,
    fernando

fhumanes author 7/26/2019



Yes, I and other users have questions, answer them in your article:

  1. In your live demo, where exactly can we see custom charts? Why not supply links directly to those custom charts.
  2. What makes those custom charts special. You can say, for instance, PHPRunner's built-in chart didn't have this functionality and I have added it via this specific code. This kind of explanation will help potential readers the purpose of the article.


I try to answer your questions:
1º In this drawing I show the standard and custom options.


2º With Anychart you have these possibilities: https://www.anychart.com/en/products/anychart/gallery/

and also you can use all the examples that explain on its website, and you can also customize the graphics according to the language of your application.
Regards,

fhumanes author 10/22/2020

Some months ago I explained how to take advantage of all the functionality offered by the AnyChart JavaScript library (see the article).
The explanation I made is still valid, but in my case, that I want to make an evolution of the DECMA application and where I use graphics intensively to represent information, it is very slow to integrate with the proposed solution.
To be more productive and facilitate the intensive use of graphics, I have made a "plugin", with a special structure, which will greatly simplify coding.
So, this article explains, using the same example that I used, how to make the graphics with and without, use the integration that PHPRunner does and the use of the plugin.
DEMO: https://fhumanes.com/graficos2
In order to use the plugin, you first have to download and install it. Download on plugins page.
In my portal, I leave the step-by-step explanation to use the new plugin and I also leave the entire example in the PHPRunner 10.2 version, so that you can test it on your computers.
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.