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 118 119 120 121 122 123 124
| <div class="row">
<div class="col-lg-12">
<div id="panel-1" class="panel">
<div class="panel-hdr">
<h2>
Statistique des données
</h2>
</div>
<div class="panel-container show">
<div class="panel-content bg-subtlelight-fade">
<div id="js-checkbox-toggles" class="d-flex mb-3">
<div class="custom-control custom-switch mr-2">
<input type="checkbox" class="custom-control-input" name="gra-0" id="gra-0" checked="checked">
<label class="custom-control-label" for="gra-0"> Dépar effectuer</label>
</div>
</div>
<div id="flot-toggles" class="w-100 mt-4" style="height: 300px"></div>
</div>
</div>
</div>
</div>
</div>
@section ScriptsBlock {
<script type="text/javascript">
/* Activate smart panels */
$('#js-page-content').smartPanel();</script>
<script src="~/js/statistics/peity/peity.bundle.js"></script>
<script src="~/js/statistics/flot/flot.bundle.js"></script>
<script src="~/js/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="~/js/datagrid/datatables/datatables.bundle.js"></script>
<script>
/* defined datas */
var dataTargetProfit = [
[1354586000000, 153],
[1364587000000, 658],
[1374588000000, 198],
[1384589000000, 663],
[1394590000000, 801],
[1404591000000, 1080],
[1414592000000, 353],
[1424593000000, 749],
[1434594000000, 523],
[1444595000000, 258],
[1454596000000, 688],
[1464597000000, 364]
]
$(document).ready(function (){
/* flot toggle example */
var flot_toggle = function (){
var data = [{
label: "Dépar effectuer",
data: dataTargetProfit,
color: color.info._400,
bars: {
show: true,
align: "center",
barWidth: 30 * 30 * 60 * 1000 * 80,
lineWidth: 0,
/*fillColor: {
colors: [color.primary._500, color.primary._900]
},*/
fillColor: {
colors: [{
opacity: 0.9
}, {
opacity: 0.1
}]
}
},
highlightColor: 'rgba(255,255,255,0.3)',
shadowSize: 0
}]
var options = {
grid: {
hoverable: true,
clickable: true,
tickColor: 'rgba(0,0,0,0.05)',
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.05)'
},
tooltip: true,
tooltipOpts: {
cssClass: 'tooltip-inner',
defaultTheme: false
},
xaxis: {
mode: "time",
tickColor: 'rgba(0,0,0,0.05)',
},
yaxes: {
tickColor: 'rgba(0,0,0,0.05)',
tickFormatter: function (val, axis) {
return "$" + val;
},
max: 1200
}
};
var plot2 = null;
function plotNow(){
var d = [];
$("#js-checkbox-toggles").find(':checkbox').each(function (){
if ($(this).is(':checked')) {
d.push(data[$(this).attr("name").substr(4, 1)]);
}
});
if (d.length > 0) {
if (plot2) {
plot2.setData(d);
plot2.draw();
} else {
plot2 = $.plot($("#flot-toggles"), d, options);
}
}
};
$("#js-checkbox-toggles").find(':checkbox').on('change', function (){
plotNow();
});
plotNow()
}
flot_toggle();
});
</script>
} |
Partager