[CLOSED] AreaChart In Razor

  1. #1

    [CLOSED] AreaChart In Razor

    Hi Ext.Net Team,

    Chart Data :Click image for larger version. 

Name:	TestChart.png 
Views:	24 
Size:	12.4 KB 
ID:	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 .
    Last edited by Daniil; Apr 02, 2013 at 4:06 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    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>

Similar Threads

  1. [CLOSED] [Razor] TreeGrid in Razor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 01, 2012, 9:12 AM
  2. [CLOSED] [RAZOR] DraggablePanelConfig doesn't have StartDrag in Razor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 28, 2012, 2:37 PM
  3. [CLOSED] [Razor] HyperLink Text in Razor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 20, 2012, 12:16 PM
  4. [CLOSED] [Razor] Add GridView to GridPanel in razor
    By boris in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 09, 2012, 4:23 PM
  5. [CLOSED] [Razor] Setup Auto load panel in razor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2012, 10:54 AM

Posting Permissions