plotter/plotter.js at v1.0 · rosmod/plotter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
define(['plotly-js/plotly.min', 'd3'], function(Plotly,d3) {
    'use strict';
    return {
	plotData: function(plotId, data, offset) {
	    // extent returns array: [min, max]
	    var maxXs = Object.keys(data).map(function(key) {
		return d3.extent(data[key].data, function(xy) { return xy[0] - offset; })[1];
	    });
	    var maxYs = Object.keys(data).map(function(key) {
		return d3.extent(data[key].data, function(xy) { return xy[1]; })[1];
	    });
	    var xdomain = d3.max(maxXs);
	    var ydomain = d3.max(maxYs);

	    var pdata = [];

	    Object.keys(data).map(function(key) {
		pdata.push({
		    x : data[key].data.map(function(xy) { return xy[0] - offset; }),
		    y : data[key].data.map(function(xy) { return xy[1]; }),
		    mode: 'lines',
                    type: 'scatter',
		    name: key,
                    marker: {
                        maxdisplayed: 1000 // ,
                        /*
                          color: "rgb(164, 194, 244)",
                          size: 12,
                          line: {
                          color: "white",
                          width: 0.5
                          }
                        */
                    }
		});
	    });

	    var layout = {
		xaxis: {
		    title: 'Time (s)'
		},
                legend: {
                    xanchor: 'right'
                },
                margin: {
                    pad: 0,
                    l: 50,
                    r: 0,
                    b: 50,
                    t: 0
                },
                hovermode: 'closest',
                autosize: true,
                showlegend: true
	    };

	    Plotly.plot(plotId, pdata, layout, {
		modeBarButtons: [[{
		    'name': 'toImage',
		    'title': 'Download plot as png',
		    'icon': Plotly.Icons.camera,
		    'click': function(gd) {
			var format = 'png';
			var id = '#'+plotId;

			/*
			Plotly.Lib.notifier('Taking snapshot - this may take a few seconds', 'long');

			if(Plotly.Lib.isIE()) {
			    Plotly.Lib.notifier('IE only supports svg.  Changing format to svg.', 'long');
			    format = 'svg';
			}
			*/

			Plotly.downloadImage(gd, {
			    'format': format,
			    'width': $(id).width(),
			    'width': $(id).width(),
			})
			    .then(function(filename) {
				//Plotly.Lib.notifier('Snapshot succeeded - ' + filename, 'long');
			    })
			    .catch(function() {
				//Plotly.Lib.notifier('Sorry there was a problem downloading your snapshot!', 'long');
			    });
		    }
		}],[
		    'zoom2d',
		    'pan2d',
		    'select2d',
		    'lasso2d',
		    'zoomIn2d',
		    'zoomOut2d',
		    'autoScale2d',
		    'resetScale2d',
		    'hoverClosestCartesian',
		    'hoverCompareCartesian'
		]],
		/*
		modeBarButtonsToRemove: ['toImage', 'sendDataToCloud'],
		modeBarButtonsToAdd: [{
		    name: 'toImage2',
		    icon: Plotly.Icons.camera,
		    click: function(gd) {
			console.log($('#'+plotId).height());
			console.log($('#'+plotId).width());
			Plotly.downloadImage(gd, {
			    height: $('#'+plotId).height(),
			    width: $('#'+plotId).width(),
			});
		    }
		}],
		*/
	    });
	}
    };
});