Mar 09, 2017, 2:42 PM
[CLOSED] Highcharts support in Version 4 upgrade
We use highcharts in our application and the code that worked in 2.x doesn't seem to render in 4.x. I know 4.x has some great charting but I can't justify rewriting everthing just to use ext charts. Below is a sample that should render but does not.
<script runat="server">
Protected Sub Page_Load(sender As Object, e As EventArgs)
End Sub
<DirectMethod>
Public Function GetDonutChart() As String
Dim chartjson = "{""chart"": {""animation"":false,""type"":""pie""},""credits"":{""enabled"":false},""legend"":{""enabled"":false,""layout"":""vertical"",""verticalAlign"":""middle"",""align"":""right""},""exporting"":{""enabled"":false},""title"":{""text"":"" ""},""series"":[{""size"":""60%"",""name"":""Category"",""tooltip"":{""headerFormat"":""\u003cspan style=\""color:{point.color}\""\u003eâ—\u003c/span\u003e {series.name}: \u003cb\u003e{point.y}%\u003c/b\u003e\u003cbr/\u003e"",""pointFormat"":""\u003cspan style=\""font-size: 12px; padding-left: 10px;\""\u003e{point.name}\u003c/span\u003e\u003cbr/\u003e""},""data"":[{""y"":1.3,""name"":""Foreign Small/Mid Blend"",""color"":""#607D8B""},{""y"":1.71,""name"":""Mid-Cap Value"",""color"":""#795548""},{""y"":1.85,""name"":""Small Growth"",""color"":""#000000""},{""y"":1.97,""name"":""Long/Short Equity"",""color"":""#CDDC39""},{""y"":1.97,""name"":""World Stock"",""color"":""#2196F3""},{""y"":2.22,""name"":""Mid-Cap Growth"",""color"":""#009688""},{""y"":3.02,""name"":""Large Growth"",""color"":""#4CAF50""},{""y"":3.05,""name"":""Large Value"",""color"":""#FF9800""},{""y"":3.1,""name"":""Foreign Large Blend"",""color"":""#9C27B0""},{""y"":3.78,""name"":""Diversified Emerging Mkts"",""color"":""#2196F3""},{""y"":4.41,""name"":""Foreign Large Value"",""color"":""#FFC107""},{""y"":4.89,""name"":""Foreign Large Growth"",""color"":""#8BC34A""},{""y"":6.07,""name"":""Large Blend"",""color"":""#00BCD4""},{""y"":60.67,""name"":""Unknown"",""color"":""#9E9E9E""}]},{""name"":""Product"",""size"":""100%"",""innerSize"":""60%"",""tooltip"":{""headerFormat"":""\u003cspan style=\""color:{point.color}\""\u003eâ—\u003c/span\u003e {series.name}: \u003cb\u003e{point.y}%\u003c/b\u003e\u003cbr/\u003e"",""pointFormat"":""\u003cspan style=\""font-size: 12px; padding-left: 10px;\""\u003e{point.name}\u003c/span\u003e\u003cbr/\u003e""},""data"":[{""name"":""Salient International Small Cap Instl"",""y"":1.3,""color"":""#8097A2""},{""name"":""Touchstone Mid Cap Value Y"",""y"":1.71,""color"":""#94776D""},{""name"":""Federated MDT Small Cap Growth Instl"",""y"":0.72,""color"":""#666666""},{""name"":""Virtus Quality Small-Cap I"",""y"":1.13,""color"":""#333333""},{""name"":""Sterling Capital Long/Short Equity Instl"",""y"":1.97,""color"":""#D7E361""},{""name"":""Morgan Stanley Inst Global Opp I"",""y"":1.97,""color"":""#4DABF5""},{""name"":""Goldman Sachs Growth Opportunities Instl"",""y"":2.22,""color"":""#33ABA0""},{""name"":""Loomis Sayles Large Cap Growth"",""y"":3.02,""color"":""#70BF73""},{""name"":""Sterling Equity Income SMA"",""y"":3.05,""color"":""#FFAD33""},{""name"":""Vanguard Developed Markets Idx Admiral"",""y"":3.1,""color"":""#B052C0""},{""name"":""Oppenheimer Developing Markets Y"",""y"":1.84,""color"":""#7AC0F8""},{""name"":""Lazard Emerging Markets Equity Instl"",""y"":1.93,""color"":""#4DABF5""},{""name"":""Causeway International Value Instl"",""y"":4.41,""color"":""#FFCD39""},{""name"":""Harding Loevner International Eq Instl"",""y"":4.89,""color"":""#A2CF6E""},{""name"":""Vanguard 500 ETF"",""y"":6.07,""color"":""#33C9DD""},{""name"":""Elite Fixed Income 1"",""y"":60.67,""color"":""#D8D8D8""}]}],""plotOptions"":{""pie"":{""dataLabels"":{""enabled"":false},""showInLegend"":true}}}"
Return chartjson
End Function
</script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.donut-chart {
height: 100%;
width: 100%;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts-more.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript" ></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js" type="text/javascript" ></script>
<ext:XScript runat="server">
<script type="text/javascript">
var loadDonutChart = function () {
App.direct.GetDonutChart({
success: function(json) {
var chart = $.parseJSON(json);
chart.tooltip = {
valueSuffix: '%'
};
chart.exporting = {
enabled: false
};
$('#donutchart').highcharts(chart);
// maskInsightPanels(false);
#{panAllocation}.update();
}
});
}
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
ID="panAllocation"
Title="Composite Allocation"
Border="false"
runat="server"
padding="10"
Flex="1"
height="600"
width="600"
Layout="FitLayout">
<Content>
<div id="donutchart" class="donut-chart"></div>
</Content>
</ext:Panel>
<ext:Button Text="Chartit" ID="btnChart" runat="server" OnClientClick="loadDonutChart()" >
</ext:Button>
</form>
</body>
</html>
Last edited by fabricio.murta; Mar 10, 2017 at 5:27 PM.
