FAQ/CustomizeChart.md
... ...
@@ -4,7 +4,11 @@
4 4
5 5
##About
6 6
7
-The CustomizeChart method is used to modify chart objects on a per-report basis. Different [[charting engines|/API/CodeSamples/ChartingEngine]] require different checks and some are easier to modify than others due to the way the charting engines structure their data. Here is an example method using the Dundas charting engine.
7
+The CustomizeChart method is used to modify chart objects on a per-report basis. Different [[charting engines|/API/CodeSamples/ChartingEngine]] require different checks and some are easier to modify than others due to the way the charting engines structure their data.
8
+
9
+##Dundas Charts
10
+
11
+Here is an example method using the Dundas charting engine. API calls can be made to the Dundas.Charting.WebControl.Chart object to typecast the chart and work with it. The reference to the same in-memory object should be kept while you're editing the typecast chart. This means you will not have to re-assign your "chart" object back to "obj", as they reference the same address.
8 12
9 13
```csharp
10 14
public override void CustomizeChart(object obj)
... ...
@@ -16,4 +20,135 @@ public override void CustomizeChart(object obj)
16 20
series.BackGradientType = Dundas.Charting.WebControl.GradientType.None;
17 21
}
18 22
}//end method
23
+```
24
+
25
+##HtmlCharts
26
+
27
+The HTMLCharts objects are more difficult to work with. Since HighCharts is a javascript library, there is no explicit C# namespace to call. In this case, the entire chart exists within a StringBuilder object and will be injected into the page when it is rendered. In order to interact with this type of chart, one must modify the StringBuilder object with whatever customizations are required. A sample output chart will be displayed below to provide a glimpse of what to expect when working with the CustomizeChart method with respect to HTMLCharts.
28
+
29
+_**Note:** Since the chart is rendered after any javascript page events are called, it is not possible to interact with the rendered chart via javascript unless you insert the javascript that will do this into the string returned by CustomizeChart._
30
+
31
+```javascript
32
+<div>
33
+ <div id='LineChart433189727' style='min-width: 300px; position:relative; width: 99%; overflow:hidden;'></div>
34
+ <script type='text/javascript'>
35
+ if (typeof String.prototype.trim !== 'function') {
36
+ String.prototype.trim = function () {
37
+ return this.replace(/^\\s+|\\s+$/g, '');
38
+ }
39
+ }
40
+ var LineChart433189727Instance;
41
+ jq$(document).ready(function() {
42
+ var container$ = jq$('#LineChart433189727');
43
+ try {
44
+ function FixLineChart433189727Width(cont) {
45
+ return;
46
+ var fullOffset = 0;
47
+ var currentObj = cont;
48
+ while (currentObj != null) {
49
+ if (currentObj.offsetLeft !== 'undefined' && currentObj.offsetLeft != null && fullOffset < currentObj.offsetLeft)
50
+ fullOffset = currentObj.offsetLeft;
51
+ currentObj = currentObj.parentElement;
52
+ }
53
+ var maxWidth = jq$(window).width() - 2 * fullOffset;
54
+ cont.style.width = maxWidth + 'px';
55
+ }
56
+ if (typeof htmlChartColors == 'undefined' || htmlChartColors == null || htmlChartColors.length == 0) {
57
+ htmlChartColors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970','#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
58
+ Highcharts.setOptions({
59
+ colors: htmlChartColors});
60
+ Highcharts.dateFormats = {
61
+ Z: function (timestamp) {
62
+ var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
63
+ var date = new Date(timestamp),
64
+ month = date.getMonth();
65
+ return monthNames[month];
66
+ }
67
+ };
68
+ }
69
+ var chartCont = jq$('#LineChart433189727');
70
+ FixLineChart433189727Width(chartCont[0]);
71
+ var w = chartCont.width();
72
+ var rotationValue = 0;
73
+ if (w < 550) {
74
+ rotationValue = 270;
75
+ }
76
+ LineChart433189727Instance = new Highcharts.Chart(
77
+ {
78
+ chart: { renderTo:'LineChart433189727', animation: true, height: 300, type: 'line' },
79
+ credits: { enabled: false },
80
+ legend: { enabled: true },
81
+ title: { text: '' },
82
+ tooltip: { shared: true },
83
+ xAxis: { categories: ['1996-Q3', '1996-Q4', '1997-Q1', '1997-Q2', '1997-Q3', '1997-Q4', '1998-Q1', '1998-Q2'], labels: { rotation: rotationValue }, title: { text: 'Month and Year of Order' }, type: 'category' },
84
+ yAxis: { labels: { enabled: true, formatter: function(){
85
+ return jq$.formatNumber(this.value, {
86
+ format:"#,###.00",locale:"us",customPrefix:"$"});} }, title: { text: 'Total Freight' } },
87
+ series: [{
88
+ tooltipPointCustomFormatter: '{format:\"#,###.00\",locale:\"us\",customPrefix:\"$\"}',
89
+ data: [{ y: 0 }, { dataLabels: { y: -12 }, y: 415.57 }, { y: 1336.37 }, { dataLabels: { y: 21 }, y: 539.14 }, { y: 2254.08 }, { y: 846.69 }, { dataLabels: { y: -12 }, y: 659.73 }, { dataLabels: { y: -12 }, y: 270.32 }],
90
+ name: 'Canada', type: 'spline' }, {
91
+ tooltipPointCustomFormatter: '{format:\"#,###.00\",locale:\"us\",customPrefix:\"$\"}',
92
+ data: [{ dataLabels: { y: -12 }, y: 313.49 }, { y: 323.5 }, { dataLabels: { y: 21 }, y: 333.96 }, { y: 1330.07 }, { y: 254.18 }, { dataLabels: { y: 21 }, y: 11.99 }, { y: 504.75 }, { y: 157.57 }],
93
+ name: 'Mexico', type: 'spline' },
94
+ { tooltipPointCustomFormatter: '{format:\"#,###.00\",locale:\"us\",customPrefix:\"$\"}',
95
+ data: [{ y: 2533.41 }, { y: 3742.1 }, { y: 3813.16 }, { y: 2719.32 }, { y: 9389.36 }, { y: 4853.12 }, { y: 11321.68 }, { y: 7793.67 }],
96
+ name: 'USA', type: 'spline' }]
97
+ }, function(chartObj)
98
+ {
99
+ var previousWidth = chartCont.width();
100
+ if (typeof previousWidth === 'undefined')
101
+ previousWidth = 0;
102
+ jq$(window).on('resize.LineChart433189727',
103
+ function() {
104
+ var chartCont = jq$('#LineChart433189727');
105
+ if (chartCont.length == 0 || typeof chartCont[0] == 'undefined')
106
+ return;
107
+ FixLineChart433189727Width(chartCont[0]);
108
+ var newWidth = chartCont.width();
109
+ if (newWidth !== previousWidth) {
110
+ if (typeof chartObj.options.xAxis[0].labels === 'undefined') {
111
+ chartObj.options.xAxis[0].labels = {};
112
+ }
113
+ if (newWidth < 550) {
114
+ chartObj.options.xAxis[0].labels.rotation = 270;
115
+ chartObj.xAxis[0].update();
116
+ }
117
+ else {
118
+ chartObj.options.xAxis[0].labels.rotation = 0;
119
+ chartObj.xAxis[0].update();
120
+ }
121
+ }
122
+ previousWidth = newWidth;
123
+ }
124
+ );
125
+ }
126
+ );
127
+ container$.closest('div.autoWide').find('p.renderedControlContainer>span').remove();
128
+ var childSpan = document.getElementById('LineChart433189727_outerSpan');
129
+ if (childSpan != null) {
130
+ var parentDiv = childSpan.parentElement;
131
+ var fullOffset = 0;
132
+ var currentObj = parentDiv;
133
+ while (currentObj != null) {
134
+ if (currentObj.offsetLeft !== 'undefined' && currentObj.offsetLeft != null)
135
+ fullOffset += currentObj.offsetLeft;
136
+ currentObj = currentObj.parentElement;
137
+ }
138
+ var spanLeft1 = ((jq$(window).width() - 2 * fullOffset) - childSpan.clientWidth) / 2;
139
+ var spanLeft2 = parentDiv.clientWidth - childSpan.clientWidth;
140
+ var leftest = spanLeft1;
141
+ if (spanLeft2 < leftest)
142
+ leftest = spanLeft2;
143
+ if (leftest < 0)
144
+ leftest = 0;
145
+ childSpan.style.left = leftest + 'px';
146
+ childSpan.style.position = 'relative';
147
+ }
148
+ } catch (e) {
149
+ throw 'High chart initialization error: ' + e;
150
+ }
151
+ });
152
+ </script>
153
+</div>
19 154
```
... ...
\ No newline at end of file