[CLOSED] Cartesian Chart Menu Popup on data point

  1. #1

    [CLOSED] Cartesian Chart Menu Popup on data point

    I have created a Cartesian chart and when I click on a data point on the chart I have a Menu that pops up. My Menu is rendered in the top left hand corner of the chart. How can I get the menu to popup near/on the data point I have selected?
    Last edited by Daniil; May 27, 2015 at 5:36 PM. Reason: [CLOSED]
  2. #2
    Hi @Sobhia,

    Welcome to the Ext.NET forums!

    I am not sure how everything is configured on your side. Could you, please, provide us with a test case to reproduce the behavior?
  3. #3
    Hi Danill,

    Thank you for your response.

    Please see the test case below.

    <%@ Page Language="C#" %>
    
    <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 }
            };
        }
        
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Line Chart - Ext.NET Examples</title>
        <script>
            var menuClick = function (val) {
               
            };
    
            var setValueClick = function (a, b, c) {
                Ext.getCmp("Menu").show();
            }
        </script>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Panel ID="Panel1"
                runat="server"
                Width="650"
                Height="550"
                Layout="FitLayout">
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server"
                        InsetPadding="40"
                        InnerPadding="0 40 0 40">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model1" 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 Chart"
                                FontSize="22"
                                Width="100"
                                Height="30"
                                X="40"
                                Y="20" />
                        </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>
                                
                                <Tooltip TrackMouse="true" StyleSpec="background: #fff;" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                    <Renderer Handler="this.setHtml(storeItem.get('Month') + ': ' + storeItem.get('Data1') + '%');" />
                                </Tooltip>
    
                                <Listeners>
                                    <ItemMouseDown Fn="setValueClick"/>
                                </Listeners>
                            </ext:LineSeries>
                        </Series>
    
                        <Plugins>
                            <ext:ChartItemEvents runat="server"/>
                        </Plugins>    
                    </ext:CartesianChart>
                </Items>
    
            </ext:Panel>
            <ext:Menu ID="Menu" Floating="true" runat="server">
                <Items>
                    <ext:Button ID="RemoveDataPoint" Text="Remove Data Point" runat="server">
                         <Listeners>
                            <Click Handler="menuClick(this)" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Menu>
        </form>
    </body>
    </html>
  4. #4
    Thank you for the test case!

    Please use:
    var setValueClick = function (series, item, event) {
        App.Menu.showAt(event.getXY());
    };
  5. #5
    Thank you! :-)

Similar Threads

  1. [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
  2. [CLOSED] Cartesian Chart's Highlight
    By RCN in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 03, 2015, 10:45 AM
  3. [CLOSED] Discrete point lifespan on a bar chart
    By FpNetWorth in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 27, 2014, 8:12 AM
  4. [CLOSED] How to hide tooltip of specific data point in line chart?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 18, 2014, 11:35 AM
  5. Replies: 11
    Last Post: Mar 14, 2014, 7:10 AM

Tags for this Thread

Posting Permissions