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

 

datatype: number
datatype: number
datatype: number
type: number
%
type: number
%
FromToColor
type: text
type: text
datatype: color
type: text
type: text
datatype: color
type: text
type: text
datatype: color
type: text
type: text
datatype: color
minOccurs: 1

Markers

type: number
px
datatype: color
type: number
px
type: number
px

Sub Markers

type: number
type: number
px
datatype: color
type: number
px
type: number
px
datatype: color
px
type: number
px
type: text
datatype: color
px
type: text
type: number
px
type: text

type: number
px
type: number
px
type: number
°
type: decimal
%

Stroke & fill
datatype: color
type: number
px
,px
datatype: color
Outer distance from frame to context
type: number
px
type: number
px
type: number
px
type: number
px
Inner distance from frame to diagram
type: number
px
type: number
px
type: number
px
type: number
px
datatype: color
type: number
px
datatype: color
type: number
px
,px
type: number
px
type: number
px
datatype: color
datatype: color
type: number
px
,px
datatype: color
datatype: color
type: number
px
,px
datatype: color
datatype: color
type: number
px
,px
datatype: color
type: number
px
datatype: color
type: number
px
,px

datatype: integer
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:dia="http://data-diagrams.com">
<row>
<cell>34</cell>
</row>
[1 lines]
</dia:data>
[2 lines]

 
 
 
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" xmlns:ds="http://www.bootstrap-data.org">
<circle cx="410" cy="250" r="220" stroke="grey" stroke-width="1" fill="lightgrey"/>
<circle cx="410" cy="250" r="200" stroke="white" stroke-width="0" fill="white"/>
<path stroke="" stroke-width="0" fill="green" d="M410,250 L294.79,408.57 A196,196 0 0,1 232.65,333.45 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="311.84" x2="294.794" y1="385.106" y2="408.567"/>
<line class="submarker" stroke="black" stroke-width="1" x1="286.782" x2="275.829" y1="381.214" y2="392.878"/>
<line class="submarker" stroke="black" stroke-width="1" x1="271.308" x2="258.979" y1="364.736" y2="374.935"/>
<line class="submarker" stroke="black" stroke-width="1" x1="258.021" x2="244.512" y1="346.449" y2="355.022"/>
<line class="submarker" stroke="black" stroke-width="1" x1="247.131" x2="232.654" y1="326.64" y2="333.453"/>
<path stroke="" stroke-width="0" fill="green" d="M410,250 L232.65,333.45 A196,196 0 0,1 214.39,237.69 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="258.894" x2="232.654" y1="321.105" y2="333.453"/>
<line class="submarker" stroke="black" stroke-width="1" x1="238.81" x2="223.593" y1="305.623" y2="310.567"/>
<line class="submarker" stroke="black" stroke-width="1" x1="233.188" x2="217.472" y1="283.729" y2="286.727"/>
<line class="submarker" stroke="black" stroke-width="1" x1="230.355" x2="214.387" y1="261.302" y2="262.307"/>
<line class="submarker" stroke="black" stroke-width="1" x1="230.355" x2="214.387" y1="238.698" y2="237.693"/>
<path stroke="" stroke-width="0" fill="green" d="M410,250 L214.39,237.69 A196,196 0 0,1 244.51,144.98 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="243.33" x2="214.387" y1="239.514" y2="237.693"/>
<line class="submarker" stroke="black" stroke-width="1" x1="233.188" x2="217.472" y1="216.271" y2="213.273"/>
<line class="submarker" stroke="black" stroke-width="1" x1="238.81" x2="223.593" y1="194.377" y2="189.433"/>
<line class="submarker" stroke="black" stroke-width="1" x1="247.131" x2="232.654" y1="173.36" y2="166.547"/>
<line class="submarker" stroke="black" stroke-width="1" x1="258.021" x2="244.512" y1="153.551" y2="144.978"/>
<path stroke="" stroke-width="0" fill="green" d="M410,250 L244.51,144.98 A196,196 0 0,1 315.58,78.24 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="268.997" x2="244.512" y1="160.517" y2="144.978"/>
<line class="submarker" stroke="black" stroke-width="1" x1="271.308" x2="258.979" y1="135.264" y2="125.065"/>
<line class="submarker" stroke="black" stroke-width="1" x1="286.782" x2="275.829" y1="118.786" y2="107.122"/>
<line class="submarker" stroke="black" stroke-width="1" x1="304.199" x2="294.794" y1="104.377" y2="91.433"/>
<line class="submarker" stroke="black" stroke-width="1" x1="323.284" x2="315.576" y1="92.265" y2="78.244"/>
<path stroke="" stroke-width="0" fill="green" d="M410,250 L315.58,78.24 A196,196 0 0,1 410,54 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="329.547" x2="315.576" y1="103.657" y2="78.244"/>
<line class="submarker" stroke="black" stroke-width="1" x1="343.738" x2="337.848" y1="82.64" y2="67.764"/>
<line class="submarker" stroke="black" stroke-width="1" x1="365.236" x2="361.257" y1="75.655" y2="60.158"/>
<line class="submarker" stroke="black" stroke-width="1" x1="387.44" x2="385.435" y1="71.419" y2="55.546"/>
<line class="submarker" stroke="black" stroke-width="1" x1="410" x2="410" y1="70" y2="54"/>
<path stroke="" stroke-width="0" fill="orange" d="M410,250 L410,54 A196,196 0 0,1 504.42,78.24 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="410" x2="410" y1="83" y2="54"/>
<line class="submarker" stroke="black" stroke-width="1" x1="432.56" x2="434.565" y1="71.419" y2="55.546"/>
<line class="submarker" stroke="black" stroke-width="1" x1="454.764" x2="458.743" y1="75.655" y2="60.158"/>
<line class="submarker" stroke="black" stroke-width="1" x1="476.262" x2="482.152" y1="82.64" y2="67.764"/>
<line class="submarker" stroke="black" stroke-width="1" x1="496.716" x2="504.424" y1="92.265" y2="78.244"/>
<path stroke="" stroke-width="0" fill="orange" d="M410,250 L504.42,78.24 A196,196 0 0,1 575.49,144.98 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="490.453" x2="504.424" y1="103.657" y2="78.244"/>
<line class="submarker" stroke="black" stroke-width="1" x1="515.801" x2="525.206" y1="104.377" y2="91.433"/>
<line class="submarker" stroke="black" stroke-width="1" x1="533.218" x2="544.171" y1="118.786" y2="107.122"/>
<line class="submarker" stroke="black" stroke-width="1" x1="548.692" x2="561.021" y1="135.264" y2="125.065"/>
<line class="submarker" stroke="black" stroke-width="1" x1="561.979" x2="575.488" y1="153.551" y2="144.978"/>
<path stroke="" stroke-width="0" fill="whiteSmoke" d="M410,250 L575.49,144.98 A196,196 0 0,1 605.61,237.69 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="551.003" x2="575.488" y1="160.517" y2="144.978"/>
<line class="submarker" stroke="black" stroke-width="1" x1="572.869" x2="587.346" y1="173.36" y2="166.547"/>
<line class="submarker" stroke="black" stroke-width="1" x1="581.19" x2="596.407" y1="194.377" y2="189.433"/>
<line class="submarker" stroke="black" stroke-width="1" x1="586.812" x2="602.528" y1="216.271" y2="213.273"/>
<line class="submarker" stroke="black" stroke-width="1" x1="589.645" x2="605.613" y1="238.698" y2="237.693"/>
<path stroke="" stroke-width="0" fill="red" d="M410,250 L605.61,237.69 A196,196 0 0,1 587.35,333.45 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="576.67" x2="605.613" y1="239.514" y2="237.693"/>
<line class="submarker" stroke="black" stroke-width="1" x1="589.645" x2="605.613" y1="261.302" y2="262.307"/>
<line class="submarker" stroke="black" stroke-width="1" x1="586.812" x2="602.528" y1="283.729" y2="286.727"/>
<line class="submarker" stroke="black" stroke-width="1" x1="581.19" x2="596.407" y1="305.623" y2="310.567"/>
<line class="submarker" stroke="black" stroke-width="1" x1="572.869" x2="587.346" y1="326.64" y2="333.453"/>
<path stroke="" stroke-width="0" fill="red" d="M410,250 L587.35,333.45 A196,196 0 0,1 525.21,408.57 z"/>
<line class="marker" stroke="black" stroke-width="2" x1="561.106" x2="587.346" y1="321.105" y2="333.453"/>
<line class="submarker" stroke="black" stroke-width="1" x1="561.979" x2="575.488" y1="346.449" y2="355.022"/>
<line class="submarker" stroke="black" stroke-width="1" x1="548.692" x2="561.021" y1="364.736" y2="374.935"/>
<line class="submarker" stroke="black" stroke-width="1" x1="533.218" x2="544.171" y1="381.214" y2="392.878"/>
<line class="submarker" stroke="black" stroke-width="1" x1="515.801" x2="525.206" y1="395.623" y2="408.567"/>
<line class="marker" stroke="black" stroke-width="2" x1="508.16" x2="525.206" y1="385.106" y2="408.567"/>
<circle cx="410" cy="250" r="160" stroke="white" stroke-width="0" fill="white"/>
+
<defs>
+
<marker id="z555_arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 8 3.5, 0 7"/>
</marker>
[1 lines]
</defs>
[2 lines]
<line x1="410" y1="250" stroke="#000" stroke-width="4" marker-end="url(#z555_arrowhead)" x2="295.552" y2="142.526"/>
<circle cx="410" cy="250" r="10" stroke="grey" stroke-width="0" fill="lightgrey"/>
<text fill="black" font-family="Arial" font-size="50" alignment-baseline="middle" text-anchor="middle" x="410" y="410">34</text>
<rect width="20" height="15" fill="white" x="320.83" y="366.35"/>
<text fill="black" font-family="Arial" font-size="16" x="321.83" y="371.35" text-anchor="start" alignment-baseline="middle">0</text>
<rect width="20" height="15" fill="white" x="273.28" y="308.87"/>
<text fill="black" font-family="Arial" font-size="16" x="274.28" y="313.87" text-anchor="start" alignment-baseline="middle">10</text>
<rect width="20" height="15" fill="white" x="259.3" y="235.58"/>
<text fill="black" font-family="Arial" font-size="16" x="260.3" y="240.58" text-anchor="start" alignment-baseline="middle">20</text>
<rect width="20" height="15" fill="white" x="282.35" y="164.63"/>
<text fill="black" font-family="Arial" font-size="16" x="283.35" y="169.63" text-anchor="start" alignment-baseline="middle">30</text>
<rect width="20" height="15" fill="white" x="322.74" y="120.55"/>
<text fill="black" font-family="Arial" font-size="16" x="337.74" y="118.55" text-anchor="middle" alignment-baseline="text-before-edge">40</text>
<rect width="20" height="15" fill="white" x="395" y="102"/>
<text fill="black" font-family="Arial" font-size="16" x="410" y="100" text-anchor="middle" alignment-baseline="text-before-edge">50</text>
<rect width="20" height="15" fill="white" x="467.26" y="120.55"/>
<text fill="black" font-family="Arial" font-size="16" x="482.26" y="118.55" text-anchor="middle" alignment-baseline="text-before-edge">60</text>
<rect width="20" height="15" fill="white" x="518.65" y="159.63"/>
<text fill="black" font-family="Arial" font-size="16" x="536.65" y="169.63" text-anchor="end" alignment-baseline="middle">70</text>
<rect width="20" height="15" fill="white" x="541.7" y="230.58"/>
<text fill="black" font-family="Arial" font-size="16" x="559.7" y="240.58" text-anchor="end" alignment-baseline="middle">80</text>
<rect width="20" height="15" fill="white" x="527.72" y="303.87"/>
<text fill="black" font-family="Arial" font-size="16" x="545.72" y="313.87" text-anchor="end" alignment-baseline="middle">90</text>
<rect width="20" height="15" fill="white" x="480.17" y="361.35"/>
<text fill="black" font-family="Arial" font-size="16" x="498.17" y="371.35" text-anchor="end" alignment-baseline="middle">100</text>
</svg>
[92 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable