C3js Experiments

by mhouser_nowmediagroup

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="//rawgit.com/ramnathv/98c49a2b75c480af153a/raw/d8a3c3c49694cabe82d1c313ad015b42405baa33/jsonData1.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

CSS

div.chart-title {
  font-family: "Helvetica";
}
.c3 svg {
  font-family: "Arial" !important;
}
.c3-axis-y path,
.c3-axis-y line{
  opacity: 0.5;
}
.c3-axis text{
  opacity: 0.5;
}

/*
.c3-axis-y path{
    stroke: transparent;
}
*/

CoffeeScript

###
chart = c3.generate
  bindTo: "#chart"
  data:
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]        
    ]
  axis:
    x:
      type: 'category'
      categories: ['A', 'B', 'C', 'D', 'E', 'F']
###

d3k = d3k || {}
d3k.panel = ->
  defaults = 
    panels: ["title", "stage", "notes"]
    title: ""
    stage: ""
    notes: ""
    
  opts = extend(arguments[0], defaults)
  exports = (selection) ->
    selection.each (data) ->
      panel = d3.select(@)
        .selectAll("div.chart-wrapper")
        .data(data)
      panelEnter = panel.enter()
        .append("div.chart-wrapper")
      opts.panels.forEach (d) ->
          panelEnter
            .append("div.chart-#{d}")
            .html opts[d]
      
   exports.opts = opts; createAccessors(exports)
   exports
            


yvalues = d3.range(1949, 1960).map (i) ->
  "#{i}"
    
console.log(yvalues)


chart = c3.generate
  bindTo: "#chart"
  data:
    json: jsonData
    keys: 
      x: 'labs'
      value: yvalues
  axis:
    x:
      type: 'category'
      tick:
        outer: false
    y:
      tick:
        outer: false