Book Image

Learning jqPlot

By : Scott Gottreu
Book Image

Learning jqPlot

By: Scott Gottreu

Overview of this book

Table of Contents (19 chapters)
Learning jqPlot
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a meter gauge chart with Wi-Fi users


We begin to ponder what kind of chart to use for Jeff's idea. After looking through the documentation, we decide to use jqPlot's meter gauge. It's a chart that resembles a gauge on a car dashboard, with a needle pointing to the given data point on the semicircular gauge.

We create a new HTML file and set about creating our meter gauge as follows:

  1. We start by including the MeterGaugeRenderer plugin file. Since this is a prototype, we'll start by passing in a single value to the data array:

    <script src="../js/jqplot.meterGaugeRenderer.min.js"></script>
    <script>
    $(document).ready(function(){
      var meter = $.jqplot('wifi', [[100]],
        {
  2. We move on to seriesDefaults and start by setting the renderer to $.jqplot.MeterGaugeRenderer. After that, we begin setting some of the rendererOptions by setting the minimum and maximum values, as follows:

          seriesDefaults: {
            renderer: $.jqplot.MeterGaugeRenderer,
            rendererOptions...