Details
-
Type:
Story
-
Status: Done
-
Resolution: Done
-
Fix Version/s: None
-
Component/s: SUIT
-
Labels:None
-
Story Points:8
-
Epic Link:
-
Sprint:SUIT Sprint 2017-3
-
Team:Science User Interface
Description
Plotly is an open source plotting package that is more oriented toward science than Highcharts. Provide a second set of eyes in evaluation of Plotly.js and support DM-9816.
Study some of the following:
Can we control tooltips?
What control do we have during selection?
In general, can monitor or have hooks into their events?
How hard to port histograms, scatter and density?
Do they support optimized updates and not complete redraws?
How would a Plotly react component work?
Overall we want a sense if we should go to the next step of replacing Highcharts. We need to understand how much efforts would be involved.
Attachments
Issue Links
- relates to
-
- Done
Activity
test histogram
My Observations
- The histogram charts want to really histogram the data on the client since we do it on the server the bar chart actually work better
- We need to decide is we like Plotly's mouse feedback enough to keep it. If not we can do something else
var y= [10,23,44,22,20,0,10,33,12,35,10,23,44,22,20,5,10,33,12,35]; |
|
|
var x= [125,130,135,140,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220]; |
var text= y.map((v,idx) => `<b>Bin Center:</b> ${x[idx]/2}<br><b>Range</b>:${x[idx]} to ${x[idx]+5}<br><b>Count:</b> ${v}`); |
|
|
var color= x.map( (v,idx) => idx%2===0 ? 'black': 'gray'); |
|
|
var data = [ |
{
|
//autobinx: false, |
//autobiny: false, |
x: x,
|
y:y,
|
//x0:125, |
//dx: 0, |
text: text,
|
hoverinfo: 'text+x', |
//name:text, |
nbinsx:20,
|
histfunc: 'sum', |
type: 'bar', |
color: 'blue', |
|
|
marker: {
|
color,
|
line: {
|
width: 2,
|
color : 'black' |
},
|
|
//color: 'red', |
},
|
|
}
|
];
|
layout= {
|
bargap:0,
|
}
|
Plotly.newPlot('myDiv', data,layout); |
var myPlot = document.getElementById('myDiv'); |
|
|
myPlot.on('plotly_hover', function(eventData) { |
var xaxis = eventData.points[0].xaxis, |
yaxis = eventData.points[0].yaxis;
|
|
eventData.points.forEach(function(p) { |
console.log('pixel position', xaxis.l2p(p.x), yaxis.l2p(p.y)) |
});
|
})
|
|
Saving to JPEG is built in.
Concept for a variable width Histogram.
var y= [10,23,44,22,20,0,10,33,12,35,10,23,44,22,20,5,10,33,12,35]; |
var xcen= [125,130,135,143,145,150,155,160,165,174.5,175,180,185,190,195,200,205,210,215,220]; |
var binSize= xcen.map( (aX, idx) => idx<xcen.length-1 ? xcen[idx+1]-aX : 5); |
var x= xcen.map( (aX, idx) => aX+ binSize[idx]/2); |
var text= y.map((v,idx) => `<b>Bin Center:</b> ${xcen[idx]/2}<br><b>Range</b>:${xcen[idx]} to ${xcen[idx]+binSize[idx]}<br><b>Count:</b> ${v}<br><b>Bin Size</b>: ${binSize[idx]}`); |
var color= xcen.map( (v,idx) => idx%2===0 ? 'black': 'gray'); |
|
|
var data = [
|
{
|
y:y,
|
x:x,
|
text: text,
|
hoverinfo: 'text+x', |
type: 'bar', |
width: binSize,
|
marker: {
|
color,
|
line: { width: 1, color : 'black'}, |
},
|
}
|
];
|
layout= {bargap:0}; |
Plotly.newPlot('myDiv', data,layout); |
|
|
|
Test scatter
My Observations
{x: [1, 2, 3, 4],y: [2, 1, 3, 4],error_y: {array: [0, 0, 0, 0.1],arrayminus: [0.2, 0.4, 1, 0.2],},error_x: {array: [.05, 0.2, 0.1, 0.1],arrayminus: [0.2, 0.4, .2, 0.2],thickness: 2,width: 12},marker: {size: 10,line: {width: 1,}},line: {width: 1,}},{x: [2],y: [1],marker: {size: 10,line: {width: 1,}}}];x: [[data[0].x[ev.points[0].pointNumber]]],y: [[data[0].y[ev.points[0].pointNumber]]]};Plotly.restyle(myPlot, update, [1])});