What's New?

[CLOSED] Unable to get Chart Mouse events working

  1. #1
    Apr 23, 2015, 2:37 PM

    [CLOSED] Unable to get Chart Mouse events working

    Hi

    I'm plotting some data using a LineSeries and I want to enable the user to click on a point in the series using an event such as ItemClick.

    This is the relevant part of my code:

    Html.X().LineSeries()
    .Listeners(lst => lst.ItemClick.Handler = "testClick")
    .Title("Demand History")
    .XField("Date")
    .YField("Volume")
    .Marker(Html.X().CircleSprite().Radius(4))
    .Tooltip(
        Html.X().ChartTip()
            .TrackMouse(true)
            .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Date') + ' : ' + storeItem.get('Volume'));"))
    )
    This is my script:

    var testClick = function(a,b,c){
    debugger
    var test = a;
}
    But however I click on or near the line series the event doesn't appear to be activated, it doesn't activate testClick.

    Presumably it's something simple I'm missing?

    Thanks
    Last edited by Daniil; Apr 29, 2015 at 12:25 PM. Reason: [CLOSED]
  2. #2
    Apr 23, 2015, 5:54 PM
    Add the required ChartItemEvents plugin to the chart:

    .Plugins(
    new ChartItemEvents()
)
    Discussion here:
    http://forums.ext.net/showthread.php...Ext-Bar-Series
  3. #3
    Apr 24, 2015, 6:22 AM
    Thanks Dimitris

    This is what I find so frustrating about Ext.Net though. I have spent quite a lot of time searching the forums and googling but didn't find the fact that I needed a plugin. Am I missing an important source of information or is it just not there?

    Thanks again

    Jeff
  4. #4
    Apr 24, 2015, 7:13 AM
    The primary source of information about Ext.NET is the Examples Explorer and the forums. The forum's custom search is much better than searching directly from google.

    As fas as ExtJS is concerned, your best bet is its API documentation.


    Hope it helps.
  5. #5
    Apr 24, 2015, 7:44 AM
    Thanks Dimitris

    I have added the plugin but I still don't seem to be able to get it to work. Presumably I'm doing something wrong or missing something?

    Here is my code:

    <!DOCTYPE html>

<html>
<head>
    <title></title>
    @{
        ViewBag.Title = "Forecast Chart";
    }
    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @section scripts
    { 
        <script>
            var testClick = function(a,b,c){
                debugger
                var test = a;
            }
        </script>
    }
</head>
<body>
    <br /><br />
@section mainBody
{
    @(Html.X().CartesianChart()
        .ID("ForecastChart")
        .Border(true)
        .LegendConfig(Html.X().ChartLegend().Dock(Dock.Top))
        .Store(
            Html.X().Store()
                .ID("Store")
                .Model(Html.X().Model().Fields("date", "demandHistory", "forecastOne"))
                .Proxy(Html.X().AjaxProxy().Url(Url.Action("Read")).Reader(Html.X().JsonReader().RootProperty("data")))
        )
        .Axes(
            Html.X().NumericAxis()
                .AxisID("yAxis")
                .Minimum(0)
                .Position(Position.Left),
            Html.X().CategoryAxis()
                .Position(Position.Bottom)
        )
        .Series(
            Html.X().LineSeries()
                .Listeners(lst => lst.ItemClick.Handler = "testClick")
                .Title("Demand History")
                .XField("date")
                .YField("demandHistory")
                .Marker(Html.X().CircleSprite().Radius(2))
                .Tooltip(
                    Html.X().ChartTip()
                    .TrackMouse(true)
                    .Renderer(r => r.Handler = "this.setTitle(storeItem.get('date') + ' : ' + storeItem.get('demandHistory'));"))
        )
        .Plugins(Html.X().ChartItemEvents())
    )
}
</body>
</html>
    Last edited by Dimitris; Apr 24, 2015 at 8:46 AM. Reason: code formatting
  6. #6
    Apr 24, 2015, 9:01 AM
    Please, wrap your code samples in CODE and/or VAR tags.

    Your example cannot be run as is because some parts are missing but it should work if you replace Handler:

    .Listeners(lst => lst.ItemClick.Handler = "testClick")
    with Fn:

    .Listeners(lst => lst.ItemClick.Fn = "testClick")

    Also, make sure you are going to hit the debugger statement since your script does not have any visible output. For me, it works when debugging with IE but not with FF.

    Hope it helps.
  7. #7
    Apr 29, 2015, 6:10 AM
    Thanks for your help Dimitris.

    That's working fine now.

Similar Threads

  1. [CLOSED] [#583] Unable to call Listeners and Direct Events for the Ext Bar Series.
    By mohan.bizbites in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 02, 2015, 1:45 PM
  2. [CLOSED] Button Menu with TextFields, Mouse events interacting
    By FVNoel in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 06, 2013, 9:28 AM
  3. [CLOSED] Mouse events interacting with Ext.Menu fields
    By FVNoel in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 06, 2013, 9:27 AM
  4. Unable to get the PopUp Dynamic Chart
    By nagesh in forum 2.x Help
    Replies: 6
    Last Post: Dec 05, 2012, 5:42 AM
  5. TreeNode and Mouse Events (OnMouseOver/Hoover)
    By yaser82 in forum 1.x Help
    Replies: 2
    Last Post: Dec 07, 2009, 5:22 PM

Posting Permissions