What's New?

Problem in Pie chart

  1. #1
    Jan 19, 2016, 7:47 AM

    Problem in Pie chart

    Dear sir!

    I use Pice chart, but it show tooltip wrong.

    This is my code:

     <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="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Interactions>
                        <ext:ItemHighlightInteraction />
                        <ext:RotateInteraction />
                    </Interactions>
                    <Series>
                        <ext:PieSeries
                            XField="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>
    
 <script>
         var tipRenderer = function (storeItem, item) {
             var total = 0;

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

             this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
         };
    
    </script>
    
 Private Function CreateDataTable() As DataTable
        'Create a DataTable as the data source of the Chart control
        Dim dt As New DataTable()

        'Add three columns to the DataTable
        dt.Columns.Add("Name")
        dt.Columns.Add("Data1")
      
        Dim dr As DataRow

        'Add rows to the table which contains some random data for demonstration
        dr = dt.NewRow()
        dr("Name") = "Submit"
        dr("Data1") = 7
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("Name") = "No Submit"
        dr("Data1") = 3
        dt.Rows.Add(dr)

             Return dt
    End Function
      Protected Sub btn_ViewChart_DirectClick(sender As Object, e As Ext.Net.DirectEventArgs) Handles btn_ViewChart.DirectClick
        Me.Chart1.Hidden = False
        Me.Chart1.GetStore().DataSource = CreateDataTable()
        Chart1.GetStore.DataBind()
    End Sub
    This is image show chart wrong

    Click image for larger version.  Name: pic1.png  Views: 111  Size: 27.4 KB  ID: 24407Click image for larger version.  Name: pic2.png  Views: 98  Size: 28.4 KB  ID: 24408

    Pls help me!
  2. #2
    Jan 19, 2016, 9:24 PM
    Hello!

    I've just moved your post to a new thread, as we are changing to a new issue here. Please, every time you open a new discussion, create a new thread, so we keep the forums tidy and easy for others to best use it. The solution outcome you provided in the other thread for example is very valuable.

    Also, when making examples, whenever possible you can just paste it together in a single .aspx code. Will make our lives much easier to reproduce your scenario.

    For example, I've reworked your pieces of code into an unique:
    <%@ Page Language="vb" %>

<%@ Import Namespace="System.Data" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script runat="server">
        Private Function CreateDataTable() As DataTable
            'Create a DataTable as the data source of the Chart control
            Dim dt As New DataTable()

            'Add three columns to the DataTable
            dt.Columns.Add("Name")
            dt.Columns.Add("Data1")
      
            Dim dr As DataRow

            'Add rows to the table which contains some random data for demonstration
            dr = dt.NewRow()
            dr("Name") = "Submit"
            dr("Data1") = 7
            dt.Rows.Add(dr)

            dr = dt.NewRow()
            dr("Name") = "No Submit"
            dr("Data1") = 3
            dt.Rows.Add(dr)

            Return dt
        End Function
        
        Protected Sub btn_ViewChart_DirectClick(sender As Object, e As Ext.Net.DirectEventArgs) Handles btn_ViewChart.DirectClick
            Me.Chart1.Hidden = False
            Me.Chart1.GetStore().DataSource = CreateDataTable()
            Chart1.GetStore.DataBind()
        End Sub
    </script>
    <script>
        var tipRenderer = function (storeItem, item) {
            var total = 0;

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

            this.setTitle(storeItem.get('Name') + ': ' + Math.round((storeItem.get('Data1') * 100) / total) + '%');
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" />
        <ext:Button runat="server" ID="btn_ViewChart" Icon="ChartPieLightning" Text="View Chart" />
        <ext:PolarChart
            ID="Chart1"
            runat="server"
            Shadow="true"
            Height="300"
            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="Name" />
                                <ext:ModelField Name="Data1" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Interactions>
                <ext:ItemHighlightInteraction />
                <ext:RotateInteraction />
            </Interactions>
            <Series>
                <ext:PieSeries
                    XField="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>
    </div>
    </form>
</body>
</html>
    This would allow us for much faster response in the future. And it avoids misunderstandings, specially when followed with clear illustration of what shows wrong like the pictures you provided.

    As for the problem, after I could finally build a running sample and just by printing the value of total I could see it was being "073" i.e. a string concatenation operation was being done.

    So, you have two solutions:

    1: change the line that sums total (line 46) to:
    total += parseInt(rec.get('Data1'));
    2: set the model's variable (line 74) to Int:
    <ext:ModelField Name="Data1" Type="Int" />
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jan 20, 2016, 12:40 AM

    Hello fabricio.murta

    Thank's you very much.

    I want to set color in every chart. Exam: Submit is color red, not Sub mit is color yellow. How do it?
  4. #4
    Jan 20, 2016, 6:25 PM
    You have this two examples that applies different colors on charts:
    - 3D Column chart (click 'switch theme' button to see the colors change -- the concept is the same on pie charts)
    - Pie with renderer

    Also if you search forums you will find several questions about also coloring the legend of charts. If the above does not help you, use the search for your advantage. Also using site:forums.ext.net your_search_here on google is a good approach.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] Bar chart problem, not all bar displayed
    By feanor91 in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 30, 2015, 2:23 PM
  2. Pie Chart Render Problem
    By posser in forum 2.x Help
    Replies: 2
    Last Post: Nov 06, 2013, 4:04 PM
  3. [CLOSED] chart display problem
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 17
    Last Post: Sep 03, 2012, 11:09 AM
  4. Problem with Ext.Net Chart - Column
    By OCaglayan in forum 2.x Help
    Replies: 1
    Last Post: Jul 31, 2012, 12:43 PM
  5. This is a bug?Chart problem···
    By jiaxiang8756 in forum 2.x Help
    Replies: 4
    Last Post: Jul 17, 2012, 7:14 PM

Posting Permissions