PDA

View Full Version : [CLOSED] AreaChart In Razor



alscg
Mar 26, 2013, 7:12 AM
Hi Ext.Net Team,

Chart Data :5907


var xAxisData = { name: null, data: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], plotingData: null };
var yAxisData = { name: 'Percent', data: null, plotingData: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}] };

This is my data which , i used to create a chart like the attached image . I am able to do this with another control not using Ext.net chart control. But I want to create this using Ext.Net Chart control . Can any one help me on this . Please refer the attached image for Creating a chart using above data.
This chart we need to create using percent.

Please help me for creating a chart .

Daniil
Mar 26, 2013, 8:31 AM
Hi @alscg,

It cannot create a chart from such the data. It needs to transform the data.

Here is an example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var xAxisData = {
name: null,
data: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
plotingData: null
};

var yAxisData = {
name: 'Percent',
data: null,
plotingData: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}
]
};

var onAfterRender = function () {
var me = this,
series = me.series.get("AreaSeries1"),
store = me.getStore(),
xs = xAxisData.data,
ys = yAxisData.plotingData,
data = [],
i,
j,
sum,
y;

series.title = [];

for (i = 0; i < xs.length; i++) {
data[i] = {};
data[i].x = xs[i],
sum = 0;

for (j = 0; j < ys.length; j++) {
sum += ys[j].data[i];
series.title[j] = ys[j].name;
}

for (j = 0; j < ys.length; j++) {
y = ys[j].data[i];
data[i]["Data" + j] = y / sum * 100;
}
}

//console.log(data); // you can look the result of transforming
store.loadData(data);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Chart
ID="Chart1"
runat="server"
Width="700"
Height="500">
<Store>
<ext:Store runat="server" AutoLoad="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="x" />
<ext:ModelField Name="name" />
<ext:ModelField Name="Data0" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
<ext:ModelField Name="Data3" />
<ext:ModelField Name="Data4" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:CategoryAxis Title="Year" Fields="x" Position="Bottom" />
<ext:NumericAxis Title="Percent" Fields="Data0,Data1,Data2,Data3,Data4" Position="Left" />
</Axes>
<Series>
<ext:AreaSeries SeriesID="AreaSeries1" XField="x" YField="Data0,Data1,Data2,Data3,Data4" />
</Series>
<Listeners>
<AfterRender Fn="onAfterRender" />
</Listeners>
<LegendConfig />
</ext:Chart>
</form>
</body>
</html>