Guides/Customize-Chart-Colors.md
... ...
@@ -26,6 +26,59 @@ This would achieve the color scheme from the example image above.
26 26
27 27
*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/]]
28 28
29
+You can also use more complex code:
30
+
31
+```csharp
32
+public override void CustomizeChart(object chart)
33
+{
34
+ var chartContent = chart.ToString();
35
+ int startIndex = chartContent.IndexOf("id='") + 4,
36
+ endIndex = chartContent.IndexOf("'", startIndex);
37
+ var chartid = chartContent.Substring(startIndex, endIndex - startIndex);
38
+ var scriptContent = @"
39
+ jq$(document).ready(function () {
40
+ var colors = Highcharts.getOptions().colors; // you can use any colors here (array of colors)
41
+
42
+ window.izenda = (window.izenda || {});
43
+ window.izenda.customcolors = (window.izenda.customcolors || {});
44
+ window.izenda.customcolors.u = (window.izenda.customcolors.u || {});
45
+ window.izenda.customcolors.i = (window.izenda.customcolors.i || 0);
46
+
47
+ function getColorByName(name) {
48
+ if (!window.izenda.customcolors.u[name]) {
49
+ window.izenda.customcolors.u[name] = colors[window.izenda.customcolors.i % colors.length];
50
+ window.izenda.customcolors.i++;
51
+ }
52
+ return window.izenda.customcolors.u[name];
53
+
54
+ /*
55
+ // or you can use something like this:
56
+ if(name == 'Company A')
57
+ return '#FF0000';
58
+ if(name == 'Company B')
59
+ return '#00FF00';
60
+ // ...
61
+ */
62
+ }
63
+ var chartid = jq$('#" + chartid + @"').data('highchartsChart');
64
+ var chart = Highcharts.charts[chartid];
65
+ if (jq$(chart.container).is(':visible')) {
66
+ jq$.each(chart.series, function (i, group) {
67
+ jq$.each(group.data, function (i, item) {
68
+ item.color = getColorByName(item.name);
69
+ item.connector.stroke = item.color;
70
+ item.connector.element.style.stroke = item.color;
71
+ });
72
+ group.redraw();
73
+ });
74
+ }
75
+ });";
76
+
77
+ System.Text.StringBuilder csb = (System.Text.StringBuilder)chart;
78
+ csb.Append("<script>" + scriptContent + "</" + "script>");
79
+}
80
+```
81
+
29 82
#Visualizations
30 83
31 84
Visualizations use the D3 javascript library (http://d3js.org/), 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.