StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is how I do it. I am using ASP.Net MVC, But you can use any framework or language.</p> <p>values, legendvalues and sectorLinkValues are .Net List object created in the page.</p> <pre><code>%> <script type="text/javascript"> $(document).ready(function () { <% =truViewPOC.Helpers.GraphaelChartHelper.GetJavaScript(100, 150, 90, title, values, legendValues, sectorLinkValues, null) %> }); </code></pre> <p></p> <p>And here is my GetJavaScript method:</p> <pre><code>StringBuilder javaScriptBuilder = new StringBuilder(); javaScriptBuilder.Append("window.onload = function () {var r = Raphael('holder');"); AppendCenterCoordinates(ref javaScriptBuilder); AppendLegendInfo(ref javaScriptBuilder, title); AppendPieChartInfo(ref javaScriptBuilder, xCoord, YCoord,radius, values, legendValues,sectorLinkValues); AppendFunctionInfo(ref javaScriptBuilder); javaScriptBuilder.Append("}"); private static void AppendFunctionInfo(ref StringBuilder javaScriptBuilder) { javaScriptBuilder.Append("pie.hover(function () {this.sector.stop();this.sector.scale(1.1, 1.1, this.cx, this.cy);if (this.label) {this.label[0].stop();this.label[0].scale(1.5);this.label[1].attr({ 'font-weight': 800 });}}, function () {this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, 'bounce');if (this.label) {this.label[0].animate({ scale: 1 }, 500, 'bounce');this.label[1].attr({ 'font-weight': 400 });}}); "); javaScriptBuilder.Append("pie.each(function(){ this.sector.label=this.sector.value; })"); } private static void AppendPieChartInfo(ref StringBuilder javaScriptBuilder, int xCoord, int YCoord, int radius, List<decimal> values, List<string> legendValues, List<string> sectorLinkValues) { javaScriptBuilder.AppendFormat("var pie = r.g.piechart({0},{1},{2},{3},", xCoord, YCoord, radius, ConvertValuesToString(values)); javaScriptBuilder.Append("{"); javaScriptBuilder.AppendFormat("legend: {0}, legendpos: 'east', href:{1}",ConvertValuesToString(legendValues),ConvertValuesToString(sectorLinkValues)); javaScriptBuilder.Append("});"); } private static void AppendLegendInfo(ref StringBuilder javaScriptBuilder, string title) { javaScriptBuilder.Append("r.g.text(140, 24, " + "'" + title + "'" + ").attr({ 'font-size': 16 });"); } private static string ConvertValuesToString(List<decimal> values) { string finalString = "["; for (int i = 0; i < values.Count; i++) { finalString += values[i].ToString(); if (i<values.Count-1) { finalString+= ","; } } finalString += "]"; return finalString; </code></pre> <p>Hope this helps..Let me know if you have any questions about this code. Thanks. Vikas }</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload