gistfile1.js

var adv = {};
adv.Adv = function (data) {
  this.symList = m.prop([]);
  this.barSize = m.prop(10);
  this.days = m.prop(5);
  this.pb = pb.init();
  this.path = this.pb.url + 'adv/';
  this.message = 'AverageDailyVolume';
  this.request = this.pb.ts[this.message + 'Request'];
  this.response = this.pb.ts[this.message + 'Response'];
  this.toArray = function(data) {
    var result = [];
    for (var i = 0; i < data.sym.length; i++) {
      result.push([data.minute[i], data.volume[i]]);
    }
    return result;
  };
  this.getData = function(msg) { 
    var toSend = this.pb.create(this.request, msg);
    var xhrConfig = function (xhr) {
      xhr.setRequestHeader("Authorization", "Basic " + btoa("admin:admin"));
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.withCredentials = true;
      //TODO: parametrize to add ProtoBuf support
      xhr.responseType = "JSON";
    };

    return m.request({
      method: "POST", url: this.path, 
      serialize: JSON.stringify, 
      config: xhrConfig,
      data: toSend
    }).then(this.toArray);
  };
  this.advplot = function(data){
    var cfg = {
      chart: {
        renderTo: "plot"
      },
  
      credits: {
        enabled: false
      },
      
      navigator: {
        enabled: false
      },
      
      plotOptions: {
        series: {
          animation: true
        }
      },

      rangeSelector: {
        enabled: false
      },

      scrollbar: {
        enabled: false
      },

      series: [{
        type: "column",
        name: "volume",
        color: "#317DC9",
        data: data
      }]
    };
    return cfg;
  };
}

adv.controller = function() {
  this.adv = new adv.Adv();
  this.data = this.adv.getData([["a"],1, 2]);
  this.plotConfig = this.data.then(this.adv.advplot);
};


adv.plotter = function(ctrl){
  return function(elem, isInitialized, context) {
    if(!isInitialized) {
      m.startComputation();
      context.chart = Highcharts.StockChart(ctrl.plotConfig());
      m.endComputation();
    } else
      //console.log(context.chart);
      context.chart.redraw();
  };
};
adv.view = function(ctrl){
  return [
    m("H1", "Plot:"),
    //m("#plot", {style: {height:'400px'}}, {config: adv.plotter(ctrl)}),
    m("#plot[style=height:'400px']", {config: adv.plotter(ctrl)}),
    m("p", "footer")
  ];
};

m.module(document.getElementById("content1"), adv);