| <div class="panel right-align"> |
| <div> |
| <input type="text" name="daterange" value="01/01/2015 - 01/31/2015" /> |
| </div> |
| <div id = "{{element_name}}" class="line_chart" ></div> |
| <script> |
| |
| google.charts.setOnLoadCallback(drawChartReportPerDay); |
| |
| const arrayColumn = (arr, n) => arr.map(x => x[n]); |
| |
| function drawChartReportPerDay(element) { |
| element = "heartbeats" |
| var chart = new google.visualization.ColumnChart(document.getElementById("{{element_name}}")); |
| var data = new google.visualization.DataTable(); |
| var options = { |
| title: "{{ title }}", |
| legend: { position: 'bottom' }, |
| chartArea: {width: '100%', height: '100%'}, |
| legend: {position: 'in'}, |
| titlePosition: 'in', axisTitlesPosition: 'in', |
| bar: { groupWidth: '175%' }, |
| isStacked: true, |
| hAxis: {textPosition: 'in', |
| viewWindow: { |
| }, |
| }, vAxis: {textPosition: 'in'} |
| }; |
| $.getJSON( "{% url 'hiccup_stats_api_v1_device_report_history' uuid %}", function( json_response ) { |
| res = []; |
| |
| if (json_response.results) |
| res = json_response.results; |
| else |
| res = json_response; |
| |
| reformated_array = res.map(function(obj){ |
| ret = [new Date(obj.date), obj.heartbeats, obj.prob_crashes, obj.smpl, obj.other]; |
| return ret; |
| }); |
| dates_sorted = arrayColumn(reformated_array,0).sort(function(a,b){ |
| return a - b; |
| }); |
| |
| // Define the start and end of the range of dates we should look at. |
| var hiccup_introduction_date = new Date("2016-08-01"); |
| var start_date = hiccup_introduction_date; |
| for (let date_sorted of dates_sorted) { |
| if (date_sorted >= hiccup_introduction_date) { |
| start_date = date_sorted; |
| break; |
| } |
| } |
| var end_date = dates_sorted[dates_sorted.length - 1]; |
| |
| data.addColumn('date', 'Date'); |
| data.addColumn('number', 'Heartbeats'); |
| data.addColumn('number', 'prob. Crashes'); |
| data.addColumn('number', 'SMPL'); |
| data.addColumn('number', 'other'); |
| data.addRows(reformated_array); |
| chart.draw(data, options); |
| initDateRange(chart, data, start_date, end_date, options); |
| |
| }); |
| } |
| |
| function initDateRange(chart, data, start_date, end_date, options) { |
| $('input[name="daterange"]').daterangepicker( { |
| locale: { |
| format: 'YYYY-MM-DD' |
| }, |
| showDropdowns: true, |
| endDate: end_date, |
| startDate: start_date, |
| minDate: start_date, |
| maxDate: end_date, |
| opens: "left", |
| }, |
| function(start, end, label) { |
| options.hAxis.viewWindow.min=new Date(start); |
| options.hAxis.viewWindow.max=new Date(end); |
| chart.draw(data, options); |
| }); |
| options.hAxis.viewWindow.min=start_date; |
| options.hAxis.viewWindow.max=end_date; |
| chart.draw(data, options); |
| } |
| </script> |