/* global Plotly:false, d3:false */

(function() {

// example taken from:
// https://plot.ly/javascript-graphing-library/bar-charts/#stacked-bar-chart

var plotUrlusingJSON = 'https://plot.ly/~PlotBot/38.json';

d3.json(plotUrlusingJSON, function(err, fig) {

    fig.layout.title = 'made from a plotly cloud json';
    
    Plotly.plot('plot1', fig.data, fig.layout);
});

var plotUrlusingCSV = 'https://plot.ly/~PlotBot/38.csv';

d3.csv(plotUrlusingCSV, function(err, dataCSV) {
    var x = [],
        y1 = [],
        y2 = [];

    dataCSV.forEach(function(p) {
        x.push(p['x']);
        y1.push(p['SF Zoo']);
        y2.push(p['LA Zoo']);
    });

    var data = [
        {
            type: 'bar',
            x: x,
            y: y1,
            name: 'SF Zoo'
        },
        {
            type: 'bar',
            x: x,
            y: y2,
            name: 'LA Zoo'
        }
    ];

    var layout = {
        title: 'made from plotly cloud csv',
        barmode: 'stack',
        width: 500,
        height: 500
    };

    Plotly.plot('plot2', data, layout);
});

})();