An area chart is really similar to a line chart, except that the area between the x axis and the line is filled in with color or shading. It represents the evolution of a numeric variable.
<!-- 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/canvasXpress.min.js"></script> <!-- 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,2], [3,5], [5,1], [2,3], [4,6], [6,7] ], "smps" : ["x","y"], "vars" : ["1","2","3","4","5","6"] }, "z" : { "g" : ["a","a","a","b","b","b"] } } <-- Create the configuration for the graph --> var config = { "colorBy":"g", "colorScheme":"GGPlot", "graphType":"Scatter2D", "scatterType":"area", "theme":"GGPlot" } <!-- Call the CanvasXpress function to create the graph --> var cX = new CanvasXpress("canvasId", data, config); </script>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-scatterArea-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-scatterArea-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, varAnnot=z, colorBy="g", colorScheme="GGPlot", graphType="Scatter2D", scatterType="area", theme="GGPlot" )