Interactive Area-Line Graph

Area line graphs are visual representations of data that combine the features of line graphs and area charts. They are ideal for showcasing trends over time while emphasizing the cumulative effect of data points. The area under the line is filled with color, highlighting the magnitude of change. These graphs effectively illustrate both the trend and the overall volume or quantity. Applications range from financial performance tracking to website traffic analysis. Understanding area line graphs is crucial for data interpretation and effective communication of quantitative information.

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 = {
         "y" : {
            "data" : [
              [10,11,13,4,18,21],
              [5,8,10,12,15,10],
              [2,3,6,4,8,6],
              [18,27,29,21,42,37],
              [6,9,9,6,14,12]
            ],
            "smps" : ["Jan","Feb","Mar","Apr","May","Jun"],
            "vars" : ["Series A","Series B","Series C","Series D","Series E"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphOrientation" : "vertical",
         "graphType" : "AreaLine",
         "lineThickness" : 3,
         "lineType" : "spline",
         "objectColorTransparency" : 0.5,
         "setMaxX" : 50,
         "setMaxX2" : 50,
         "smpTextRotate" : 90,
         "smpTitle" : "Month",
         "xAxis" : ["Series A","Series B","Series C"],
         "xAxis2" : ["Series D","Series E"],
         "xAxisShow" : true,
         "xAxis2Show" : true
      }

      // 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-area8-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  graphOrientation="vertical",
  graphType="AreaLine",
  lineThickness=3,
  lineType="spline",
  objectColorTransparency=0.5,
  setMaxX=50,
  setMaxX2=50,
  smpTextRotate=90,
  smpTitle="Month",
  xAxis=list("Series A", "Series B", "Series C"),
  xAxis2=list("Series D", "Series E"),
  xAxis2Show=TRUE,
  xAxisShow=TRUE
)