Show Line chart when click button

  1. #1

    Show Line chart when click button

    I want to show chart when click button, no show in page_Load.

    But when click button not show line chart.

    p/s: i want to filter data before show line chart.

    pls help me.

    This is code

     <ext:Panel
                runat="server"
                Width="1200"
                Height="550"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
                        
                            <ext:Button ID="btn_ViewChart" runat="server" Text="View Report"></ext:Button>
                           
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server"
                        InsetPadding="40"
                        InnerPadding="0 40 0 40">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        
                        <Interactions>
                            <ext:PanZoomInteraction ZoomOnPanGesture="true" />
                        </Interactions>
    
                        <Items>
                            <ext:TextSprite
                                Text="Line Charts - Basic Line"
                                FontSize="22"
                                Width="100"
                                Height="30"
                                X="40"
                                Y="20" />
    
                            <ext:TextSprite
                                Text="Data: Browser Stats 2012"
                                FontSize="10"
                                X="12"
                                Y="480" />
    
                            <ext:TextSprite
                                Text="Source: http://www.w3schools.com/"
                                FontSize="10"
                                X="12"
                                Y="495" />
                        </Items>
    
                        <Axes>
                            <ext:NumericAxis
                                Position="Left"
                                Fields="Data1"
                                Grid="true"
                                Minimum="0"
                                Maximum="24">
                                <Renderer Handler="return layout.renderer(label) + '%';" />
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis
                                Position="Bottom"
                                Fields="Month"
                                Grid="true">
                                <Label RotationDegrees="-45" />
                            </ext:CategoryAxis>
                        </Axes>
                        <Series>
                            <ext:LineSeries XField="Month" YField="Data1">
                                <StyleSpec>
                                    <ext:Sprite LineWidth="4" />
                                </StyleSpec>
                                
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                </HighlightConfig>
                                
                                <Marker>
                                    <ext:Sprite Radius="4" />
                                </Marker>
                                
                                <Label Field="Data1" Display="Over" />
    
                                <Tooltip TrackMouse="true" StyleSpec="background: #fff;" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                    <Renderer Handler="this.setHtml(storeItem.get('Month') + ': ' + storeItem.get('Data1') + '%');" />
                                </Tooltip>
                            </ext:LineSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Panel>
    this is code behind:

     Private Sub test_report()
            Me.Chart1.GetStore().DataSource = New List(Of Object)() From { _
               New With { _
                   Key .Month = "Jan", _
                   Key .Data1 = 20 _
               }, _
               New With { _
                   Key .Month = "Feb", _
                   Key .Data1 = 20 _
               }, _
               New With { _
                   Key .Month = "Mar", _
                   Key .Data1 = 19 _
               }, _
               New With { _
                   Key .Month = "Apr", _
                   Key .Data1 = 18 _
               }, _
               New With { _
                   Key .Month = "May", _
                   Key .Data1 = 18 _
               }, _
               New With { _
                   Key .Month = "Jun", _
                   Key .Data1 = 17 _
               }, _
               New With { _
                   Key .Month = "Jul", _
                   Key .Data1 = 16 _
               }, _
               New With { _
                   Key .Month = "Aug", _
                   Key .Data1 = 16 _
               }, _
               New With { _
                   Key .Month = "Sep", _
                   Key .Data1 = 16 _
               }, _
               New With { _
                   Key .Month = "Oct", _
                   Key .Data1 = 16 _
               }, _
               New With { _
                   Key .Month = "Nov", _
                   Key .Data1 = 15 _
               }, _
               New With { _
                   Key .Month = "Dec", _
                   Key .Data1 = 15 _
               } _
           }
        End Sub
    
      Protected Sub btn_ViewChart_DirectClick(sender As Object, e As Ext.Net.DirectEventArgs) Handles btn_ViewChart.DirectClick
               test_report()
        End Sub
    Last edited by fabricio.murta; Jan 18, 2016 at 6:06 PM.
  2. #2
    Hello @thanhnv2104! Welcome to Ext.NET forums!

    I will give you some directions with our examples, I hope this helps you make it work.

    First, you have to give your button an action. In your code, it is just a sitting button with no event bound.

    Second, just set your graph as hidden on markup: Hidden="True".

    Third, bind the new data as the 'refresh' button does in this example.

    With that, I think you have all you need to make your page work.

    Please, don't refrain from looking in the examples explorer, there are lots of use cases you can derive from them. Just give yourself some time to browse some of them related to a feature you want to explore and you should be fine.

    Last, when posting here in the forums, it is useful to wrap code blocks you paste in actual [ code] and [ /code] tags. It makes it easier to copy-paste and also make the code look better.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Show Line chart when click button

    Thank you for reply for me.

    I will note for latter.

    My broblem has solve, i want to share my code for everyone

      <ext:Panel
                runat="server"
                Width="1200"
                Height="550"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />                     
                            <ext:Button ID="btn_ViewChart" runat="server" Text="View Report" OnDirectClick="btn_ViewChart_DirectClick"></ext:Button>                      
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:CartesianChart Hidden="true"
                        ID="Chart1"
                        runat="server"
                        InsetPadding="40"
                        InnerPadding="0 40 0 40">
                        <Store>
                            <ext:Store runat="server" AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Date" />
                                            <ext:ModelField Name="Volume1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        
                        <Interactions>
                            <ext:PanZoomInteraction ZoomOnPanGesture="true" />
                        </Interactions>
    
                        <Items>
                            <ext:TextSprite
                                Text="Line Charts - Basic Line"
                                FontSize="22"
                                Width="100"
                                Height="30"
                                X="40"
                                Y="20" />
    
                            <ext:TextSprite
                                Text="Data: Browser Stats 2012"
                                FontSize="10"
                                X="12"
                                Y="480" />
    
                            <ext:TextSprite
                                Text="Source: http://www.w3schools.com/"
                                FontSize="10"
                                X="12"
                                Y="495" />
                        </Items>
    
                        <Axes>
                            <ext:NumericAxis
                                Position="Left"
                                Fields="Data1"
                                Grid="true"
                                Minimum="0"
                                Maximum="10">
                                <Renderer Handler="return layout.renderer(label);" />
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis
                                Position="Bottom"
                                Fields="Date"
                                Grid="true">
                                <Label RotationDegrees="-45" />
                            </ext:CategoryAxis>
                        </Axes>
                        <Series>
                            <ext:LineSeries XField="Date" YField="Volume1">
                                <StyleSpec>
                                    <ext:Sprite LineWidth="4" />
                                </StyleSpec>
                                
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                </HighlightConfig>
                                
                                <Marker>
                                    <ext:Sprite Radius="4" />
                                </Marker>
                                
                                <Label Field="Volume1" Display="Over" />
    
                                <Tooltip TrackMouse="true" StyleSpec="background: #fff;" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                    <Renderer Handler="this.setHtml(storeItem.get('Date') + ': ' + storeItem.get('Volume1') + '%');" />
                                </Tooltip>
                            </ext:LineSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Panel>
      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
    
     Protected 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("Date")
            dt.Columns.Add("Volume1")
    
            Dim dr As DataRow
    
            'Add rows to the table which contains some random data for demonstration
            dr = dt.NewRow()
            dr("Date") = "Tháng 1"
            dr("Volume1") = 8
             dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 2"
            dr("Volume1") = 7
             dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 3"
            dr("Volume1") = 6     
            dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 4"
            dr("Volume1") = 7
            dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 5"
            dr("Volume1") = 9     
            dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 6"
            dr("Volume1") = 9
            dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 7"
            dr("Volume1") = 8
            dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 8"
            dr("Volume1") = 4
            dt.Rows.Add(dr)
    
            dr = dt.NewRow()
            dr("Date") = "Tháng 9"
            dr("Volume1") = 6      
            dt.Rows.Add(dr)
    
            Return dt
        End Function

Similar Threads

  1. Replies: 2
    Last Post: Sep 11, 2015, 8:20 AM
  2. [CLOSED] Show hand coursor on mouseover of point in line chart in ext.net 2.5
    By praveencat123 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 03, 2015, 6:26 AM
  3. [CLOSED] How to show solid horizontal line at specific Y value in entire chart?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 22, 2014, 9:24 AM
  4. Replies: 4
    Last Post: Apr 08, 2014, 5:45 PM
  5. [CLOSED] Dotted line renders as solid line in line chart image
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2014, 5:28 PM

Tags for this Thread

Posting Permissions