Meter Chart Application

Sample of an interactive Chart Application

This chart shows a measurement for downloads. I have added two buttons to trigger the measurement by calling a small javascript which issues a download request, calculates the timings and posts the result. The event script (see parameter event_script), which adds an events listener, catches the post and updates the meter chart.

 

 

Installation of this Sample

Insert Script-tag for javascript measurement program into your Joomla Article:

<script src="/media/plg_content_rgraph/js/demo.js" type='text/javascript' ></script>

Having done this, code rgraph plugin-tags:

{rgraph type="Meter" max="100" value="0" labelsValueTextUnitsPost=" Mbps" title="Your Download Speed" width="600"
height="300" chart_name="chart" event_script="media/plg_content_rgraph/js/meter_event.js" titleSize="11"
 colorsGreenColor="Gradient(rgba(0,128,0,0.3):rgba(0,128,0,0.4):rgba(0,128,0,0.8):rgb(0,102,34))"
colorsYellowColor="Gradient(rgba(255,191,0,0.3):rgba(255,191,0,0.4):rgba(255,191,0,0.8):rgba(230,170,0,1.0))"
colorsRedColor="Gradient(rgba(204,0,0,0.3):rgba(204,0,0,0.4):rgba(204,0,0,0.8):rgba(204,0,0,1.0))" 
needleColor="rgba(77,77,77,0.9)" labelsValueDecimals="2" labelsValueUnitsPost=" Mbs" labelsValueText="true" 
labelsValueTextSize="11" marginBottom="30"}chart{/rgraph}

And finally insert html-tags to define buttons for controlling application:

<button type="button" onclick="measure_speed('php-apps/RGraph/images');" >Start Measurement</button>
<button type="button" onclick="postMessage(0, '*');">Reset</button>

The measurement program uses 5MB sized Image "31120037-5mb.jpg" (you may have a look at it and download it). Directory for image needs to be added as parameter for the called measurement program in onclick-parameter of first button.