AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-09-20 07:58:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added multiple terms plot in terms-plot-tool.

Browse source
This commit is contained in:
Mokaddem 2016-08-23 11:56:32 +02:00
parent 9f2d672ec8
commit 0eba419651
1 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
var/www/templates/terms_plot_tool.html
View file

@ -77,7 +77,8 @@
<div class="form-group input-group" style="margin-top: 30px;"> <div class="form-group input-group" style="margin-top: 30px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-stats"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-stats"></span></span>
<input id="TermInput" class="form-control" placeholder="Term to plot" type="text" style="max-width: 400px;" data-init-plot="{{ term }}"> <input id="TermInput" class="form-control" placeholder="Term to plot" type="text" style="max-width: 400px;" data-init-plot="{{ term }}">
<button id="plot-btn" class="btn btn-info btn-interaction" style="margin-left: 10px;" data-section="followTerm" data-action="add"> Plot a term</button> <button id="plot-btn" class="btn btn-info" style="margin-left: 10px;"><span class="fa fa-caret-down"> Plot a term</button>
<button id="plot-btn-add" class="btn btn-success" style="margin-left: 6px;"><span class="fa fa-plus"></span> Add the term to the chart</button>
</div> </div>
</div> </div>
@ -143,6 +144,7 @@
" - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() ); " - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
$('#plot-btn').click(plotData); $('#plot-btn').click(plotData);
$('#plot-btn-add').click(addData);
$("#TermInput").val($("#TermInput").attr("data-init-plot")); $("#TermInput").val($("#TermInput").attr("data-init-plot"));
$("#plot-btn").click(); $("#plot-btn").click();
@ -158,6 +160,8 @@
</script> </script>
<script> <script>
var plot;
var graph_data = [];
var graph_options = { var graph_options = {
series: { series: {
lines: { lines: {
@ -184,7 +188,28 @@ var graph_options = {
} }
function plotData(){ function plotData() {
var curthis = $(this);
var term = $('#TermInput').val();
var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
var range_end = new Date($( ".sliderRange" ).slider( "values", 1 )).getTime() / 1000;
$.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
graph_data = [];
var to_plot = [];
var curr_data = [];
for(i=0; i<data.length; i++) {
curr_data.push([data[i][0]*1000, data[i][1]]);
}
to_plot.push({ data: curr_data, label: term});
graph_data.push({ data: curr_data, label: term});
plot = $.plot($("#graph"), to_plot, graph_options);
$("#TermInput").val("");
})
}
function addData() {
var curthis = $(this); var curthis = $(this);
var term = $('#TermInput').val(); var term = $('#TermInput').val();
var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000; var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
@ -192,17 +217,17 @@ function plotData(){
$.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){ $.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
var to_plot = []; var to_plot = [];
console.log(data);
var curr_data = []; var curr_data = [];
for(i=0; i<data.length; i++) { for(i=0; i<data.length; i++) {
curr_data.push([data[i][0]*1000, data[i][1]]); curr_data.push([data[i][0]*1000, data[i][1]]);
} }
to_plot.push({ data: curr_data, label: term}); to_plot.push({ data: curr_data, label: term});
var plot = $.plot($("#graph"), to_plot, graph_options); graph_data.push({ data: curr_data, label: term});
plot = $.plot($("#graph"), graph_data, graph_options);
$("#TermInput").val("");
}) })
} }
</script> </script>