Data Visualization Diagrams, Data Tableau, Bar Charts, Line Charts, Function Charts, Point Charts, Area Charts, Spider Webs, Radar Webs, Donut Charts, Pie Charts, Bubble Charts, Gauge Charts

Data Diagrams


    Documentation

    The plug-in system primary consists of an XML Stylesheet for each diagram.

    The flow is as follows:

    • XML Data - from your data sources
    • XML Stylesheet for the specific diagram - downloaded from Data-Diagrams.com
    • SVG - inline or as linked image



    Basically, you need to setup a flow like this for the dynamic diagrams.

    You will need this XML file in the parent directory of the host directory of the XML Stylesheet (one level up) - for the 'circular' diagrams:

    percents.xml
    XML Stylesheet 1
    XML Stylesheet 2

    The diagram XML stylesheet requires XML data. However, the XML data might come from any source of data possible to transform into XML.

    The most common data sources are JSON or database tables. Most platforms will easily translate JSON or output from your database into arrays, which is easy to translate into XML.

    For the "curvy" diagrams, you will need a Bezier function (see below).

    We cannot know any system on any platform, but below is sample code for how it could be done in PHP.

    <?php

    $diagramStr = XMLtransform($path2xml, $path2stylesheet);

    print $diagramStr;

    function XMLtransform(string $path2xml, string $path2stylesheet) : string

    {

    $xp = new \XsltProcessor();

    $xsl = new \DOMDocument;

    $xsl->load($path2stylesheet);

    $xp->importStylesheet($xsl);

    if(is_string($path2xml))

    {

    $xml_doc = new \DOMDocument;

    $xml_doc->load($path2xml);

    }

    else

    {

    $xml_doc = $path2xml;

    }

    $xmlStr = $xp->transformToXML($xml_doc)

    return $xmlStr;

    }

    class Curve

    {

    static public function d(string $path, ?int $inter = 0)

    {

    try

    {

    $patharr = explode(' ', trim($path));

    $newArr = array();

    foreach($patharr as $key => $value)

    {

    $tarr = explode(',', $value);

    $first = (float) filter_var( trim($tarr[0]), FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );

    $second = (float) trim($tarr[1]);

    $arr = array($first, $second);

    array_push($newArr, $arr);

    }

    $bezier = new \Bezier();

    $bezier->smoothing = 0.15;

    $newPath = $bezier->d($newArr, $inter);

    return $newPath;

    }

    catch (\Throwable $e)

    {

    throw $e;

    return false;

    }

    }

    }

    ?>

    BEZIER.zip

    <?php

    public function recordset2xmlLitt(array $iRecordset, string $tablename) : string | bool

    {// recordset

    try

    {

    $xmlStr = "";

    $x = 0;

    foreach($iRecordset as $record)

    {

    $x++;

    $xmlStr .= '<' . $tablename . ' no="' . $x . '">' ;

    $xmlStr .= $this->record2xmlLitt($record, $strip, $objectType, $objectColumn);

    $xmlStr .= '</' . $tablename . '>' ;

    }

    return $xmlStr;

    }

    catch (\Throwable $e)

    {

    throw $e;

    return false;

    }

    }

    public function record2xmlLitt($iRecord) : string | bool

    {// one record

    try

    {

    $xmlStr = "";

    foreach($iRecord as $name => $column)

    {

    $xmlStr .= '<' . $name;

    foreach($column as $key => $value)

    {

    if($key!='value')

    {

    $xmlStr .= ' ' . $key . '="' . $value . '"';

    }

    }

    $xmlStr .= '>';

    $xmlStr .= strval($column['value']);

    $xmlStr .= '</' . $name . '>' ;

    }

    return $xmlStr;

    }

    catch (\Throwable $e)

    {

    throw $e;

    return false;

    }

    }

    ?>

    DB_PDO.zip

    CSS

    In SVG the order of applying CSS is different from HTML. While HTML is applying inline styles after anything else overruling any other assignment from <style> definitions or external CSS stylesheets, in SVG <style> markup or external CSS stylesheets overload inline styles.

    This situation makes it possible to add your own styles or stylesheets overloading the inline styles of the generated diagram.

    However, if you are linking the SVG using <img> or <object>, then the external stylesheet MUST be included in the external SVG file. Click the CSS tab on the design page for the diagrams to add your own CSS to the diagram.

    Javascript

    There are 3 ways to include SVG on your website:

    • Using IMG tag. This will disable any Javascript and SVG effects.
    • Using OBJECT tag. This will allow embedded Javascript and SVG effects.
    • Embedding SVG into the HTML. This will allow SVG effects. But for security reasons optional embedded Javascript will be omitted by the browser, and you will have to include the Javascript (below) to the HTML.

    The WordPress plug-ins are available here:

    The official plugin using tabs:

    data-diagrams.zip

    The PRO plugin using iframe:

    data-diagrams-pro.zip




    Oops

    Your browser is not supported

    A modern browser with Javascript ES6 is required

    Any major browser from 2015 onwards will be suitable