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

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.

The WordPress plug-in is basically a compilation of the code in the other tabs on this page.Coming soon

Download




Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable