Area graphs visually represent changes in one or more variables over time, comparing total values across categories and highlighting contributions to the overall value. They effectively show trends, making patterns easier to grasp, and are ideal for emphasizing overall trends rather than individual data points. By using color and shading, they help differentiate categories and convey complex information in a clear, appealing way
You can organize the data for different series in separate rows or in a long and narrow format, adding a metadata column to identify each series
<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" : [ [1,10], [2,11], [3,13], [4,4], [5,18], [6,21], [1,5], [2,8], [3,10], [4,12], [5,15], [6,10], [1,2], [2,3], [3,6], [4,4], [5,8], [6,6] ], "smps" : ["Month","Value"], "vars" : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"] }, "z" : { "Series" : ["Series A","Series A","Series A","Series A","Series A","Series A","Series B","Series B","Series B","Series B","Series B","Series B","Series C","Series C","Series C","Series C","Series C","Series C"] } } // Create the configuration for the graph var config = { "colorBy":"Series", "colorScheme":"GameOfThronesStannis", "graphType":"Area", "legendColumns":"3", "legendPosition":"top", "lineType":"spline", "subtitle":"skiny-long format", "title":"Area graph with three stacked data series", "titleScaleFontFactor":1.2, "xAxis":[ "Month" ], "xAxisTitle":"Revenue (in Millions)", "yAxis":[ "Value" ], "yAxisTitle":"Months / First Quarters of 2024" } // Call the CanvasXpress function to create the graph var cX = new CanvasXpress("canvasId", data, config); </script> </body>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-area7-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) z=read.table("https://www.canvasxpress.org/data/cX-area7-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, varAnnot=z, colorBy="Series", colorScheme="GameOfThronesStannis", graphType="Area", legendColumns=3, legendPosition="top", lineType="spline", subtitle="skiny-long format", title="Area graph with three stacked data series", titleScaleFontFactor=1.2, xAxis=list("Month"), xAxisTitle="Revenue (in Millions)", yAxis=list("Value"), yAxisTitle="Months / First Quarters of 2024" )