A Simple little library for interaction with Highcharts

highwire

/* 
 * Simple Library to interaction with Highcharts
 * 
 */


var Highwire = function () {
  
  var chart
    , graph_container;
  
  var options = {
      
     /*
      * Object of defaults options for graph
      */
      
      'graph_options': {
          chart: {
             defaultSeriesType: 'areaspline',
             backgroundColor: '#F7F7F7',
             zoomType: 'x',
             height: 165
          },
          lang: {
             loading: 'lkjhsfdplkahsd ...'
          },
          plotOptions: {
            series: {
              lineWidth: 3,
              marker: {
                radius: 2,
                symbol: 'circle'
              },
              color: '#62C462',
              fillOpacity: 0.2
            }
          },
          title: {
             text: null,
             x: -20 //center
          },
          xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            labels: {
              formatter: function() {
                return moment(this.value).format('MMM Do');
              }
            }
          },
          yAxis: {
             title: {
                text: ''
             },
             min: 0
          },
          tooltip: {
            useHTML: true,
            headerFormat: '<small>{point.key}</small><table>',
            pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
            '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
            footerFormat: '</table>',
            formatter: function() {
                // format dates that end in 11:59 so it does not include the hours
                var date = moment(this.x).format("h:mm") == '11:59' ? moment(this.x).format("MMMM Do") : moment(this.x).format("MMMM Do, h:mm a");
                return '<h1>'+ this.y.format() +'</h1><h6>'+ this.series.name +'</h6><b>' + date + '</b>';
            },
            valueDecimals: 2
        },
          legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'top',
             x: 0,
             y: 0,
             borderWidth: 0,
             floating: true
          }
       }
    };
  
  
  /*
   * Initialize our graph
   */
  function init( init_options ) {
    
    $.extend(true, options, init_options);
    
    graph_container = options.graph_options.chart.renderTo;
    
    // setup selection event on graph
    options.graph_options.chart.events = {
      selection: function(event) {
          if (event.xAxis) {
            $('#' + graph_container).trigger({
              'type': 'Highwire.selection',
              'min': event.xAxis[0].min, 
              'max': event.xAxis[0].max
            });
          } else {
            $('#' + graph_container).trigger('Highwire.selection');
          }
      }
    };
    
    // Create graph object
    chart = new Highcharts.Chart(options.graph_options);
  }
  
  
  /*
   * Add a new series to the chart
   */
  function addLine(series) {
    chart.addSeries(series);
  }
  
  
  /*
   * Remove one or all series from graph
   */
  function removeLine(remove_all) {
    
    var remove_all = remove_all || false;
    
    if (chart.series.length > 0) {
      if(remove_all === true) {
        while(chart.series.length > 0)
          chart.series[0].remove(true);
      } else {
        chart.series[0].remove(true);
      }
    }
  }
  
  
  /*
   * Clears the graph
   */
  function clear() {
    removeLine(true);
  }
  
  
  /*
   * Indicate that the graph is being loaded
   */
  function loading(text) {
    
    var indicator = $('<p class="data-refresh-indicator"><i class="icon-refresh icon-spin"></i> <strong>Refreshing</strong><br><em>Graph...</em></p>')
    
    text = text || 'Loading Graph Data';
    
    chart.showLoading(text);
    
    $('.highcharts-loading')
      .html(indicator);
  }
  
  
  /*
   * Indicate that the graph is being loaded
   */
  function noData(text) {
    
    var indicator = $('<p class="data-refresh-indicator"><strong>No Data Available</strong><br><i class="icon-ban-circle"></i></p>')
    
    text = text || 'No Data To Graph';
    
    chart.showLoading(text);
    
    $('.highcharts-loading')
      .html(indicator);
  }
  
  
  /*
   * Draw the Graph
   */
  function render(data) {
    
    var series = {}
      , data_count = 0;
        
    // clear graph
    clear();
    
    // create new graph lines
    $.each(data, function(metric, plot_data) {
      series.name = metric;
      series.data = plot_data[0];
      
      data_count += series.data.length;
      
      addLine(series);
    });
  
    if(data_count == 0) {
      // indicate that no data is available
      noData();
    } else {
      // hide any loading text
      chart.hideLoading();
    }
  }
  
  
  return {
      init: init,
      render: render,
      removeLine: removeLine,
      addLine: addLine,
      clear: clear,
      loading: loading,
      noData: noData
  };
    
}();