====SVG Vertical Barchart====

This example shows how [[webbind:start|Web Binding]] can be used to make an SVG-based vertical bar-chart.

There are actually **many** ways you can build a barchart using SVGs.

This first example adjusts the //height// and //y// attributes of an SVG **rect** to show the value.

<code html>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="1920"
   height="1080"
   viewBox="0 0 1920 1080"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:ns0="http://ardi.com.au/svg/data"
   ardiserver="https://demo.optrix.com.au/s/pl">
  <defs
     id="defs2" />
 
  <g
      id="layer2"
	 transform="translate(300 0)">
    <rect
       style="fill:#800080;stroke-width:8;stop-color:#000000"
       id="rect3982"
       width="252.29752"
       height="1036.1653"
       x="17.454546"
       y="22.214876"
       rx="17.770708" />
    <rect
       style="fill:#00ff00;stroke-width:6.83179;stop-color:#000000"
       id="rect3992"
       width="207.86777"
       height="917.15704"
       x="39.636345"
       y="53.157028"
       rx="14.641275"	   
	   ardibindheight="point:Paint Line.Speed - Actual;round:1;mininput:50;maxinput:70;minoutput:0;maxoutput:917;type:attr"
	   ardibindy="point:Paint Line.Speed - Actual;round:1;mininput:50;maxinput:70;minoutput:957;maxoutput:20;type:attr"
	   />
    <text
       xml:space="preserve"
       style="font-size:35.9856px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';text-align:end;text-anchor:end;fill:#ffffff;stroke:none;stroke-width:8;-inkscape-stroke:none;stop-color:#000000"
       x="180"
       y="1021.8843"
       id="text15702"       
       ardibind="point:Paint Line.Speed - Actual;type:text;round:1" 	   
	   text-anchor="middle">TESTING</text>	   
  </g>
  <script href="https://demo.optrix.com.au/plugins/optrix/livepage.js"></script>
</svg>
</code>

[[https://ardi.com.au/downloads/webbind_svg.svg|See Example]].

This second example is very similar, but instead of adjusting the width and height, we adjust the **transform** to scale the object up and down.

<code html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="1920"
   height="1080"
   viewBox="0 0 1920 1080"
   version="1.1"
   id="svg5"
   sodipodi:docname="barchart.svg"
   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:ns0="http://ardi.com.au/svg/data"
   ardiserver="https://demo.optrix.com.au/s/pl">
  <defs
     id="defs2" />
  <g
     id="layer1">
    <rect
       style="fill:#800080;stroke-width:8;stop-color:#000000"
       id="rect398"
       width="252.29752"
       height="1036.1653"
       x="17.454546"
       y="22.214876"
       rx="17.770708" />
    <rect
       style="fill:#00ff00;stroke-width:6.83179;stop-color:#000000"
       id="rect399"
       width="207.86777"
       height="917.15704"
       x="39.636345"
       y="53.157028"
       rx="14.641275"
	   transform="scale(1 1)"
	   transform-origin="0px 920px"
	   ardibindtransform="point:Paint Line.Speed - Actual;round:3;mininput:50;maxinput:70;minoutput:0;maxoutput:1;prefix:scale(1,;postfix:)"
	   />
    <text
       xml:space="preserve"
       style="font-size:35.9856px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';text-align:end;text-anchor:end;fill:#ffffff;stroke:none;stroke-width:8;-inkscape-stroke:none;stop-color:#000000"
       x="180"
       y="1021.8843"
       id="text1570"       
       ardibind="point:Paint Line.Speed - Actual;type:text;round:1" 	   
	   text-anchor="middle">TESTING</text>	   
  </g>
  
</svg>
</code>

[[https://ardi.com.au/downloads/webbind_svg2.svg|See Example]]