Plotly test

A test of the Plotly library

by James Harris

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="chart" />

JavaScript

var chart = document.getElementById('chart'),
  layout = {
  	xaxis: {
    	side: 'top'
    },
    yaxis: {
    	domain: [0.280, 0.633],
      fixedrange: true,
      title: 'Items'
    },
    legend: {
      show: false
    },
    yaxis2: {
      domain: [0, 0.266],
      fixedrange: true,
      title: 'Cost'
    },
    showhints: false,
    showlegend: true,
    dragmode: 'pan'
  },
  options = {
    modeBarButtonsToRemove: [
      'toImage',
      'sendDataToCloud',
      'zoom2d',
      'select2d',
      'lasso2d', 
      'hoverClosestCartesian', 
      'hoverCompareCartesian'
    ],
    scrollZoom: true,
    displayModeBar: true
  },
  data = [{
    x: ['2013-10-04', '2013-11-04', '2013-12-04'],
    y: ['1', '20', '50'],
    type: 'scatter',
    yaxis: 'y2',
    legendgroup: 'Trends'
  }, {
    x: ['2013-10-04', '2013-11-04', '2013-12-04'],
    y: ['Item1', 'Item1', 'Item1'],
    mode: 'lines+markers+text',
    text: ['\uf13d', '\uf13d', '\uf13d'],
    textfont: {
      family: 'FontAwesome',
      size: 8,
      color: '#FFF'
    },
    marker: { 
    	size: 14, 
      symbol: 'square'
    },
    type: 'scatter',
    legendgroup: 'Test'
  }, {
    x: ['2013-10-03', '2013-11-07', '2013-12-12'],
    y: ['Item2', 'Item2', 'Item2'],
    type: 'scatter',
    legendgroup: 'Test'
  }];

Plotly.newPlot(chart.id, data, layout, options);

Plotly.restyle(chart.id, 'marker.color', [
  ['#1f77b4', 'green', '#1f77b4']
], [0]);


chart.on('plotly_click', function(data) {
  var pts = '';
  for (var i = 0; i < data.points.length; i++) {

    line = {
      type: 'line',
      x0: data.points[i].x,
      y0: 0,
      x1: data.points[i].x,
      yref: 'paper',
      line: {
        color: 'rgb(55, 128, 191)',
        width: 3
      }
    }
    
    shapes = []
    if (!chart.layout.shapes || chart.layout.shapes[0].x0 !== line.x0) {
      shapes.push(line);
    }
    
    Plotly.relayout(
    chart.id, 
    { shapes: shapes })
  }
});