Interactive Meter Graph for Metadata & Levels

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" : {
            "Quarter" : ["Q1","Q1","Q1","Q2","Q2","Q2","Q3","Q3","Q3","Q4","Q4","Q4"]
         },
         "y" : {
            "data" : [
              [1000,5000,4000,2000,7000,9000,8000,3000,2000,6000,5000,10000]
            ],
            "smps" : ["January","February","March","April","May","June","July","August","September","October","November","December"],
            "vars" : ["Revenue"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Meter",
         "meterGroup" : "Quarter",
         "meterSummary" : "sum",
         "meterType" : "digital",
         "meterVar" : "Revenue",
         "xAxis" : ["Revenue"]
      }

      // 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-meter3-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-meter3-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="Quarter",
  meterSummary="sum",
  meterType="digital",
  meterVar="Revenue",
  xAxis=list("Revenue")
)