Needle Meter Graph: Detailed Performance Analysis

Meter graphs offer a visual representation of data points over time, ideal for monitoring system performance, resource usage, or other metrics. They display trends and patterns clearly, making them an essential tool for data analysis and decision-making. Common uses include tracking website traffic, energy consumption, or application response times. Effective meter graphs utilize clear labeling, appropriate scaling, and intuitive design. Choosing the right graph type, such as line graphs or area charts, depends on the data and desired level of detail. Interactive features allow users to zoom, filter, and explore the data for deeper insights, facilitating better understanding and informed choices.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "x" : {
            "cyl" : ["6-Cyl","6-Cyl","4-Cyl","6-Cyl","8-Cyl","6-Cyl","8-Cyl","4-Cyl","4-Cyl","6-Cyl","6-Cyl","8-Cyl","8-Cyl","8-Cyl","8-Cyl","8-Cyl","8-Cyl","4-Cyl","4-Cyl","4-Cyl","4-Cyl","8-Cyl","8-Cyl","8-Cyl","8-Cyl","4-Cyl","4-Cyl","4-Cyl","8-Cyl","6-Cyl","8-Cyl","4-Cyl"]
         },
         "y" : {
            "data" : [
              [21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4]
            ],
            "smps" : ["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],
            "vars" : ["mpg"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Meter",
         "meterGroup" : "cyl",
         "meterSummary" : "average",
         "meterType" : "gauge",
         "meterVar" : "mpg",
         "xAxis" : ["mpg"]
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-meter4-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-meter4-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  graphType="Meter",
  meterGroup="cyl",
  meterSummary="average",
  meterType="gauge",
  meterVar="mpg",
  xAxis=list("mpg")
)