Guides/Customize-Chart-Colors.md
... ...
@@ -1,10 +1,10 @@
1 1
#Customize Chart Colors
2 2
3 3
[[_TOC_]]
4
-
4
+#Basic Charts
5 5
##Purpose
6 6
7
-Customizing the chart colors allows you to inject a bit of your own branding, or any other color scheme for that matter, into Izenda's reports.
7
+Customizing the chart colors allows you to inject a bit of your own branding, or any other color scheme, into Izenda's reports.
8 8
9 9
##Example
10 10
... ...
@@ -24,4 +24,39 @@ The following code snippet should be added to the default.master page in a webfo
24 24
25 25
This would achieve the color scheme from the example image above.
26 26
27
-As a caveat, you will need a recent copy of the Izenda core product. This ability was added in 6.7.0.264, and can be downloaded [[here|http://www.izenda.com/update-your-izenda-version/]]
... ...
\ No newline at end of file
0
+*Note:* you will need a recent copy of the Izenda core product. This ability was added in 6.7.0.264, and can be downloaded [[here|http://www.izenda.com/update-your-izenda-version/]]
1
+
2
+#Visualizations
3
+
4
+Visualizations use the D3 javascript library, which means that to customize the colors used in a specific visualization you must modify that feature's base code. There is no global setting to change the colors used in a visualization, as each visualization has its own independent codebase.
5
+
6
+##Example
7
+
8
+Here, the Heatmap visualization has been customized to use two colors - red and green.
9
+
10
+![Custom Colors used in a visualization](/Guides/Customize-Chart-Colors/vis-custom-color.png)
11
+
12
+##Implementation
13
+
14
+Here we have customized the Color function in the base visualization definition, located by default at .\Resources\Vis\Rectangular\Heatmap\View.html
15
+
16
+```javascript
17
+var items = vis.getItems(), sum = 0, avg = 0;
18
+for (var i = 0; i < items.length; ++i) {
19
+ sum += vis.unitValue(items[i], s.props.metric);
20
+}
21
+avg = sum / items.length;
22
+
23
+function color(d) {
24
+ // val - value of the current rectangle.
25
+ var val = vis.unitValue(d, s.props.metric);
26
+
27
+ return (val > avg) ? "#FF0000" : "#00FF00";
28
+}
29
+```
30
+
31
+The basic steps involved here are:
32
+
33
+* Determine the value of each item
34
+* Establish an average of all values in the dataset,
35
+* Color each value red (#FF0000) if it is above the average, and green (#00FF00) if it is below.
... ...
\ No newline at end of file