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 = {
     "m" : {
        "Description" : "Patients with advanced cancers of the stomach, bronchus, colon, ovary or breast were treated with ascorbate. The purpose of the study was to determine if the survival times differ with respect to the organ affected by the cancer.",
        "Name" : "Cancer Survival",
        "Reference" : "Cameron, E. and Pauling, L. (1978) Supplemental ascorbate in the supportive treatment of cancer :  re-evaluation of prolongation of survival times in terminal human cancer. Proceedings of the National Academy of Science USA, 75. Also found in :  Manly, B.F.J. (1986) Multivariate Statistical Methods :  A Primer, New York :  Chapman & Hall, 11. Also found in :  Hand, D.J., et al. (1994) A Handbook of Small Data Sets, London :  Chapman & Hall, 255."
     },
     "x" : {
        "Description" : ["Survival time in days"]
     },
     "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)
x=read.table("https://www.canvasxpress.org/data/cX-cancersurvivalt-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-cancersurvivalt-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  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"))
)