Gauge 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.

Plugin Parameter for creation of chart:

{rgraph type="Gauge" max="100" value="0" labelsValue="true" titleTop="Download Speed" titleTopSubtitle="megabits per second" width="450" height="350" radius="150" chart_name="chart" event_script="media/plg_content_rgraph/js/meter_event.js" titleTopSize="12" titleTopPos="0.35" labelsValueSize="10" needleColors="rgba(0,0,255,0.65)" labelsValueDecimals="1" labelsValueUnitsPost=" Mbs"  colorsRanges="0,16,rgba(255,0,0,0.6)|16,40,yellow|40,100,rgba(0,255,0,0.8)" textAccessible="0" marginLeft="5" labelsValueDecimals="1" scaleDecimals="1" number_format="c" debug="1"}chart{/rgraph}

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 and insert html-tags to define buttons for controlling application.

<button type="button" onclick="measure_speed('php-apps/RGraph/images');" >Start Messung</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.

Important: If you want to test this sample via copy/paste, ensure that you paste with option "paste as plain text" otherwise imbedded html-codes may invalidate your input.
go back...