<% /*
    $Revision$
    $Id$

    File            fac_report_graph.inc
    Description:    Definieer fac_usrrap_list_graph die scaffolding_list overruled
                    voor grafieken (jqPlot)
*/

function fac_usrrap_list_graph (model, scf_params)
{
    var transit = "";
    if ("transit" in scf_params)
        transit = "&" + scf_params.transit.name + "=" + safe.url(scf_params.transit.val);

    var xxx_params = { filter : scf_params.filter || shared.qs2json(model),
                       columns: scf_params.list.columns,
                       groupby: scf_params.list.groupby,
                       scf_graph: "on",
                       urllink: scf_params.urllink };

    var pivot = ("scf_pivot" in xxx_params.filter)? xxx_params.filter.scf_pivot == 1 : model.list.autoPivot&2

    // Als er een url-key kolom op het eind aanwezig is dan deze kolom niet meetellen.
    var pivotcol;
    if (pivot)
      pivotcol = xxx_params.columns[xxx_params.columns.length - 2 - (urllink_index == -1? 0 : 1)];

    // Voor een rapport heb je minstens twee kolommen nodig en met draaitabel drie kolommen
    if (( pivot && ((urllink_index > -1 && scf_params.list.columns.length < 4)      // Draaitabel (Ja), Klik-actie (Ja).
                || (urllink_index == -1 && scf_params.list.columns.length < 3))) || // Draaitabel (Ja), Klik-actie (Nee).
        (!pivot && ((urllink_index > -1 && scf_params.list.columns.length < 3)      // Draaitabel (Nee), Klik-actie (Ja).
                || (urllink_index == -1 && scf_params.list.columns.length < 2))))   // Draaitabel (Nee), Klik-actie (Nee).
      shared.simpel_page(L("lcl_usrrap_invalid_more_columns"));

    var xxx_array = model.REST_GET(xxx_params);
    // Let op bij draaitabel met pivot kolommen, xxx_params en daarmee ook scf_params.list.columns zijn nu ook aangepast.
    var xxx_columns = (xxx_params.filter.columns ? xxx_params.filter.columns.split(",") : null);

    graphData = { teller: xxx_array.length
                , arr_x: []
                , arr_y: []
                , arr_xy: []
                };

    graphAxes = { url: urllink_col? urllink_col : null
                , xas: { naam: model.fields[scf_params.list.columns[0]].label, dbs: model.fields[scf_params.list.columns[0]].dbs }
                , yas: []
                , zas: { naam: ((pivot && xxx_columns && xxx_columns[2]) ? model.fields[xxx_columns[2]].label : null)}
                };

    for (var c = 1; c < scf_params.list.columns.length; c++)
    {
        if (scf_params.list.columns[c] !== urllink_col)
        {
          graphData.arr_y.push([]);
          graphAxes.yas.push({ naam: model.fields[scf_params.list.columns[c]].label });
        }
    }

    var typX = model.fields[scf_params.list.columns[0]].orgtyp;
    var lineRenderer = typX=="date" || typX=="datetime";

    var nn_data = xxx_array.length * scf_params.list.columns.length;
    if (nn_data > 250000)
    {
        __DoLog("Te veel ({0}*{1}={2}) datapunten voor grafiek.".format(xxx_array.length, scf_params.list.columns.length, nn_data));
        shared.simpel_page("Too many ({0}*{1}={2}) datapoints for graph.".format(xxx_array.length, scf_params.list.columns.length, nn_data));
    }

    for (var i = 0; i < xxx_array.length; i++)
    {
      var newtyp = model.fields[scf_params.list.columns[0]].typ;
      var txtX = xxx_array[i][scf_params.list.columns[0]];
      if (newtyp == "datetime")
          txtX = toDateTimeString(txtX);
      else if (newtyp == "time")
          txtX = toTimeString(txtX);
      else if (typeof txtX == "date" || txtX instanceof Date)
          txtX = toDateString(txtX);

      graphData.arr_x.push(txtX);

      for (var c = 1; c < scf_params.list.columns.length; c++)
      {
        if (scf_params.list.columns[c] !== urllink_col)
        { // Als (urllink_index < c) dan moet er 1 van de index van arr_y afgetrokken worden want voor de url wordt geen y-waarde weergegeven.
          // Als er geen draaitabel actief is dan staat de url-key kolom aan het eind van de kolommen en heeft dan de hoogste index. Er geldt dan altijd (urllink_index > c).

          var ywaarde = pivot && xxx_array[i][scf_params.list.columns[c]]? xxx_array[i][scf_params.list.columns[c]] : xxx_array[i][scf_params.list.columns[c]];
          var ywaarde_1 = pivot && xxx_array[i][scf_params.list.columns[c - 1]]? xxx_array[i][scf_params.list.columns[c - 1]] : xxx_array[i][scf_params.list.columns[c - 1]];
          if (graph_type != 4)
          { // Voor de lijngrafiek moet een null waarde niet getoond worden en een 0 waarde wel.
            ywaarde = ywaarde || 0;
          }
          graphData.arr_y[c - 1].push(ywaarde);
          graphData.arr_xy.push([ywaarde_1, ywaarde] || 0);
        }
      }
    }

    var aantal_scf = (scf_params.list.columns.length - 1); // Aantal subcategorieën (series)
    var aantal_xxx = 0;
    for (var i = 0; i < xxx_array.length; i++)
    {
      aantal_xxx += xxx_array[i].scf_subaantal; // Aantal subcategorieën per x-as categorie.
    }

    var teller;
    var limiet = [model.limit0 , model.limit1, model.limit2, model.limit3];
    if (graph_type == 2 || graph_type == 5)
    { // Er moeten minstens twee aangrenzende limieten zijn ingevuld. Als limiet1 is ingevuld, dan moet ook limiet0 of limiet3 zijn ingevuld.
      for (var k = 0; k < limiet.length; k++)
      {
        if (limiet[k] != null)
        {
          teller = k;
          break;
        }
      }
      if (teller != null && (teller == 3 || limiet[teller + 1] == null))
      {
        shared.simpel_page(L("lcl_usrrap_invalid_limits"));
      }
    }

    // Testen of van extern toe te voegen gegevens een correct JSON format bevat.
    rapport.graph_options = rapport.graph_options || "{}";
    var udr_graph_typ_json = "";
    switch (graph_type)
    {
      case 1: udr_graph_typ_json = "udr_graph_bar_json"; break;
      case 2: udr_graph_typ_json = "udr_graph_gauge_json"; break;
      case 3: udr_graph_typ_json = "udr_graph_pie_json"; break;
      case 4: udr_graph_typ_json = "udr_graph_line_json"; break;
      case 5: udr_graph_typ_json = "udr_graph_block_json"; break;
    }
    rapport.default_options = S(udr_graph_typ_json) || "{}";
    var test = 0;
    try
    {
        test = 1;
        var x_1 = JSON.parse(rapport.graph_options);
        test = 2;
        var x_1 = JSON.parse(rapport.default_options);
    }
    catch(e)
    {
        var description = (e.description ? ": " + e.description : "");
        var warning = L("lcl_dirty")+ " JSON{0} '{1}'" + description;
        switch (test)
        {
            case 1: shared.internal_error( warning.format("", L("lcl_usrrap_graphoptions")) );
            case 2: shared.internal_error( warning.format(" "+L("lcl_fac_setting"), udr_graph_typ_json));
        }
    }

    graphInit = { title           : model.records_title
                , graph_type      : graph_type
                , maxrows         : 0
                , limiet          : [model.limit0 , model.limit1, model.limit2, model.limit3]
                , report_options  : JSON.parse(rapport.graph_options) || {}
                , default_options : JSON.parse(rapport.default_options) || {}
                , sql_orderby     : "" //oRs("fac_usrgraph_orderby").Value || ""
                //, sql : sql_select
                };
    var asWidget = getQParamInt("asWidget", 0) == 1;
%>
<html<%=asWidget ? " style=\"overflow:hidden\"" : ""%>>
<head>
<%  FCLTHeader.Generate(); %>
    <script>
    function json_reviver(nm, val)
    {
        // JSON.parse ondersteund niet het gebruik van functienamen binnen een object.
        // Door het dan als een string "te_gebruiken_functie" te schrijven heb je wel een geldig json-object.
        // In deze functie wordt tijdens het parsen gezocht op een van de bekende functiename voor jqplot en dan wordt alleen de te_gebruiken_functie terug gegeven.
        // Na het parsen bevat het json-object wel de te_gebruiken_functie.
        if (val && (typeof val == "string"))
        {
            switch(val)
            {
                case "$.jqplot.Highlighter":                val = $.jqplot.Highlighter; break;
                case "$.jqplot.PieRenderer":                val = $.jqplot.PieRenderer; break;
                case "$.jqplot.BarRenderer":                val = $.jqplot.BarRenderer; break;
                case "$.jqplot.CanvasAxisLabelRenderer":    val = $.jqplot.CanvasAxisLabelRenderer; break;
                case "$.jqplot.CanvasAxisTickRenderer":     val = $.jqplot.CanvasAxisTickRenderer; break;
                case "$.jqplot.CanvasOverlay":              val = $.jqplot.CanvasOverlay; break;
                case "$.jqplot.CanvasTextRenderer":         val = $.jqplot.CanvasTextRenderer; break;
                case "$.jqplot.CategoryAxisRenderer":       val = $.jqplot.CategoryAxisRenderer; break;
                case "$.jqplot.MeterGaugeRenderer":         val = $.jqplot.MeterGaugeRenderer; break;
                case "$.jqplot.PointLabels":                val = $.jqplot.PointLabels; break;
            }
        }
        return val;
    }
    var pivot = <%=pivot? 1 : 0%> == 1;
    var JSONdata = "<%=safe.jsstring(JSON.stringify(graphInit))%>";
    var l_init = JSON.parse(JSONdata, json_reviver);
    var default_options = l_init.default_options;
    var report_options = $.extend(default_options, l_init.report_options);

    var JSONdata = "<%=safe.jsstring(JSON.stringify(graphAxes))%>";
    var l_axes = JSON.parse(JSONdata);

    var JSONdata = "<%=safe.jsstring(JSON.stringify(graphData))%>";
    var l_data = JSON.parse(JSONdata);

    var l_arr_x = [];
    for (var x = 0; x < l_data.arr_x.length; x++)
    {
      if (l_data.arr_x[x] === null || l_data.arr_x[x] == "")
          l_arr_x[x] = " ";
      else
          l_arr_x[x] = l_data.arr_x[x];
    }
    var l_arr_y = l_data.arr_y;
    var l_xas_naam = l_axes.xas.naam;
    var l_xas_url = l_axes.url;
    var l_xas_dbs = l_axes.xas.dbs;
    var l_yas_naam = (l_axes.zas.naam ? l_axes.zas.naam : l_axes.yas[0].naam);
    var l_yas_count = l_axes.yas.length;

    var l_colors = (l_yas_count==1?<%=S("udr_graph_colors1")%>:<%=S("udr_graph_colors2")%>);

    var l_labels = [];
    for (var y = 0; y < l_axes.yas.length; y++)
    {
      l_labels.push(l_axes.yas[y].naam || "&nbsp;");
    }

    // Als niet alle resultaten getoond dienen te worden moet je ook kijken welke labels er getoond dienen te worden.
    // Omschrijving x-as moet gekoppeld worden aan label omschrijving.
    // De rapportagemaker is verantwoordelijk dat er niet twee subproductgroepen met dezelfde omschrijving zijn?
    var JSONdata = "<%=safe.jsstring(JSON.stringify(xxx_array))%>";
    var l_xxxlabel = JSON.parse(JSONdata);
    var l_urllink = "<%=safe.htmlattr(xxx_params.urllink.link)%>";
    var usrrap_maxresults = <%=usrrap_maxresults%>;

    $.jqplot.config.enablePlugins = true;
    var handler = function(ev, gridpos, datapos, neighbor, plot)
                  {
                    if (neighbor)
                    {
                      if (pivot && l_xxxlabel[neighbor.pointIndex].scf_urlkey)
                      {
                        var seriename = l_axes.yas[neighbor.seriesIndex].naam;
                        var url_key = l_xxxlabel[neighbor.pointIndex].scf_urlkey[seriename];
                        FcltMgr.openDetail(l_urllink + url_key, l_arr_x[neighbor.pointIndex]);
                      }
                      else if (l_xxxlabel[neighbor.pointIndex][l_xas_url])
                      {
                        var url_key = l_xxxlabel[neighbor.pointIndex][l_xas_url];
                        FcltMgr.openDetail(l_urllink + url_key, l_arr_x[neighbor.pointIndex]);
                      }
                    }
                  };
    $.jqplot.eventListenerHooks.push(["jqplotClick", handler]);
<%
    switch (graphInit.graph_type)
    {
        case 1: // BarChart
%>
            var l_colors = (l_yas_count == 1?<%=S("udr_graph_colors1")%> : <%=S("udr_graph_colors2")%>);
            if (report_options.seriesColors && report_options.seriesColors.lenght > 0)
                l_colors = report_options.seriesColors;
            var effectivedata = l_arr_y;
            var props = { seriesDefaults:{ renderer: $.jqplot.BarRenderer
                                         , rendererOptions: { fillToZero: true }
                                         , pointLabels: { show: false }
                                         }
                        , stackSeries: true
                        //, series:[{label: "a"}, {label: "b"}]
                        , legend: { show: (l_yas_count > 1)
                                  , placement: (l_yas_count > 1? "outsideGrid" : "insideGrid")
                                  , location: "ne"
                                  , labels: l_labels
                            }
                        , title: l_init.title
                        , seriesColors: l_colors
                        , axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer
                                         , ticks: l_arr_x
                                         , label: l_xas_naam
                                         , tickRenderer: $.jqplot.CanvasAxisTickRenderer
                                         , tickOptions: { enableFontSupport: true
                                                        , angle: 30
                                                        , fontSize: "9pt"
                                                        }
                                         }
                                , yaxis: { label: l_yas_naam
                                         , tickOptions: { formatString: "%d"
                                                        }
                                         }
                                }
                        , highlighter: { show: true
                                       , showMarker: false
                                       , tooltipAxes: "y"
                                       , tooltipLocation: "n"
                                       , formatString: "<table style='background-color: #cccccc' class='xjqplot-highlighter'><tr><td>%s</td></tr></table>"
                                       }
                        };
<%
            break;
        case 2:  // MeterGauge
%>
            var l_x = l_arr_x[0];
            var l_y = l_arr_y[0];

            var effectivedata = [ [100 * l_x / l_y] ];
            var l_label = l_init.title + l_x + "/"  + l_y;
            var l_limits = [];
            var l_colors = <%=S("udr_graph_gauge_colors")%>;

            if (typeof l_arr_x[0] == "string")
            {
                effectivedata = [ l_arr_y[0] ];
                l_label = l_init.title + " " + l_x + ": "  + l_y;
            }

            if (report_options.seriesDefaults && report_options.seriesDefaults.rendererOptions)
            {
              if ("intervals" in report_options.seriesDefaults.rendererOptions)
              {
                l_limits = report_options.seriesDefaults.rendererOptions.intervals;
                delete report_options.seriesDefaults.rendererOptions.intervals; // Voorkom dat deze array de "effectiveprops" overschrijft.
              }                                                                 // De eerste waarde in het array wordt alleen gebruikt voor het minimum.
              if ("label" in report_options.seriesDefaults.rendererOptions)
              {
                l_label = report_options.seriesDefaults.rendererOptions.label;
                delete report_options.seriesDefaults.rendererOptions.label;
              }
            }

            if (l_limits.length < 3)
              l_limits = l_init.limiet;

            var l_limit_min = l_limits[0];
            var l_limit_max = l_limits[l_limits.length-1];
            l_limits.splice(0,1); // haal alleen de eerste waarde weg.
            if (l_limits[0] == null && l_limits[1] == null && l_limits[2] == null)
              l_limits = []; // Dan wordt er in ieder geval een GRIJZE Dashboard getoond.

            var props = { title: l_init.title
                        , seriesDefaults: { renderer: $.jqplot.MeterGaugeRenderer
                                          , rendererOptions: { showTicks: true
                                                             , showTickLabels: true
                                                             , label: l_label
                                                             , labelPosition: "bottom"
                                                             , labelHeightAdjust: -5
                                                             , background: "#f0f0f0"
                                                             , tickColor: "#333333"
                                                             , ringColor: "#333333"
                                                             , ringWidth: 3
                                                             , min: l_limit_min    // limiet0
                                                             , max: l_limit_max    // limiet3
                                                             , intervals: l_limits // [limiet1, limiet2, limiet3]
                                                             , intervalColors: l_colors
                                                             }
                                          }
                        };
<%
            break;
        case 3:  // pie-chart
%>
            var l_colors = <%=S("udr_graph_pie_colors")%>;
            var effectivedata = [l_data.arr_xy];
            var props = { title: l_init.title
	                      , seriesColors: l_colors
	                      , seriesDefaults: { renderer:$.jqplot.PieRenderer
                                          , showDataLabels: true
                                          , rendererOptions: { fill: true
                                                             , showDataLabels: true
                                                             , dataLabelPositionFactor: 1.2
                                                             , dataLabelCenterOn: true
                                                             }
                                          }
                        , highlighter: { show: false
                                       , useAxesFormatters: false
                                       }
                        , legend: { show: true
                                  , escapeHtml: true
                                  , location: "ne"
                                  }
                        , grid: { drawBorder: false
                                , shadow : false
                                , background: "#ffffff"
                                }
                        };
<%
            break;
        case 4: // LineChart
%>
            var l_labels = [];
            for (y=0; y<l_axes.yas.length; y++)
            {
              l_labels.push(l_axes.yas[y].naam);
            }
            var l_colors = (l_yas_count == 1? <%=S("udr_graph_colors1")%> : <%=S("udr_graph_colors2")%>);
            if (report_options.seriesColors && report_options.seriesColors.lenght > 0)
                l_colors = report_options.seriesColors;
            var effectivedata = l_arr_y;
            var props = { seriesDefaults: { pointLabels: { show: true
                                                         }
                                          , breakOnNull: true

                                          }
                        , stackSeries: false
                        , title: l_init.title
                        , seriesColors: l_colors
                        , legend: { show: (l_yas_count > 1)
                                  , placement: (l_yas_count > 1?"outsideGrid" : "insideGrid")
                                  , location: "ne"
                                  , labels: l_labels
                                  }
                        , axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer
                                         , ticks: l_arr_x
                                         , label: l_xas_naam
                                         , tickRenderer: $.jqplot.CanvasAxisTickRenderer
                                         , tickOptions: { enableFontSupport: true
                                                        , angle: 30
                                                        }
                                         }
                                , yaxis: { label: (l_yas_count == 1? l_yas_naam : "")
                                         , tickOptions: { formatString: "%d"
                                                        }
                                         }
                                }
                        , highlighter: { show: true
                                       , showMarker: false
                                       , tooltipAxes: "y"
                                       , tooltipLocation: "n"
                                       , formatString: "<table style='background-color: #cccccc' class='xjqplot-highlighter'><tr><td>%s</td></tr></table>"
                                       }
                        };
<%
            break;
        default:
            break;
    }

    if (graphInit.graph_type == 5) // blockgraph
    {
%>
      var l_limits = [];
      var l_intervalColors = [];

      if (report_options.seriesDefaults)
      {
        if ("intervals" in report_options.seriesDefaults.rendererOptions)
        {
          l_limits = report_options.seriesDefaults.rendererOptions.intervals;
          delete report_options.seriesDefaults.rendererOptions.intervals; // Voorkom dat deze array de "effectiveprops" overschrijft.
        }                                                                 // De eerste waarde in het array wordt alleen gebruikt voor het minimum.

        if ("intervalColors" in report_options.seriesDefaults.rendererOptions)
        {
          l_intervalColors = report_options.seriesDefaults.rendererOptions.intervalColors;
          delete report_options.seriesDefaults.rendererOptions.intervalColors; // Voorkom dat deze array de "effectiveprops" overschrijft.
        }                                                                      // De eerste waarde in het array wordt alleen gebruikt voor het minimum.
       }

      if (l_limits.length < 3 &&l_init.limiet && l_init.limiet.length > 0 )
        l_limits = l_init.limiet;

      if (l_intervalColors.length != 3)
        l_intervalColors = ["red"," orange", "green"];

      var pivot = <%=pivot? 1 : 0%> == 1;
      $(function ()
      {
        for (var index = 0; index < l_data.teller; index++)
        {
          var dialogtxt = "";
<%        if (pivot)
          { %>
            var teller = 0;
            var equal = true;
            var waarde;
            for (var x in l_xxxlabel[index].scf_urlkey)
            {
              if (teller == 0)
                waarde = l_xxxlabel[index].scf_urlkey[x];
              else
                equal = (waarde == l_xxxlabel[index].scf_urlkey[x]);
              teller++;
              if (!equal) break;
            }
            if (!equal)
            {
              dialogtxt = "<div id='scfcolpicker" + index + "' class='scfcolpicker scfcolpicker" + index + "' style='display:none'><table width='100%'>";
              dialogtxt += "<thead><tr><th><%=pivotcol.substr(0, 1).toUpperCase() + pivotcol.substr(1, pivotcol.length - 1)%></th></tr></thead>";
              var j = 0;
              for (var s in l_xxxlabel[index].scf_urlkey)
              {
                dialogtxt += "<tr OnClick='openArrUrl(" + index + ", \"" + s + "\")'><td>" + s + "</td></tr>";
                j++;
              }
              dialogtxt += "</table></div>";
            }
<%        } %>

          // Als er intervallen zijn dan de kleur bepalen aan de hand van de waarde
          // anders een kleur gebruiken uit S(udr_graph_colors1).
          var bg_color = (l_limits.length ? colorValue(index) : l_colors[index % l_colors.length]);

          $("#myGraph")
          .append(
                   $('<div class="blockgraph">').css({backgroundColor: bg_color})
                                                .html($("<span class='blockgraph-title'>").text(l_data.arr_x[index]).append("<br>"))
                                                .append($("<span class='blockgraph-value'>").text(new Intl.NumberFormat().format(arrYValue(index).toFixed(1))))
                                                .append(dialogtxt)
                                                .click({index: index},
                                                       function(event)
                                                       {
                                                         $(".scfcolpicker" ).hide(); // Eerst alle scfcolpicker popup schermen verbergen.
                                                         var teller = 0;
                                                         var equal = true;
                                                         var waarde;
                                                         for (var x in l_xxxlabel[event.data.index].scf_urlkey)
                                                         {
                                                           if (teller == 0)
                                                             waarde = l_xxxlabel[event.data.index].scf_urlkey[x];
                                                           else
                                                             equal = (waarde == l_xxxlabel[event.data.index].scf_urlkey[x]);
                                                           teller++;
                                                           if (!equal) break;
                                                         }

                                                         if (pivot)
                                                         {
                                                           if (equal)
                                                           {
                                                             var url_key = waarde;
                                                             FcltMgr.openDetail(l_urllink + url_key, l_arr_x[event.data.index]);
                                                           }
                                                           else
                                                           {
                                                             event.stopPropagation();
                                                             $("#scfcolpicker" + event.data.index).show();
                                                             updateTableHeaders();
                                                             $("#scfcolpicker" + event.data.index).css("width", $("#scfcolpicker" + event.data.index + " table").width());
                                                             if (event.pageX < ($("#myGraph").width()/2))
                                                               $("#scfcolpicker" + event.data.index).css("left", 0);
                                                             else
                                                               $("#scfcolpicker" + event.data.index).css("right", $("#scfcolpicker" + event.data.index).width() - $(".blockgraph").width() + 20);
                                                           }
                                                         }
                                                         else
                                                         {
                                                           var url_key = l_xxxlabel[event.data.index][l_xas_url];
                                                           FcltMgr.openDetail(l_urllink + url_key, l_arr_x[event.data.index]);
                                                         }
                                                       }
                                                      )
                 )
          .click(function(event){$(".scfcolpicker").hide();})
          FcltMgr.resized(window);
        }

        $("#searchbody").click(function()
        {
          $(".scfcolpicker").hide();
        });

        $(".scfcolpicker").click(function(event)
        {
          event.stopPropagation();
        });
      });

      function arrYValue(index)
      {
        var value = 0;
        if (typeof l_data.arr_y[0] == "object")
        {
          for (var ix = 0; ix < l_data.arr_y.length; ix++)
          {
            value += l_data.arr_y[ix][index];
          }
        }
        else
        {
          value = l_data.arr_y[index];
        }
        return value;
      }

      function colorValue(l_indexvalue)
      {
        var color;
        var plimits = [];
        var oplopend = true;
        var teller;

        for (var k = 0; k < l_limits.length; k++)
        {
          if (l_limits[k] != null)
          {
            teller = k;
            break;
          }
        }
        // Er is al getest of er twee opeenvolgende limieten zijn ingevoerd (serverside).
        if (l_limits[teller] > l_limits[teller+1])
          oplopend = false;

        // Kleur bepalen van de tegel door naar de grenswaarden te kijken.
        var yvalue = arrYValue(l_indexvalue).toFixed(1);
        if (( oplopend && yvalue < l_limits[0]) ||
            (!oplopend && (l_limits[0] != null && yvalue > l_limits[0])))                                    // Grenswaarde -/Rood.
          color = "gray";                                                           // Grijs.
        else if (( oplopend && yvalue < l_limits[1]) ||
                 (!oplopend && (l_limits[1] != null && yvalue > l_limits[1])))                               // Grenswaarde Rood/Orange.
          color = l_intervalColors[0];                                              // Rood.
        else if (( oplopend && (l_limits[2] == null || yvalue < l_limits[2])) ||
                 (!oplopend && yvalue > l_limits[2]))                               // Grenswaarde Orange/Groen.
          color = l_intervalColors[1];                                              // Orange.
        else if (( oplopend && (l_limits[3] == null || yvalue <= l_limits[3])) ||
                 (!oplopend && (l_limits[3] == null || yvalue >= l_limits[3])))     // Grenswaarde Groen/-.
          color = l_intervalColors[2];                                              // Groen
        else
          color = "gray";                                                           // Grijs

        return color;
      }

      function openArrUrl(xindex, yindex)
      {
        $("#scfcolpicker" + xindex).hide();
        FcltMgr.openDetail(l_urllink + l_xxxlabel[xindex].scf_urlkey[yindex], l_arr_x[xindex]);
      }
<%  }
    else
    { %>
      var effectiveprops = $.extend(true, props, report_options);

      $(function ()
      {
        if (effectivedata.length && effectivedata[0].length)
        {
          plot1 = $.jqplot( "myGraph"
                          , effectivedata
                          , effectiveprops
                          );
        }
        else
        {
          document.getElementById("myGraph").innerHTML = "<p><%=L('lcl_empty_rstable')%></p>";
        }

        // Pointer array "rows" met referenties naar de legenda regels. Rows is dus geen kopie (clone) van de legenda.
        var rows = $(".jqplot-table-legend tr");

        // Array met legenda's op alfabetische volgorde zetten.
        rows.sort(function(a, b)
                  {
                    return $(a).children().last().text().localeCompare($(b).children().last().text());
                  });

        if (<%=graphInit.graph_type%> == 1)
        {
         // Verschuif de regels op de juiste plek en verberg de regels die niet gebruikt worden.
         $.each(rows, function(index, item)
                      {
                        if (usrrap_maxresults)
                        { // Kijken of alle labels wel getoond dienen te worden.
                          var xas_waarde;
                          var label = item.lastChild.innerText;
                          for (var k = 0; k < l_xxxlabel.length; k++)
                          {
                            if (l_xxxlabel[k][label])
                            { // pivot bestaat
                              xas_waarde = l_xxxlabel[k][l_xas_dbs.toLowerCase()];
                              break; // Gevonden
                            }
                          }
                          var found = false;
                          for (var k = 0; k < l_data.arr_x.length; k++)
                          {
                            if (xas_waarde && l_data.arr_x[k] == xas_waarde)
                            { // subxas_waarde bstaat.
                              found = true;
                              break; // Gevonden
                            }
                          }
                          $(".jqplot-table-legend tr").parent().append(item); // De parent is table (of tbody).
                          if (!found)
                          { // De x-as waarde was niet aanwezig in de lijst die wordt weergegeven.
                            // Verwijderen van een item uit rows lijst die gebruikt wordt in de each is niet een goed idee (al lijkt het op het eeste gezicht te werken).
                            // Het kan onverwachte gebeurtenissen opleveren en dat willen we voorkomen.
                            // Daarom maar verbergen.
                            $(item).hide();
                          }
                          else
                            $(".jqplot-table-legend tr").parent().append(item); // De parent is table (of tbody).
                        }
                        $(".jqplot-table-legend tr").parent().append(item); // De parent is table (of tbody).
                      });
        }
      });

      function toImg()
      {
        var imgData = $("#myGraph").jqplotToImageStr({});
        document.getElementById("myGraph").innerHTML = "<img alt='<%=safe.htmlattr(L("lcl_menu_fac_graphs"))%>' src=" + imgData + ">";
        $("#toImgButton").hide(); //untested
        FcltMgr.alert(L("lcl_viewimagealert"));
      }
<%  }  %>

    </script>
</head>
<body id="listbody">
    <%
        var nobuttons = getQParamInt("nobuttons", 0) == 1;
        var noheader = getQParamInt("noheader", 0) == 1;
        var buttons = [];
        if(!nobuttons && graphInit.graph_type != 5)
            buttons.push({ icon: "fa-file-image", title: L("lcl_openimage"), action: "toImg()", id: "toImgButton" });
        if (!noheader)
            IFRAMER_HEADER(model.records_title, buttons);
        var mygraph_height = ((widget_height != null) ? widget_height : 500) - (!noheader && buttons.length ? 32 : 0);
        if (graphInit.graph_type == 5)
        {
    %>
            <div id="myGraph"></div>
<%      } else { %>
            <div id="myGraph" style="height:<%=mygraph_height%>px;" ></div>
<%      } %>
      </body>
    </html>
<%
    }
%>

