FSN#34749 Mogelijkheid voor jqplot Graphs Default options
svn path=/Website/trunk/; revision=27637
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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" }
|
||||
};
|
||||
|
||||
@@ -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">
|
||||
<%
|
||||
|
||||
@@ -30,6 +30,9 @@
|
||||
"show": {
|
||||
requires: { js: ["./fac_reportx.js"] },
|
||||
buttons: show_buttons
|
||||
},
|
||||
"edit": {
|
||||
requires: { js: ["./fac_reportx.js"] }
|
||||
}
|
||||
});
|
||||
%>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user