Histogram Chart

A histogram takes as input a numeric variable only. The variable is cut into several bins, and the number of observation per bin is represented by the height of the bar. It is possible to represent the distribution of several variable on the same axis using this technique.


Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


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" : [
          [124],
          [42],
          [25],
          [45],
          [412],
          [51],
          [1112],
          [46],
          [103],
          [876],
          [146],
          [340],
          [396],
          [81],
          [461],
          [20],
          [450],
          [246],
          [166],
          [63],
          [64],
          [155],
          [859],
          [151],
          [166],
          [37],
          [223],
          [138],
          [72],
          [245],
          [248],
          [377],
          [189],
          [1843],
          [180],
          [537],
          [519],
          [455],
          [406],
          [365],
          [942],
          [776],
          [372],
          [163],
          [101],
          [20],
          [283],
          [1234],
          [89],
          [201],
          [356],
          [2970],
          [456],
          [1235],
          [24],
          [1581],
          [1166],
          [40],
          [727],
          [3808],
          [791],
          [1804],
          [3460],
          [719]
        ],
        "desc" : ["days"],
        "smps" : ["Survival"],
        "vars" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21","s22","s23","s24","s25","s26","s27","s28","s29","s30","s31","s32","s33","s34","s35","s36","s37","s38","s39","s40","s41","s42","s43","s44","s45","s46","s47","s48","s49","s50","s51","s52","s53","s54","s55","s56","s57","s58","s59","s60","s61","s62","s63","s64"]
     },
     "z" : {
        "Organ" : ["Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Stomach","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Bronchus","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Colon","Ovary","Ovary","Ovary","Ovary","Ovary","Ovary","Breast","Breast","Breast","Breast","Breast","Breast","Breast","Breast","Breast","Breast","Breast"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "axisTitleFontStyle":"italic",
     "citation":"Cameron, E. and Pauling, L. (1978). Proceedings of the National Academy of Science USA, 75.",
     "graphType":"Scatter2D",
     "histogramBins":"10",
     "showTransition":"false",
     "theme":"CanvasXpress",
     "title":"Patients with advanced cancers of the stomach,\\nbronchus, colon, ovary or breast treated with ascorbate.",
     "xAxisTitle":"Survival (days)",
     "yAxisTitle":"Number of Subjects"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


  
  <-- Functions after rendering graph -->
  cX.createHistogram();
  
</script>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-cancersurvivalt-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-cancersurvivalt-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  varAnnot=z,
  axisTitleFontStyle="italic",
  citation="Cameron, E. and Pauling, L. (1978). Proceedings of the National Academy of Science USA, 75.",
  graphType="Scatter2D",
  histogramBins=10,
  showTransition=FALSE,
  theme="CanvasXpress",
  title="Patients with advanced cancers of the stomach,\nbronchus, colon, ovary or breast treated with ascorbate.",
  xAxisTitle="Survival (days)",
  yAxisTitle="Number of Subjects",
  afterRender=list(list("createHistogram"))
)