Bar Chart Log Scale

by Philip Kahn

HTML

<script src="https://amphibiandisease.org/bower_components/chart.js/dist/Chart.bundle.min.js"></script>
      <script id="high-level-taxon-data">
      var hlTaxonLabels = ["afrosoricida","artiodactyla","carnivora","chiroptera","cingulata","dasyuromorphia","dermoptera","didelphimorphia","diprotodontia","eulipotyphla","hyracoidea","lagomorpha","macroscelidea","microbiotheria","monotremata","notoryctemorphia","paucituberculata","peramelemorphia","perissodactyla","pholidota","pilosa","primates","proboscidea","rodentia","scandentia","sirenia","tubulidentata"];var hlTaxonData = ["55","348","298","1287","21","78","2","106","146","491","5","91","19","1","5","2","7","22","24","8","12","458","7","2392","20","5","1"];      </script>
      
            <div class="col-xs-12 clearfix" id="high-level-canvas-container">
        <canvas id="high-level-chart">

        </canvas>
      </div>

CoffeeScript

jQuery.fn.exists = -> jQuery(this).length > 0

Object.toArray = (obj) ->
  try
    shadowObj = obj.slice 0
    shadowObj.push "foo" # Throws error on obj
    return obj
  Object.keys(obj).map (key) =>
    obj[key]

randomInt = (lower = 0, upper = 1) ->
  start = Math.random()
  if not lower?
    [lower, upper] = [0, lower]
  if lower > upper
    [lower, upper] = [upper, lower]
  return Math.floor(start * (upper - lower + 1) + lower)

getRandomDataColor = ->
  colorString = "rgba(#{randomInt(0,255)},#{randomInt(0,255)},#{randomInt(0,255)}"
  # Translucent
  colors =
    border: "#{colorString},1)"
    background: "#{colorString},0.2)"
  colors



$ ->
  if $("#high-level-taxon-data").exists()
    console.log "Rendering high level taxon data"
    hlTaxonLabels = Object.toArray window.hlTaxonLabels
    hlTaxonData = Object.toArray window.hlTaxonData
    color = getRandomDataColor()
    chartConfig =
      type: "bar"
      data:
        labels: hlTaxonLabels
        datasets: [
          label: "Linnean Orders"
          data: hlTaxonData
          borderColor: color.border
          backgroundColor: color.background
          borderWidth: 1
          ]
        options:
          scales:
            yAxes: [
              type: 'logarithmic'
              ticks:
                min: 1
              ]
    chartCtx = $("#high-level-chart")
    if typeof window._asm isnt "object"
      window._asm = new Object()
    _asm.chart = new Chart chartCtx, chartConfig
    console.debug "Config:", chartConfig
  false