@domoinc/multiline-chart/bower_components/Axis/TestWidget.js

MultiLineChart - Domo Widget

var aHeight = 500;
var aWidth = 500;

// var data = [1,4,6474,234,2346];

// var ascale = d3.scale.ordinal().domain(d3.range(0, 1000)).rangePoints([0,aWidth], 0);
var ascale = d3.scale.linear().domain([-1000, 1000]).range([aWidth, 0]);
//var ascale = d3.time.scale().domain([new Date('2014-01-11'), new Date('2014-12-29')]).range([0,250]);

// var ascale = d3.scale.ordinal().domain(['A','B','C'])
//  .rangeRoundBands([0, aWidth], 0.25);

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr('width', 600)
  .attr('height', 600)
  .append("g")
  .attr("transform", "translate(50,50)")
  .chart("Axis")
  // .c('addGridlines', true)
  // .c('orient', 'left')
  .c('width', aWidth)
  .c('height', aHeight)
  .c('scale', ascale);


//Render the chart with data
chart._notifier.showMessage(true);
chart.draw();

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// setTimeout(function(){
//   var data = [];
//   for(var i=0; i<Math.random()*20; i++){
//     // var letter = String.fromCharCode(Math.floor(Math.random()*26 + 65));
//     // data.push(letter);
//     var rInt = getRandomInt(100,1000000);
//     data.push(rInt);
//   }
//  data = _.uniq(data, function(d){
//     return d;
//   });
//  ascale.domain(data)
//   .rangeRoundBands([0, getRandomInt(100,500)], 0.25);
//   chart.c({
//     'orient': 'bottom',
//     'addGridlines': true
//   });
//   chart.c('scale', ascale);
//   chart.draw();
// }, 2500);

// Ordinal
// setInterval(function () {
//   ascale.domain(d3.range(getRandomInt(-1000,100),getRandomInt(101,100000)));

//   var newWidth = getRandomInt(100,960);

//   ascale.rangePoints([0,newWidth],0);

//   d3.select('svg').attr('width', newWidth + 100);

//   chart.c('width', newWidth)
//     .draw();

// }, 3000);


// Linear
// setInterval(function () {
setTimeout(function () {

  ascale.domain([getRandomInt(-100000, 100), getRandomInt(101, 100000)]);

  var newWidth = getRandomInt(100, 500);

  d3.select('svg').attr('width', newWidth + 100);

  ascale.range([newWidth, 0]);

  chart
    .c({
      'height': newWidth,
      'orient': 'left',
      addGridlines: true,
      axesLineColor: 'red',
      axesLabelColor: 'blue',
      axesLabelSize: 14,
      axesLabelFontFamily: 'Phosphate'
    })
    .draw();

}, 5000);