An error occurred while loading the file. Please try again.
-
Dumoulin Nicolas authored25d74c3f
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Test Plotly</title> <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script src="js/plotly-latest.min.js"></script> <script src="vino-plot.js"></script><body><div class="container"> <h2>Test local load and plot</h2> <div class="row"> <div class="custom-file col-sm-6"> <input type="file" class="custom-file-input" onchange='readText(this)' /><label class="custom-file-label" for="customFile">Choose file</label> </div> </div> <div class="row"><div class="col"> <div class="btn-group btn-group-toggle invisible" data-toggle="buttons" id="dimVisu"> <div class="input-group-prepend"><label class="input-group-text"> Visualisation </label></div> <label class="btn btn-outline-secondary active"> <input type="radio" name="options" checked="true" value="2" autocomplete="off"> 2D </label> <label class="btn btn-outline-secondary"> <input type="radio" name="options" value="3" autocomplete="off"> 3D </label> </div> </div></div> <div id="slicers" class="card invisible"> <div class="card-header"> Slicing </div> <div class="card-body"> </div> </div> <div id="visualization"></div></div><script type="text/javascript"> function updatePlotDimensions() { dataDimensions = data[1].length - 1; // - 1 because it's format "bars" $('#dimVisu').toggle(dataDimensions > 2); dimVisu = $('#dimVisu input:checked').val(); $('#slicers').toggle(dimVisu < dataDimensions); // Resetting sliders $('#slicers .card-body').empty(); var variablesSelect = ''; for (var i = 0; i < dataDimensions; i++) { // TODO put variables names variablesSelect = variablesSelect + '<option value="' + i + '">variable ' + i + '</option>' } for (var i = 0; i < dataDimensions - dimVisu; i++) { // TODO values to fix from metadata var min=0, max=100, step=10, initValue=0; var slicer = $('#slicers .card-body').append('<div class="row slider" id="slider_' + i + '"><div class="input-group col-sm-4">' +'<label class="input-group-text">Slice ' + i + '</label>' + '<select class="custom-select" data-width="50px" id="slider_variable_'+ i + '">"' + variablesSelect + '</select>' + '<label class="input-group-text" title="current value">= <span class="value">'+initValue+'</span></label>' + '</div>' + '<div class="input-group col-sm-8">' + '<span class="input-group-text" title="minimum value">' + min + '</span>' + '<input class="custom-range form-control" type="range" min="' + min + '" value="' + initValue + '" max="' + max + '" step="' + step + '"/>'7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
+ '<span class="input-group-text" title="maximum value">' + max + '</span>'
+ '</div></div>');
slicer.on("input","input",function(evt) {
slicer.find('.value').text($(this).val());
updatePlotSlices();
});
slicer.on('change','#slider_variable_'+ i, function(evt){
var changedSelect = $(this);
var sameValueSelect = $('#slicers').find('select').filter(function(i, elt) {
return ($(elt).attr('id') != changedSelect.attr('id')) && (elt.val() == changedSelect.val());
});
// TODO if sameValueSelect, change this select to the old value of the changed select (look in evt variable)
console.log(sameValueSelect);
updatePlotSlices();
});
}
updatePlotSlices();
}
function updatePlotSlices() {
// list of dimensions sliced and index of coordinate for slicing
dimensionsSliced=[] //[0,3]] // [0,3] means first dimension (0) sliced at index 3
$('#slicers .slider').each(function (i,elt) {
dimensionsSliced.push([$(elt).find('select').val(),$(elt).find('input').val()]);
})
var x = [], y = [];
var dimVisu = $('#dimVisu input:checked').val();
var container = document.getElementById('visualization');
console.log("dimVisu = ",dimVisu);
if (dimVisu == 2) {
var colormarker = 'rgb(255,0,0,0.4)';
var colorline = 'rgba(128, 0, 128, 1)';
var fillcolor = 'rgba(128, 0, 128, 0.7)';
if (dataDimensions == 2) {
data2D = data;
} else {
console.log("dataDimensions = ",dataDimensions);
// TODO slice data using dimensionsSliced
alert('Slicing not yet implemented');
}
bargridPlot(data2D, container, colormarker, colorline, fillcolor)
} else if (dimVisu == 3) {
if (dataDimensions == 3) {
data3D = data;
} else {
// TODO slice data using dimensionsSliced
alert('Slicing not yet implemented');
}
bargridPlot3D(data3D, x, container, colormarker, colorline, fillcolor)
}
}
function plotData(ddata) {
data = ddata;
console.log(data);
dataDimensions = data[1].length - 1; // - 1 because it's format "bars"
if (dataDimensions > 2) {
// priority to 3D visualization
$('#dimVisu input[value=3]').trigger("click")
}
updatePlotDimensions();
}
/******************
* Controls events
*******************/
$('#dimVisu input').on('change', function () {
updatePlotDimensions();
});
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
/******************
* File loading
*******************/
var reader; //GLOBAL File Reader
/**
* Check for the various File API support.
*/
if (window.File && window.FileReader && window.FileList && window.Blob) {
reader = new FileReader();
} else {
alert('The File APIs are not fully supported by your browser. Fallback required.');
}
function readText(filePath) {
var output = ""; //placeholder for text output
if(filePath.files && filePath.files[0]) {
reader.onload = function (e) {
output = e.target.result;
plotData(JSON.parse(output));
};//end onload()
reader.readAsText(filePath.files[0]);
}//end if html5 filelist support
else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
try {
reader = new ActiveXObject("Scripting.FileSystemObject");
var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
output = file.ReadAll(); //text contents of file
file.Close(); //close file "input stream"
plotData(JSON.parse(output));
} catch (e) {
if (e.number == -2146827859) {
alert('Unable to access local files due to browser security settings. ' +
'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
}
}
}
else { //this is where you could fallback to Java Applet, Flash or similar
return false;
}
return true;
}
// Examples
//loadAndPlot('3D_rangeland_bars_10.json', plotData);
//loadAndPlot('2D_lake_bars_10.json', plotData);
</script>
</body>
</html>