Dashboard Chart

A way to plot all the metadata associated with a dataset.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- 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" : [
          [null,92.7,68.7],
          [2.4,90.6,64.5],
          [null,91.7,70],
          [null,91.7,60.6],
          [null,92.2,71.3],
          [null,89.9,63],
          [null,94.4,58.5],
          [1.8,92.2,69],
          [3.2,90.3,65.8],
          [null,93.3,58.1],
          [0.9,90.6,67.4],
          [null,90.6,63],
          [null,85.4,53],
          [3,91.4,59.5],
          [1.2,93.4,64],
          [null,90.4,65.8],
          [null,90.6,58],
          [null,88.7,62.4],
          [1.6,90.9,64.5],
          [1.7,90.9,65.3],
          [null,94.4,68.4],
          [null,90,65.3],
          [null,88.8,67.9],
          [2.2,91,60.9],
          [1.8,91.3,66.2],
          [null,92.4,62.2],
          [null,87.5,54],
          [3,86.8,63.5],
          [null,null,null],
          [null,null,null],
          [null,null,null],
          [null,92.9,69.8],
          [1.7,91.1,63.6],
          [1,92.1,66.6],
          [1.2,88.9,67.5],
          [null,91.7,67.2],
          [0.6,94.5,70.1],
          [0.5,94,65.5],
          [0.8,94.8,68.3],
          [0.9,94,66.7],
          [1.2,92.9,66],
          [0.5,92.9,65.4],
          [0.8,92.9,67.3],
          [0.5,94.1,67.1],
          [0.4,92.8,64.3],
          [0.3,95.5,69.5],
          [0.4,95.9,71.1],
          [null,91.3,67.9],
          [0.5,95.4,69.1],
          [null,94.3,71.4],
          [null,92.2,66.6],
          [0.4,95.3,69],
          [0.7,93.7,65.7],
          [0.7,95.3,67.2],
          [1.7,90.3,63.2],
          [1.1,92.7,67.8],
          [null,null,null],
          [null,null,null],
          [0.6,94.6,69.2],
          [0.8,94.9,68.6],
          [0.7,95.4,67.5],
          [null,95.7,67],
          [1.1,93.4,65.9],
          [null,93.3,59.5],
          [1.2,94.6,64.3],
          [0.9,94.8,67.1],
          [0.5,95.2,65.6],
          [0.6,92.7,67.6],
          [1.8,94.3,66.5],
          [0.8,93.9,65.9],
          [null,null,null],
          [null,null,null],
          [null,null,null],
          [null,72.9,null],
          [null,null,null],
          [null,null,null],
          [4.2,86.7,63.5],
          [null,92.5,66.9],
          [null,null,null],
          [null,null,null],
          [null,null,null],
          [null,null,null],
          [2.5,87.6,66.2],
          [null,null,null],
          [null,null,null],
          [2,90.2,65],
          [5.8,81,59.5],
          [7.9,79.3,59.5],
          [null,null,null]
        ],
        "smps" : ["No Preventive Actions","Physical Distancing","Stay Home Sick"],
        "vars" : ["111","112","113","114","115","116","121","122","123","124","125","126","127","131","132","133","134","135","136","137","138","139","141","142","143","144","145","146","147","148","149","211","212","213","214","215","221","222","223","224","231","232","233","234","311","321","322","323","324","325","326","331","332","333","334","335","336","337","411","412","413","414","421","422","423","424","425","426","431","432","433","434","510","511","512","513","514","515","516","517","518","519","521","522","523","524","531","532","533"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "asDOE":"true",
     "colorBy":"Stay Home Sick",
     "graphType":"Map",
     "histogramBins":"false",
     "layoutConfig":[
        {
           "size":"2X2"
        }
     ],
     "legendPosition":"top",
     "mapId":"bc",
     "mapPropertyId":"LOCAL_HLTH_AREA_CODE",
     "topoJSON":"https://www.canvasxpress.org/data/bc.json"
  }
  

  <!-- 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-bc-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  asDOE=TRUE,
  colorBy="Stay Home Sick",
  graphType="Map",
  histogramBins=FALSE,
  layoutConfig=list(list(size="2X2")),
  legendPosition="top",
  mapId="bc",
  mapPropertyId="LOCAL_HLTH_AREA_CODE",
  topoJSON="https://www.canvasxpress.org/data/bc.json"
)