@domoinc/multiline/TestWidget.js

MultiLine - Domo Widget

var numberData = [
  ['A', 1, 1],
  ['A', 2, 4],
  ['A', 3, 3],
  ['A', 4, 4],
  ['B', 1, 2],
  ['B', 2, 3],
  ['B', 3, 4],
  ['B', 4, 5],
  ['C', 1, 4],
  ['C', 2, 3],
  ['C', 3, 1],
  ['C', 4, 2]
];

var dateData = [
  ['A', '2014-01-01', 1],
  ['A', '2014-01-02', 4],
  ['A', '2014-01-03', 3],
  ['A', '2014-01-04', 4],
  ['A', '2014-01-05', 3],
  ['A', '2014-01-06', 4],
  ['A', '2014-01-07', 3],
  ['A', '2014-01-08', 4],

  ['B', '2014-01-01', 1],
  ['B', '2014-01-02', 3],
  ['B', '2014-01-03', 4],
  ['B', '2014-01-04', 5],
  ['B', '2014-01-05', 2],
  ['B', '2014-01-06', 3],
  ['B', '2014-01-07', 4],
  ['B', '2014-01-08', 5],

  ['C', '2014-01-01', 1],
  ['C', '2014-01-02', 2.5],
  ['C', '2014-01-03', 1],
  ['C', '2014-01-04', 2],
  ['C', '2014-01-05', 4],
  ['C', '2014-01-06', 3],
  ['C', '2014-01-07', 1],
  ['C', '2014-01-08', 2]
];

var objectData = [
  {series: 'A', date: '2014-01-01', y: 1},
  {series: 'A', date: '2014-01-02', y: 4},
  {series: 'A', date: '2014-01-03', y: 3},
  {series: 'A', date: '2014-01-04', y: 4},
  {series: 'A', date: '2014-01-05', y: 3},
  {series: 'A', date: '2014-01-06', y: 4},
  {series: 'A', date: '2014-01-07', y: 3},
  {series: 'A', date: '2014-01-08', y: 4},

  {series: 'B', date: '2014-01-01', y: 1},
  {series: 'B', date: '2014-01-02', y: 3},
  {series: 'B', date: '2014-01-03', y: 4},
  {series: 'B', date: '2014-01-04', y: 5},
  {series: 'B', date: '2014-01-05', y: 2},
  {series: 'B', date: '2014-01-06', y: 3},
  {series: 'B', date: '2014-01-07', y: 4},
  {series: 'B', date: '2014-01-08', y: 5},

  {series: 'C', date: '2014-01-01', y: 1},
  {series: 'C', date: '2014-01-02', y: 2.5},
  {series: 'C', date: '2014-01-03', y: 1},
  {series: 'C', date: '2014-01-04', y: 2},
  {series: 'C', date: '2014-01-05', y: 4},
  {series: 'C', date: '2014-01-06', y: 3},
  {series: 'C', date: '2014-01-07', y: 1},
  {series: 'C', date: '2014-01-08', y: 2}
];

var numberChart = d3.select('#vis')
  .append('svg')
  .attr({
    'height': 500,
    'width': 500
  })
  .append('g')
  .chart('MultiLine')
  .c({
    xScaleType: 'number',
    width: 500,
    height: 500,
    permanentLabelSeries: 2,
    highlightType: 'click',
    showVoronoi: false,
    pointOpacity: 1,
    lineDashArray: function (d, i) {
      if (i === 2) {
        return '15 5';
      }
      return 'none';
    },
    pointStyle: pulseCircle
  });

numberChart.draw(numberData);


/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/

/**
 * Warning: Very CPU intensive.  Keep intervals on constant animations at least
 * 3 seconds.
 */
function pulseCircle (container) {

  container.append('circle')
    .attr({
      'r': numberChart.c('radiusSize'),
      'cx': numberChart.c('radiusSize'),
      'cy': numberChart.c('radiusSize')
    });

  var circle = container.append('circle')
    .attr({
      'cx': numberChart.c('radiusSize'),
      'cy': numberChart.c('radiusSize')
    });

  setInterval(function () {

    circle
      .attr({'r': numberChart.c('radiusSize')})
      .style({'opacity': 1})
      .transition()
      .duration(1000)
      .attr({'r': (numberChart.c('radiusSize') + 5)})
      .style({'opacity': 0});

  }, 3000);

}

numberChart.base.insert('rect', ':first-child')
  .attr('height', 500)
  .attr('width', 500)
  .attr('fill', 'transparent')
  .attr('stroke', 'black')
  .attr('height', 500)
  .attr('width', 500);

var dateChart = d3.select('#vis')
  .append('svg')
  .attr('height', 700)
  .attr('width', 1120)
  .append('g')
  .chart('MultiLine')
  .c({
    height: 700,
    width: 1117,
    strokeWidth: 1.33,
    lineOpacity: 1,
    pointStyle: function (container) {
      d3.domoIcons.diamond(container);
    },
    pointOpacity: 1,
    radiusSize: 4,
    hover: false
  });

dateChart.base.insert('rect', ':first-child')
  .attr('height', 700)
  .attr('width', 1120)
  .attr('fill', 'transparent')
  .attr('stroke', 'black')
  .attr('height', 700)
  .attr('width', 1117);

dateChart.draw(dateData);

setInterval(function () {
  for (var i = 0; i < dateData.length; i++) {
    dateData[i][2] = Math.floor(Math.random() * 10);
  }

  dateChart.draw(dateData);
}, 3000);

var objectChart = d3.select('#vis')
  .append('svg')
  .attr('height', 500)
  .attr('width', 500)
  .chart('MultiLine')
  .c({
    height: 500,
    width: 500,
    xScaleType: 'date',
    pointHighlight: 'x',
    lineHighlight: 'series',
    showTooltipOnPointTrigger: true
  });

objectChart.a('series', function (line) {
  return line.series;
});
objectChart.a('x', function (line) {
  return new moment(line.date).toDate();
});
objectChart.a('y', function (line) {
  return line.y;
});

objectChart.draw(objectData);