Samuele E. Locatelli
125 lines
4.4 KiB
Plaintext
125 lines
4.4 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/WebMasterPages/MAPO_refresh.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="MoonPro.test" %>
|
|
|
|
<%@ Register Src="WebUserControls/mod_realtimeClock.ascx" TagName="mod_realtimeClock" TagPrefix="uc1" %>
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
|
|
<uc1:mod_realtimeClock ID="mod_realtimeClock1" runat="server" />
|
|
|
|
<div id="visualization"></div>
|
|
|
|
<script type="text/javascript">
|
|
// vedere: http://visjs.org/docs/timeline/
|
|
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/WS/MPData.asmx/randomData?numVal=200",
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
success: ChartVis,
|
|
error: OnError
|
|
});
|
|
|
|
// test conversione json
|
|
//var dataBefore = [{ '2015-04-08T17:12:05+00:00': 103.7 }, { '2015-04-08T17:13:05+00:00': 109.5 }, { '2015-04-08T17:14:05+00:00': 106 }, { '2015-04-08T17:15:05+00:00': 112.6 }];
|
|
|
|
//var dataAfter = [];
|
|
|
|
//for (var i = 0; i < dataBefore.length; i++) {
|
|
// var item = dataBefore[i];
|
|
// for (date in item) {
|
|
// dataAfter.push({ x: date, y: item[date] });
|
|
// }
|
|
//}
|
|
|
|
//console.log(dataAfter);
|
|
|
|
// var container = document.getElementById('visualization');
|
|
////added below for display the output
|
|
//container.append(JSON.stringify(dataAfter));
|
|
|
|
function ChartVis(response) {
|
|
// DOM element where the Timeline will be attached
|
|
var container = document.getElementById('visualization');
|
|
//console.log(response);
|
|
var output = response.replace("{\"d\":null}", "");
|
|
console.log(output);
|
|
|
|
|
|
//var dataAfter = [];
|
|
//for (var i = 0; i < output.length; i++) {
|
|
// var item = output[i];
|
|
// for (date in item) {
|
|
// console.log(item);
|
|
// dataAfter.push({ x: date, y: item[date] });
|
|
// }
|
|
//}
|
|
|
|
//console.log(JSON.parse(output[0]));
|
|
//console.log(response.responseText);
|
|
// Create a DataSet (allows two way data-binding)
|
|
//var items = new vis.DataSet(JSON.parse(response.responseText));
|
|
var items = new vis.DataSet([
|
|
{ id: 1, content: 'item 1', start: '2018-04-20 00:00:00', end: '2018-04-24 23:59:59', group: '1', className: 'sv' }
|
|
, { id: 2, content: 'item 2', start: '2018-04-14 00:00:00', end: '2018-04-15 23:59:59', group: '1', className: 'sg' }
|
|
, { id: 3, content: 'item 3', start: '2018-04-18 00:00:00', end: '2018-04-19 23:59:59', group: '1', className: 'sr' }
|
|
, { id: 4, content: 'item 4', start: '2018-04-16 00:00:00', end: '2018-04-17 23:59:59', group: '1', className: 'sv' }
|
|
, { id: 5, content: 'item 5', start: '2018-04-25 00:00:00', end: '2018-04-26 23:59:59', group: '1', className: 'sg' }
|
|
, { id: 6, content: 'item 6', start: '2018-04-27 00:00:00', end: '2018-04-30 23:59:59', group: '1', className: 'sr' }
|
|
]);
|
|
// gruppi
|
|
var groups = [
|
|
{
|
|
id: 1
|
|
, content: 'Macc 1'
|
|
},
|
|
{
|
|
id: 2,
|
|
content: 'Macc 2'
|
|
// Optional: a field 'className', 'style', 'order', [properties]
|
|
}
|
|
// more groups...
|
|
];
|
|
// Configuration for the Timeline
|
|
var options = {
|
|
stack: false
|
|
};
|
|
// Create a Timeline
|
|
var timeline = new vis.Timeline(container, items, groups, options);
|
|
}
|
|
function OnError(response) {
|
|
var output = response.responseText.replace("{\"d\":null}", "");
|
|
//console.log(items);
|
|
|
|
// recupero il container grafico
|
|
var container = document.getElementById('visualization');
|
|
// ITES da deserializzazione risposta
|
|
var items = JSON.parse(output);
|
|
// gruppi
|
|
var groups = [
|
|
{
|
|
id: 1
|
|
, content: 'Stati'
|
|
},
|
|
{
|
|
id: 2,
|
|
content: 'Tempi'
|
|
// Optional: a field 'className', 'style', 'order', [properties]
|
|
}
|
|
// more groups...
|
|
];
|
|
// Configuration for the Timeline
|
|
var options = {
|
|
stack: false
|
|
};
|
|
// Create a Timeline
|
|
var timeline = new vis.Timeline(container, items, groups, options);
|
|
//container.append(response.responseText);
|
|
}
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</asp:Content>
|