MoonPro.net/MP-Site/test.aspx

<%@ 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" %>
<%@ Register Src="~/WebUserControls/mod_sequencerStatiJS.ascx" TagPrefix="uc1" TagName="mod_sequencerStatiJS" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <uc1:mod_realtimeClock ID="mod_realtimeClock1" runat="server" />

  <%--<div id="timelineArea"></div>--%>
  <div id="tcArea"></div>

  <script type="text/javascript">
    // vedere: http://visjs.org/docs/timeline/

    $(document).ready(reloadData)

    //function pageLoad() {
    //  reloadData
    //}

    // (ri)caricamento dati
    function reloadData() {
      //// load e draw timeline
      //$.ajax({
      //  type: "GET",
      //  url: "/WS/MPData.asmx/randomData?numVal=1000",
      //  contentType: "application/json; charset=utf-8",
      //  dataType: "json",
      //  success: plotSeqStati,
      //  error: plotSeqStati
      //});

      // load e draw TC scatter
      $.ajax({
        type: "GET",
        url: "/WS/MPData.asmx/randomData?numVal=1000",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: plotTC,
        error: plotTC
      });
    }

    //function ChartVis(response) {
    //  // DOM element where the Timeline will be attached  
    //  var container = document.getElementById('timelineArea');
    //  //console.log(response);
    //  var output = response.replace("{\"d\":null}", "");
    //  console.log(output);

    //  // 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 plotSeqStati(response) {
      var output = response.responseText.replace("{\"d\":null}", "");

      // recupero il container grafici
      var container = document.getElementById('timelineArea');
      // ITES da deserializzazione risposta
      var items = JSON.parse(output);
      console.log(items);
      // gruppi
      var groups = [
        {
          id: 1
          , content: 'Stati'
        }
      ];
      // Configuration for the Timeline  
      var options = {
        stack: false
        , horizontalScroll: true
        , moveable: true
        , zoomable: true
      };
      // Crea la Timeline
      var timeline = new vis.Timeline(container, items, groups, options);
      // crea lo scatter dei TC
      var scatter = new vis.pl
    }

    function plotTC(response) {
      var output = response.responseText.replace("{\"d\":null}", "");

      // recupero il container grafici
      var container = document.getElementById('tcArea');
      //// ITES da deserializzazione risposta
      //var items = JSON.parse(output);
      //console.log(items);
      //// gruppi
      //var groups = [
      //  {
      //    id: 1
      //    , content: 'Stati'
      //  }
      //];
      //// Configuration for the Timeline  
      //var options = {
      //  stack: false
      //  , horizontalScroll: true
      //  , moveable: true
      //  , zoomable: true
      //};

      var items = [
        { x: '2018-06-11', y: 10, group: 0 },
        { x: '2018-06-12', y: 25, group: 0 },
        { x: '2018-06-13', y: 30, group: 0 },
        { x: '2018-06-14', y: 10, group: 1 },
        { x: '2018-06-15', y: 15, group: 1 },
        { x: '2018-06-16', y: 30, group: 1 }
      ];

      var dataset = new vis.DataSet(items);
      var options = {
        //start: '2018-06-10',
        //end: '2018-06-18',
        sort: false,
        sampling: true,
        style: 'points',
        height: '80px'
      };

      // crea lo scatter dei TC
      var scatter = new vis.Graph2d(container, dataset, options);
    }


  </script>

  <uc1:mod_sequencerStatiJS runat="server" ID="mod_sequencerStatiJS" />
</asp:Content>