FSN#34749 Mogelijkheid voor jqplot Graphs Default options

svn path=/Website/trunk/; revision=27637
This commit is contained in:
Erik Groener
2016-01-06 15:35:35 +00:00
parent 461a5357f1
commit 1f40d0cf96
5 changed files with 216 additions and 53 deletions

View File

@@ -161,6 +161,7 @@ function model_reports(fac_usrrap_key)
model.autorefresh = usrrap.autorefresh;
model.styling = usrrap.styling;
model.graph_options = usrrap.graph_options;
model.graph_type = usrrap.graph_type;
model.list = { columns : [], groupby : [], canGroup: true, canCSV: true, autoCount: usrrap.count.id, autoPivot: usrrap.pivot.id, autoGraph: usrrap.graph.id };
if (model.styling && (model.styling.id & 1))
model.list.fixedColumns = true;

View File

@@ -43,6 +43,7 @@ function model_reportsx(usrrap_key, rapparams)
required: true, defaultvalue: 0, LOV: L("lcl_usrrap_showcountLOV")},
"graph" : { dbs: "fac_usrrap_graph", typ: "number", label: L("lcl_usrrap_showgraph"),
required: true, defaultvalue: 0, LOV: L("lcl_usrrap_showcountLOV")},
"graph_type" : { dbs: "fac_usrrap_graph_type", typ: "number", label: L("lcl_usrrap_graphtype"), LOV: L("lcl_usrrap_graphtypeLOV")},
"lastrefresh" : { dbs: "fac_usrrap_col_refresh", typ: "datetime", label: "Columns last refreshed", readonly: true },
"graph_options": { dbs: "fac_usrrap_graph_options", typ: "memo", label: "Graph Options" }
};

View File

@@ -194,7 +194,7 @@ function fac_usrrap_list_graph (model, scf_params)
for (var c=1; c < scf_params.list.columns.length; c++)
{
graphData.arr_y.push([]);;
graphData.arr_y.push([]);
graphAxes.yas.push({ naam: model.fields[scf_params.list.columns[c]].label });
}
@@ -210,18 +210,21 @@ function fac_usrrap_list_graph (model, scf_params)
graphData.arr_xy.push([xxx_array[i][scf_params.list.columns[c-1]], xxx_array[i][scf_params.list.columns[c]]]);
}
}
graphInit = { title : model.records_title
, type : 1
, maxrows : 0
, limiet : [] //limiet_arr
, fac_options : rapport.graph_options || "{}"
, sql_orderby : "" //oRs("fac_usrgraph_orderby").Value || ""
//, sql : sql_select
};
%><html>
<head>
<% FCLTHeader.Generate(); %>
graphInit = { title : model.records_title
, graph_type : (rapport.graph_type?rapport.graph_type.id:null)
, maxrows : 0
, limiet : [0,70,90,100] //limiet_arr
, report_options : rapport.graph_options || "{}"
, default_options : S("fac_graph_default_json") || "{}"
, sql_orderby : "" //oRs("fac_usrgraph_orderby").Value || ""
//, sql : sql_select
};
%>
<html>
<head>
<% FCLTHeader.Generate(); %>
<script>
var JSONdata = '<%=safe.jsstring(JSON.stringify(graphInit))%>';
var l_init = eval('(' + JSONdata + ')');
@@ -245,52 +248,184 @@ function fac_usrrap_list_graph (model, scf_params)
l_labels.push(l_axes.yas[y].naam);
}
var fac_options = eval('(' + l_init.fac_options + ')');
var props = { seriesDefaults: { renderer: <%=lineRenderer?1:0%>==1?$.jqplot.LineRenderer:$.jqplot.BarRenderer
, pointLabels: { show: true }
var default_options = eval('(' + l_init.default_options + ')');
var report_options = eval('(' + l_init.report_options + ')');
<%
switch (graphInit.graph_type)
{
case 1: // BarChart
%>
var l_colors = (l_yas_count == 1?<%=S("fac_graph_colors1")%> : <%=S("fac_graph_colors2")%>);
var effectivedata = l_arr_y;
var props = { seriesDefaults:{ renderer: $.jqplot.BarRenderer
, pointLabels: { show: false }
}
, stackSeries: true
//, series:[{label:'a'},{label:'b'}]
//, legend: {show: true}
, 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:'%.1f'
}
}
}
, 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_limits = [];
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 eeste waarde in het array wordt alleen gebruikt voor het minimum.
else if ("intervals" in default_options.seriesDefaults.rendererOptions)
{
l_limits = default_options.seriesDefaults.rendererOptions.intervals;
delete default_options.seriesDefaults.rendererOptions.intervals;
}
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.
var l_x = l_arr_x[0];
var l_y = l_arr_y[0];
var l_colors = <%=S("fac_graph_gauge_colors")%>;
var effectivedata = [ [100* l_x / l_y] ];
var props = { title: l_init.title
, seriesDefaults: { renderer: $.jqplot.MeterGaugeRenderer
, rendererOptions: { showTicks: true
, showTickLabels: true
, label: l_init.title + l_x + "/" + l_y
, labelPosition: 'bottom'
, labelHeightAdjust: -5
, background: '#f0f0f0'
, tickColor: '#333333'
, ringColor: '#333333'
, ringWidth: 3
, min: l_limit_min
, max: l_limit_max
, intervals: l_limits
, intervalColors: l_colors
}
}
};
<%
break;
case 3: // pie-chart
%>
var l_colors = <%=S("fac_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
}
}
, legend: { show: true
, location: 'ne'
}
, 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: l_arr_x.join().length > 60?30:0
}
}
, yaxis: { label: (l_yas_count==1?l_yas_naam:'') // anders doen we legenda
, tickOptions: { formatString: '%.0f'
}
}
}
, highlighter: { show: true
, showMarker: false
, tooltipAxes: 'y'
, tooltipLocation: 'n'
, formatString: '<table style="background-color: #cccccc" class="xjqplot-highlighter"><tr><td>%s</td></tr></table>'
}
};
var effectivedata = l_arr_y;
if ("graphdata" in fac_options)
effectivedata = eval(fac_options["graphdata"]);
if ("overruleall" in fac_options)
var effectiveprops = fac_options;
else
var effectiveprops = $.extend(true, props, fac_options);
$(function () {
, 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("fac_graph_colors1")%> : <%=S("fac_graph_colors2")%>);
var effectivedata = l_arr_y;
var props = { seriesDefaults: { pointLabels: { show: true
}
}
, stackSeries: false
, title: l_init.title
, seriesColors: l_colors
, legend: { show: (l_yas_count > 1)
, placement: (l_yas_count > 1?'outsideGrid' : 'intsideGrind')
, 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: '%.1f'
}
}
}
, 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 ("graphdata" in report_options)
effectivedata = eval(report_options["graphdata"]);
else if ("graphdata" in default_options)
effectivedata = eval(default_options["graphdata"]);
if ("overruleall" in report_options)
var effectiveprops = report_options;
else if ("overruleall" in default_options)
var effectiveprops = default_options;
else
var effectiveprops = $.extend(true, props, (report_options ? report_options : default_options) );
$(function () {
plot1 = $.jqplot( 'myGraph'
, effectivedata
, effectiveprops
);
});
</script>
});
</script>
</head>
<body id="listbody">
<%

View File

@@ -30,6 +30,9 @@
"show": {
requires: { js: ["./fac_reportx.js"] },
buttons: show_buttons
},
"edit": {
requires: { js: ["./fac_reportx.js"] }
}
});
%>

View File

@@ -4,6 +4,29 @@
File: fac_report.js
*/
$(document).ready(function () {
setTimeout("init_reportx()", 100);
});
function init_reportx()
{
$("#graph").change(function() {change_graph(); });
if ($("#graph").val() != 0)
$("#graph_type").addClass("required");
}
function change_graph()
{
if ($("#graph").val() == 0)
{
$("#graph_type").removeClass("required");
$("#graph_type").val(null);
}
else
$("#graph_type").addClass("required");
}
function show_report(key)
{
var url = "appl/fac/fac_report.asp?usrrap_key=" + key;