source: branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/App_Code/ChartHelper.cshtml @ 11020

@* HeuristicLab
 * Copyright (C) 2002-2013 Heuristic and Evolutionary Algorithms Laboratory (HEAL)
 *
 * This file is part of HeuristicLab.
 *
 * HeuristicLab is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * HeuristicLab is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with HeuristicLab. If not, see <http://www.gnu.org/licenses/>.
 *@

@helper AjaxDataRenderer()
{
    <script>
        var ajaxDataRenderer = function (url, plot, options) {
            var ret = null;
            $.ajax({
                async: false,
                url: url,
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        };
    </script>
}

@helper LineChartTime(string destinationTag, string url, string title = "", double? minY = null, double? maxY = null, string axisYFormat = null)
{
    <script>
        var @(destinationTag)Plot = $.jqplot("@destinationTag", "@url", {
            title: "@title",
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            },
            seriesDefaults: {
                markerOptions: { show: false }
            },
            dataRenderer: ajaxDataRenderer,
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    pad: 0
                },
                yaxis: {
                    @if (axisYFormat != null)
                    {<text>
                    tickOptions: {
                        formatString: "@axisYFormat",
                    },
                    </text>}
                    autoscale: true,
                    pad: 0,
                    @if (minY != null)
                    {
                        @:min: @minY,
                    }
                    @if (maxY != null)
                    {
                        @:max: @maxY,
                    }
                },
            },
            gridPadding: { left: 50, right: 10 },
            cursor: {
                show: true,
                showTooltip: false,
                zoom: true,
                clickReset: false,
                dblClickReset: false,
                constrainZoomTo: 'x'
            }
        });
        
        @(destinationTag)Plot.replot({ resetAxes: true });
        
        $('#@destinationTag').contextmenu(function() {
            @(destinationTag)Plot.resetZoom();
            @(destinationTag)Plot.replot({ resetAxes: true });
            return false;
        });
        
        $(window).resize(function() {
            @(destinationTag)Plot.replot({ resetAxes: true });
        });
    </script>
}

@helper RefreshChart(string destinationTag, string url, string startDateVar, string endDateVar)
{
  <text>
  $.ajax({url: "@(new HtmlString(url))?start=" + @startDateVar + "&end=" + @endDateVar, datatype: "json", success: function(result) {
    for (var i = 0; i < result.length; i++) {
      @(destinationTag)Plot.series[i].data = result[i];
    }
    @(destinationTag)Plot.replot({ resetAxes: true })
  }});
  </text>
}

@helper TasksForUser(string container, string destinationTag, string url, string userName, string startDate = null, string endDate = null)
{
  <text>
    $.ajax({url: "@(new HtmlString(url))?userName=" + @(userName) + "&start=" + @startDate + "&end=" + @endDate, datatype: "json", success: function(result) {
      $("#@container").html("");
      if(result[0].length==0) {
        $("#@container").append(
          '<section class="chartContainer"><h1 class="title">' + @userName + ' has no tasks for the given time period!</h1></section>'
        )
      }
      var waitTime;
      var transferTime;
      var runTime;
      var seriesDescriptions = ["Time waiting","Time transferring","Time calculating"];

      //Globally accesible, for use when resizing, eliminates extra DB request
      window["numberTasks"] = result[0].length;

      //For each result create a seperate collapsable section with a chart and info label
      for(var i = 0; i < result[0].length; i++){
        $("#" + "@container").append(
          '<section class="chartContainer"><h1 class="title">Task ' + (i + 1) + 
          '</h1><button class="collapse" onclick="collapseSection(this)">-</button><div id="@(destinationTag)' + i + 
          '"></div><label id="@(destinationTag)' + i + 'Info"></label></section>'
        )
        waitTime = [result[0][i]];
        transferTime = [result[1][i]];
        runTime = [result[2][i]];
        window["@(destinationTag)Plot" + i] = $.jqplot("@destinationTag" + i, [waitTime,transferTime,runTime], {
          //stackSeries: true,
          seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            shadowAngle: 135,
            //rendererOptions: {
            //  barDirection: 'horizontal'
            //},
            pointLabels: {show: true, formatString: '%.3f'}
          },
          series:[
            {label:'Waiting'},
            {label:'Transferring'},
            {label:'Calculating'}
          ],
          legend: {
            show: true,
            location: 'e',
            placement: 'outside'
          },
          axes: {
            xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer,
              showLabel: false,
              pad: 0
            },
            yaxis: {
              pad: 0
            }
          },
          cursor: {
            showTooltip: false
          }
        });
        /* Bind a datalistener to each chart and display details of clicked
          upon data in the label below the chart */
        $("#" + "@(destinationTag)" + i).bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
          $("#" + $(this).attr('id') + "Info").html(seriesDescriptions[seriesIndex] + ': ' + data[1]);
        }); 
      }
    }});
  </text>
}

@helper ResizeTasks(string destinationTag)
{
  <text>
  $(window).resize(function() {
    for(var i = 0; i < numberTasks; i++) {
      window[ "@(destinationTag)Plot" + i].replot({ resetAxes: true });
    }
  });
  </text>
}

@* OLD SMOOTHIE CHART FUNCTIONS *@
@*@helper CreateSmoothieChart(string destinationTag, string stroke, string fill, string label)
{
  <text>
    var @(destinationTag)Smoothie = new SmoothieChart({
      grid: {
        strokeStyle: '@stroke', fillStyle: '@fill',
        lineWidth: 1, millisPerLine: 450, verticalSections: 4,
      },
      labels: {
        fillStyle: '@label'
      }
    });

    var @(destinationTag)TimeSeries = new Array()
  </text>
}

@helper SetSmoothieCanvas(string destinationTag, string delay)
{
  <text>
  @(destinationTag)Smoothie.streamTo(document.getElementById("@destinationTag"), @delay);
  </text>
}

@helper AssignTimeSeries(string seriesName, string destinationTag, string stroke, string fill)
{
  <text>
  var @(seriesName)TS = new TimeSeries();
  @(destinationTag)Smoothie.addTimeSeries(@(seriesName)TS, { strokeStyle: '@stroke', fillStyle: '@fill', lineWidth: 3 });
  @(destinationTag)TimeSeries.push(@(seriesName)TS);
  </text>
}

@helper UpdateChartData(string destinationTag, string url)
{
  <text>
  $.ajax({
    url: '@(url)', datatype: "json", success: function (result) {
      var i
      for (i = 0; i < @(destinationTag)TimeSeries.length; i++) {
        @(destinationTag)TimeSeries[i].append(new Date().getTime(), result[i]);
      }
    }
  });
  </text>
}*@

@helper SetStreamingProperties(int refresh, int chartLength, int upperY) {
  <text>
  //Refresh time (in millisec)
  var refreshRate = @(refresh);
  //Number of data points on chart
  var chartSize = @(chartLength);
  //Amount to add to max Y value
  var upperYBuffer = @(upperY);

  //Used to return a string containing the names of the series
  //to be used in plot creation
  function getSeries(numberData,dataName){ 
    var result = "[";
    for(i=0; i < numberData; i++) {
      if(i < numberData -1) {
        result += dataName + i + ",";
      }
      else {
        result += dataName + i + "]";
      }
    }
    return result;
  }
  </text>
}

@helper CreateStreamChart(string dataName, string destinationTag, string url, string title, string format = null, double? maxY = null) {
  <text>
  //Get current time, used to create initial values
  var @(dataName)CurrentDate = (new Date()).getTime();

  var @(dataName)Data = [];
  var @(dataName)CurrentValue = [];

  //Get the most recent value(s) from the given URL
  $.ajax({ 
    async: false, url: '@(url)', datatype: "json", success: function (result) {
      for(i = 0; i < result.length; i++) {
        @(dataName)CurrentValue[i] = result[i];
      }
    }
  });
  
  //Create a chartSize worth of data using CurrentDate and CurrentValue
  //for each CurrentValue
  for(i = 0; i < @(dataName)CurrentValue.length; i++) {
    window["@(dataName)Data" + i] = [];
    for (j = 0; j < chartSize; j++) {
      window[ "@(dataName)Data" + i].push([@(dataName)CurrentDate - (chartSize - 1 - j) * refreshRate, @(dataName)CurrentValue[i]]);
    }
  }

  //Options for the chart to be created
  var @(destinationTag)PlotOptions = {
    title: "@title",
    axes: {
      xaxis: {
        numberTicks: 4,
        renderer: $.jqplot.DateAxisRenderer,
        tickOptions: { formatString: '%H:%M:%S' },
        min: window["@(dataName)Data" + 0][0][0],
        max: window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][0]
      },
      yaxis: {
        @if (format != null)
        {<text>
        tickOptions: {
            formatString: "@format",
        },
        </text>}
        min: 0, 
        @if (maxY != null) {
          @:max: @maxY,
        }
        else{
          @:max: window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][1] + upperYBuffer,
        }
        numberTicks: 6
      }
    },
    seriesDefaults: {
      rendererOptions: { smooth: true },
      markerOptions: {
        show: false
      }
    }
  };

  //Declares the jqPlot variable, evals the string of series returned
  //from getSeries which allows for any number of series
  window[ "@(destinationTag)Plot"] = $.jqplot('@destinationTag', eval(getSeries(@(dataName)CurrentValue.length,"@(dataName)Data")), @(destinationTag)PlotOptions);
  </text>
}

@helper UpdateStreamChart(string dataName, string destinationTag, string url, string fixedY = null)
{
  <text>
  //If the data is beyond chartSize use shift to trim one off the end
  for(i = 0; i < @(dataName)CurrentValue.length; i++) {
    if (window["@(dataName)Data" + i].length > chartSize - 1) {
      window["@(dataName)Data" + i].shift();
    }
  }

  //Get the up-to-date data, each result assigned to it's own array
  $.ajax({
    async: false, url: '@(url)', datatype: "json", success: function (result) {
      for(i = 0; i < result.length; i++) {
        window[ "@(dataName)Data" + i].push([(new Date()).getTime(), result[i]]);
      }
    }
  });

  //If the plot exists currently destroy it
  if ( @(destinationTag)Plot) {
    @(destinationTag)Plot.destroy();
  }

  //Assign series
  for(i = 0; i < @(dataName)CurrentValue.length; i++) {
    @(destinationTag)Plot.series[i].data = window["@(dataName)Data" + i];
  }

  //Recalculate x and possibly y axis max and mins
  @(destinationTag)PlotOptions.axes.xaxis.min = window["@(dataName)Data" + 0][0][0];
  @(destinationTag)PlotOptions.axes.xaxis.max = window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][0];
  @if (fixedY == null) {
    @:@(destinationTag)PlotOptions.axes.yaxis.max = window["@(dataName)Data" + 0][window["@(dataName)Data" + 0].length - 1][1] + upperYBuffer;
  }

  //Re-assigns the jqPlot variable, evals the string of series returned
  //from getSeries which allows for any number of series
  @(destinationTag)Plot = $.jqplot('@destinationTag', eval(getSeries(@(dataName)CurrentValue.length,"@(dataName)Data")), @(destinationTag)PlotOptions);
  </text>
}

@helper MakeCollapsable()
{
  <text>
  $(document).ready(function() {
    $(".collapse").click(function () {
      if ($(this).html() == "-") {
        $(this).parent().children("canvas, div, fieldset, label").fadeOut();
        $(this).html("+");
      }
      else {
        $(this).parent().children("canvas, div, fieldset, label").fadeIn();
        $(this).html("-");
      }
    });
  });
  </text>
}