jQWidgets Forums

jQuery UI Widgets Forums Chart On Click: Event Argument not returning

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  corat@plett 12 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • On Click: Event Argument not returning #16956

    corat@plett
    Member

    Refering to the example @ http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-events.htm
    e.serie.dataField does not return the proper value.

    function myEventHandler(e)
    {
    var eventData = ‘Last Event: ‘ + e.event + ‘, DataField: ‘ + e.serie.dataField + ‘, Value: ‘ + e.elementValue;
    $(‘#eventText’).html(eventData);
    };

    On Click: Event Argument not returning #16958

    Peter Stoev
    Keymaster

    Hi corat,

    We are unable to reproduce this. Clicking or Moving the mouse over the Columns returns correct results. Please, provide more details about reproducing this.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    corat@plett
    Member

    Hi Peter
    Thank you for your reply. I am sorry Peter I explained the issue wrong. It is not that there is anything wrong with what the on click event is doing as per your example. What I would like to achieve when I click on any of the bars as per your example is it to return the value of the Category Axis ie Monday, Tuesday or Wednesday etc. Is this possible?

    Kind Regards

    On Click: Event Argument not returning #17156

    Peter Stoev
    Keymaster

    Hi corat,

    Please, find the solution below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <title id='Description'>jqxChart Events Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare chart data
    var sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
    ];
    // prepare jqxChart settings
    var settings = {
    title: "Fitness & exercise weekly scorecard",
    description: "Time spent in vigorous exercise",
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    dataField: 'Day',
    showGridLines: false
    },
    colorScheme: 'scheme04',
    showToolTips: false,
    enableAnimations: true,
    seriesGroups:
    [
    {
    type: 'column',
    valueAxis:
    {
    minValue: 0,
    maxValue: 100,
    unitInterval: 10,
    description: 'Time in minutes'
    },
    mouseover: myEventHandler,
    mouseout: myEventHandler,
    click: myEventHandler,
    series: [
    { dataField: 'Keith', displayText: 'Keith' },
    { dataField: 'Erica', displayText: 'Erica' },
    { dataField: 'George', displayText: 'George' }
    ]
    }
    ]
    };
    function myEventHandler(e) {
    var eventData = '<div><b>Last Event: </b>' + e.event + '<b>, DataField: </b>' + e.serie.dataField + '<b>, Value: </b>' + e.elementValue + "</div>";
    var day = sampleData[e.elementIndex].Day;
    eventData += "<b>Day: </b>" + day;
    $('#eventText').html(eventData);
    };
    // select the chartContainer DIV element and render the chart.
    $('#chartContainer').jqxChart(settings);
    });
    </script>
    </head>
    <body style="background:white;">
    <table>
    <tr>
    <td>
    <div id='chartContainer' style="width:600px; height: 400px"/>
    </td>
    </tr>
    <tr><td>
    <div id='eventText' style="width:600px; height: 30px"/>
    </td>
    </tr>
    </table>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    corat@plett
    Member

    Dear Peter
    We do not use sample data as per your demo. Here is an example of our code:

    How would we implement your example based on our current source

    Kind Regards

    $(function () {
    var lineSource =
    {
    datatype: “json”,
    datafields: [
    { name: ‘UserGrouping’, type: ‘string’ },
    { name: ‘Risks’ },
    { name: ‘RisksPerUser’ }
    ],
    url: ‘/Risk/GetRiskDistributionContent?deptOrUserGroup=’ + @Model.DeptOrUserGroup + ‘&riskLevels=’ + @Model.RiskLevels + ‘&valueType=’ + @Model.ValueType + ”
    };
    var lineDataAdapter = new $.jqx.dataAdapter(lineSource, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    var Settings = {
    title: ‘@Model.ChartCaption’,
    description: “”,
    backgroundColor: ‘#4d4d4e’,
    enableAnimations: true,
    showBorderLine: false,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: lineDataAdapter,
    categoryAxis:
    {
    dataField: ‘UserGrouping’,
    formatFunction: function (value) {
    return value;
    },
    toolTipFormatFunction: function (value) {
    return value;
    },
    textRotationAngle: 45,
    type: ‘default’,
    baseUnit: ‘month’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#3891a7’,
    unitInterval: 1,
    showGridLines: false,
    valuesOnTicks: false,
    orientation: ‘vertical’
    },
    seriesGroups:
    [
    {
    type: ‘column’,
    showLabels: true,
    symbolType: ‘circle’,
    formatSettings:
    {
    decimalPlaces: 0,
    },
    click: click_bar_event_Level1,
    valueAxis:
    {
    displayValueAxis: true,
    description: ”,
    gridLinesColor: ‘#bebebe’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#feb80a’,
    formatSettings:
    {
    decimalPlaces: 0,
    }
    },
    series: [
    { dataField: ‘Risks’, displayText: ‘User Actual Risks’, color: ‘#feb80a’ },
    { dataField: ‘RisksPerUser’, displayText: ‘User Potential Risks’, color: ‘#4882e3’ }
    ]
    }
    ]
    };
    $(‘#jqxChart’).jqxChart(Settings);
    });


    Peter Stoev
    Keymaster

    Hi corat,

    The below will return the record from your data when called in the “click” handler.

    var record = lineDataAdapter.records[e.elementIndex];

    Then you can write this to access the fields:

    record.UserGrouping, record.Risks or record.RisksPerUser

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    On Click: Event Argument not returning #17463

    corat@plett
    Member

    Hi Peter
    Thank you for your prompt reply. That is exactly what I needed. It works perfectly.
    Kind Regards

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.