javascript - Adding legends to selfmade barchart -

i know wondering self-made barchart? why not existing library? hate use files 20000 lines of code while 500 necessary.

oh , it's fun :) main objective i'll using script app i'll making using phonegap. lower size, better.

so idea achieve following:

i've been able to draw bars, make sure of equal width , have height dependent on height of parent container. you'll see in code below added font-size options. chart expand around 300px of height (which using default 16px example). , 50px font-size of 12 or less. reduced bar chartcontainer 3 x fontsize (+ rest) make sure there enough space top (amounts) & bottom (legends + title)

now i'm not entirely sure how add , center amounts. tried searching existing chart libraries check on how has been rendered, unfortunately use canvasses or svg containers. suggestions?

/* dataset     ------------------       add legends     add result / amount     add bottom-border: 8px both sides?     add chart name     */    (function ($) {        var methods = {          init : function(options) {              return this.each(function() {                    var $this = $(this),                      dataset = options.dataset,                      fontsize = options.fontsize,                      widthofcontainer = $this.width(),                      heightofcontainer = $this.height() - (3 * (fontsize + 4)), // make room title (bottom), legend (bottom), amounts (top)                      widthofbar = parseint(widthofcontainer / options.dataset.length) - 2,                      bar;                    $this.bind('draw', function(e) {                      $this.empty();                        var maxvalueindataset = math.max.apply(math, dataset.map(function(o){return o.a;})),                          heightperunit = parseint(heightofcontainer / maxvalueindataset);                      (var = 0; < dataset.length; i++) {                          bar = $(document.createelement('div'));                          bar.addclass('bar');                          bar.css({                              'height': parseint(dataset[i].a * heightperunit) + 'px',                              'width': parseint(widthofbar) + 'px',                              'margin-left': parseint(i * 2 + * widthofbar) + 'px',                              'bottom': 2 * (fontsize + 4)                          });                          $this.append(bar);                      }                  });                    $this.trigger('draw');              });          },          draw : function(n) {              $(this).trigger('draw');          }      };        $.fn.chart = function(methodoroptions) {          if ( methods[methodoroptions] ) {              return methods[ methodoroptions ].apply( this, array.prototype.slice.call( arguments, 1 ));          } else if ( typeof methodoroptions === 'object' || ! methodoroptions ) {              // default "init"              return methods.init.apply( this, arguments );          } else {              $.error( 'method ' +  methodoroptions + ' not exist on jquery.tooltip' );          }      };        $(document).ready(function(){          $('div.barchart').chart({              // add font-size?              fontsize: 14,              name: 'mana cost',              dataset: [                  {a: 2, label: '0'},                  {a: 8, label: '1'},                  {a: 9, label: '2'},                  {a: 4, label: '3'},                  {a: 7, label: '4'},                  {a: 3, label: '5'},                  {a: 1, label: '6'},                  {a: 1, label: '7'},                  {a: 2, label: '8'},                  {a: 5, label: '9'}              ]          });      });  }( jquery ));

/* barchart     ========================================================================== */    .barchart {    color: black;  }    /* bar     ========================================================================== */    .bar {    position: absolute;    height: 0px;    width: 0px;    margin-left: 0px;    bottom: 0px;    background: black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div style="padding: 20px;">              <div class="barchart" style="height: 100px; position: relative"></div>          </div>

nice chart! looks clean. know mean. spent months trying manipulate layout of bxslider realized less code write own. here's attempt @ answering query. i've made width responsive using percentages (don't worry; it's easy change back), added css class legend, values, , count, , modified plugin include name option (called legend). these bits formatted , appended. hope helps.

/* dataset     ------------------       add legends     add result / amount     add bottom-border: 8px both sides?     add chart name     */    (function ($) {        var methods = {          init : function(options) {              return this.each(function() {                    var $this = $(this),                      dataset = options.dataset,                      fontsize = options.fontsize,                      legend = options.name,                      widthofcontainer = $this.width(),                      heightofcontainer = $this.height() - (3 * (fontsize + 4)), // make room title (bottom), legend (bottom), amounts (top)                      widthofbar = parseint(widthofcontainer / options.dataset.length) - 2,                      widthofbarper = (widthofbar / widthofcontainer) *100,                      bar;                    $this.bind('draw', function(e) {                      $this.empty();                        var maxvalueindataset = math.max.apply(math, dataset.map(function(o){return o.a;})),                          heightperunit = parseint(heightofcontainer / maxvalueindataset);                      (var = 0; < dataset.length; i++) {                      		var dataval = dataset[i].a;                          bar = $(document.createelement('div'));                          bar.addclass('bar');                          bar.css({                              'height': parseint( dataval * heightperunit) + 'px',                              'width': widthofbarper + '%', // percentages make more responsive?                              'margin-left': (i + * widthofbarper ) + '%', // no need parseint have on widthofbar. chart stretches width .                              'bottom': 2 * (fontsize + 4)                          });                          bar.append('<p class="count">'+ +'</p>');	// defines bar count, dataset[i].label if use don't need type out each bar?                          bar.append('<p class="value">'+ dataval +'</p>');	// defines bar value                          $this.append(bar); // adds bar count                      }                      var chartheight = $this.height();                      $('.bar .count').css({ bottom: fontsize - chartheight * 0.5 });                      $('.bar .value').css({ bottom: chartheight * 0.5 - fontsize });                      if(legend){  												legend = '<p class="legend">'+legend+'</p>';  											  $this.append(legend);                    //      $this.css({ border: '1px solid #f90'}); // temp see current chart size                          $this.find('.legend').css({ top: chartheight - fontsize });                      }                  });                    $this.trigger('draw');              });          },          draw : function(n) {              $(this).trigger('draw');          }      };        $.fn.chart = function(methodoroptions) {          if ( methods[methodoroptions] ) {              return methods[ methodoroptions ].apply( this, array.prototype.slice.call( arguments, 1 ));          } else if ( typeof methodoroptions === 'object' || ! methodoroptions ) {              // default "init"              return methods.init.apply( this, arguments );          } else {              $.error( 'method ' +  methodoroptions + ' not exist on jquery.tooltip' );          }      };        $(document).ready(function(){          $('div.barchart').chart({              // add font-size?              fontsize: 14,              name: 'mana cost',              dataset: [                  {a: 2, label: '0'},                  {a: 8, label: '1'},                  {a: 9, label: '2'},                  {a: 4, label: '3'},                  {a: 7, label: '4'},                  {a: 3, label: '5'},                  {a: 1, label: '6'},                  {a: 1, label: '7'},                  {a: 2, label: '8'},                  {a: 5, label: '9'}              ]          });      });  }( jquery ));

/* barchart     ========================================================================== */    .barchart {    color: black;  }    /* bar     ========================================================================== */    .bar {    position: absolute;    height: 0px;    width: 0px;    margin-left: 0px;    bottom: 0px;    background: black;  }    .count, .value{    z-index: 7;    position: absolute;    text-align: center;    width: 100%;  }    .legend{    position: relative;    text-align: center;    width: 100%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div style="padding: 20px;">              <div class="barchart" style="height: 100px; position: relative"></div>          </div>