PDA

View Full Version : Not able to render chart in ext.net 5 version of webfrom application. Unable to find the proper format of data to assigin.



ayyappa
Aug 24, 2020, 3:29 AM
Hi Team I am unable to find a proper format of the data to assign. I am providing the sample I am trying to achieve this.


<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
this.Chart1.GetStore().DataSource = new List < object > {
new { month = "Jan", data1 = 20 },
new { month = "Feb", data1 = 20 },
new { month = "Mar", data1 = 19 },
new { month = "Apr", data1 = 18 },
new { month = "May", data1 = 18 },
new { month = "Jun", data1 = 17 },
new { month = "Jul", data1 = 16 },
new { month = "Aug", data1 = 16 },
new { month = "Sep", data1 = 16 },
new { month = "Oct", data1 = 16 },
new { month = "Nov", data1 = 15 },
new { month = "Dec", data1 = 15 }
};
}

protected void ReloadData(object sender, DirectEventArgs e) {
this.Chart1.GetStore().DataSource = new List < object > {
new { month = "Jan", data1 = 20 },
new { month = "Feb", data1 = 0 },
new { month = "Mar", data1 = 9 },
new { month = "Apr", data1 = 8 },
new { month = "May", data1 = 8 },
new { month = "Jun", data1 = 7 },
new { month = "Jul", data1 = 6 },
new { month = "Aug", data1 = 6 },
new { month = "Sep", data1 = 6 },
new { month = "Oct", data1 = 6 },
new { month = "Nov", data1 = 5 },
new { month = "Dec", data1 = 15 }
};
this.Chart1.Redraw();
}

public List < Object > RenderData = new List < object > {
new { month = "Jan", data1 = 0 },
new { month = "Feb", data1 = 0 },
new { month = "Mar", data1 = 9 },
new { month = "Apr", data1 = 8 },
new { month = "May", data1 = 8 },
new { month = "Jun", data1 = 7 },
new { month = "Jul", data1 = 6 },
new { month = "Aug", data1 = 6 },
new { month = "Sep", data1 = 6 },
new { month = "Oct", data1 = 6 },
new { month = "Nov", data1 = 5 },
new { month = "Dec", data1 = 15 }
};
</script>

<!DOCTYPE html>

<html>

<head runat="server">
<title>Pie Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var tipRenderer = function(toolTip, record, context) {
var total = 0;

App.Chart1.getStore().each(function(rec) {
total += rec.get('Data1');
});

toolTip.setTitle(record.get('Name') + ': ' + Math.round(record.get('Data1') / total * 100) + '%');
};

var saveChart = function(btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice) {
if (choice === 'yes') {
btn.up('panel').down('polar').download();
}
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>Pie Chart Example</h1>

<p>Display 5 sets of random data using a pie chart. Reload data will randomly generate a new set of data in the store.</p>

<p>Toggle Donut button will dynamically change the chart between a Donut and Pie chart.</p>

<p>Click or hover on the legend items to highlight and remove them from the chart.</p>

<ext:Panel runat="server" Width="800" Height="600" Title="Semester Trends" Layout="Fit">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />

<ext:Button runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />

<ext:Button runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />

<ext:Button runat="server" Text="Donut" EnableToggle="true">
<Listeners>
<Toggle Handler="App.Chart1.series[0].setDonut(pressed ? 35 : false); App.Chart1.redraw();" />
</Listeners>
</ext:Button>

<ext:Button runat="server" Text="Preview" Handler="this.up('panel').down('polar').preview();" />
</Items>
</ext:Toolbar>
</TopBar>

<Items>
<ext:PolarChart ID="Chart1" runat="server" Shadow="true" InsetPadding="60" InnerPadding="20">
<LegendConfig runat="server" Dock="Right" />
<Store>
<ext:Store runat="server" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="month" />
<ext:ModelField Name="data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Interactions>
<ext:ItemHighlightInteraction />
<ext:RotateInteraction />
</Interactions>
<Series>
<ext:PieSeries AngleField="Data1" ShowInLegend="true" Donut="0" HighlightMargin="20">
<Label Field="Name" Display="Rotate" FontSize="18" FontFamily="Arial" />
<Tooltip runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Fn="tipRenderer" />
</Tooltip>
</ext:PieSeries>
</Series>
</ext:PolarChart>
</Items>
</ext:Panel>
</form>
</body>
</html>

fabricio.murta
Sep 10, 2020, 5:09 AM
Hello @ayyappa!

It seems you are just using fields instead of properties. In some circumstances they behave differently. You are also missing the this.Chart1.GetStore().DataBind();.

Just in case, here's the code for the Ext.Net.Examples.ChartData.GenerateData(6) you see in the example I believe you based this test case of (https://examples5.ext.net/#/Chart/Pie/Basic/): src/Examples/Chart/_Shared/ChartData.cs (https://github.com/extnet/examples.ext.net/blob/master/src/Examples/Chart/_Shared/ChartData.cs).

Hope this helps!