A layout approach partitions a plot into a matrix of panels. Each panel shows a different subset of the data.
<!-- 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 = { "x" : { "Code" : ["FL","DLBCL","DLBCL","FL","FL","DLBCL","DLBCL","DLBCL","DLBCL","DLBCL","FL","FL","FL","DLBCL","FL","DLBCL","DLBCL","DLBCL","FL","DLBCL"], "Drug" : ["4 mg","2 mg","3 F6 mg","4 mg","3 F6 mg","3 F6 mg","2 mg","2 mg","2 mg","2 mg","1 mg","4 F6 mg","3 F6 mg","4 F6 mg","3 F6 mg","2 mg","2 mg","1 mg","3 F6 mg","4 mg"] }, "y" : { "data" : [ [4.8,33.9,40.1,6.9,28.8,40.5,31.2,40,41.8,29.7,1.5,10,45.5,14.9,26.7,29.9,5.6,10.7,25.9,20.8], [null,null,null,null,null,35.5,null,35,null,null,null,5,null,null,21.7,null,0.6,null,null,null], [29.3,23,19.6,14,5.2,-1.4,-2.8,-6.9,-6.9,-7.1,-13.2,-13.9,-14.5,-16.6,-27.2,-33.9,-43.5,-43.7,-51.4,-52.6], [192.7,175.1,93.2,172,121.4,77.1,33.7,73.6,188.6,122.8,80.8,32.5,183.4,87.2,43.5,46.6,115.4,99.9,180.5,130.3] ], "vars" : ["Duration","Discontinued","Response","Baseline"] }, "z" : { "Panel" : [1,1,2,3] } } <-- Create the configuration for the graph --> var config = { "graphOrientation":"vertical", "graphType":"Bar", "layoutAdjust":"true", "layoutConfig":[ { "axisCoordinate":"true", "graphType":"BarLine", "showDataValues":"true", "xAxis":[ "Duration" ], "xAxis2":[ "Discontinued" ], "xAxisTitle":"Duration of Treatment" }, { "colorBy":"Drug", "legendColumns":5, "legendInside":"true", "legendPosition":"bottomLeft", "showLegend":"true", "showLegendTitle":"false", "xAxisTitle":"Change from Baseline (%)" }, { "barLollipopFactor":1.5, "barLollipopOpen":"false", "barType":"lollipop", "xAxisTitle":"Baseline (mm)" } ], "layoutStripShow":"false", "layoutTopology":"3X1", "showLegend":"false", "theme":"CanvasXpress", "title":"Tumor Response and Duration by Subject Id", "xAxis2Show":"false" } <!-- Call the CanvasXpress function to create the graph --> var cX = new CanvasXpress("canvasId", data, config); <-- Functions after rendering graph --> cX.segregateVariables(["Panel"]); </script>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-layoutContinuous-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/cX-layoutContinuous-smp.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-layoutContinuous-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, smpAnnot=x, varAnnot=z, graphOrientation="vertical", graphType="Bar", layoutAdjust=TRUE, layoutConfig=list(list(axisCoordinate=TRUE, graphType="BarLine", showDataValues=TRUE, xAxis=list("Duration"), xAxis2=list("Discontinued"), xAxisTitle="Duration of Treatment"), list(colorBy="Drug", legendColumns=5, legendInside=TRUE, legendPosition="bottomLeft", showLegend=TRUE, showLegendTitle=FALSE, xAxisTitle="Change from Baseline (%)"), list(barLollipopFactor=1.5, barLollipopOpen=FALSE, barType="lollipop", xAxisTitle="Baseline (mm)")), layoutStripShow=FALSE, layoutTopology="3X1", showLegend=FALSE, theme="CanvasXpress", title="Tumor Response and Duration by Subject Id", xAxis2Show=FALSE, afterRender=list(list("segregateVariables", list("Panel"))) )