jQWidgets Forums
jQuery UI Widgets › Forums › Chart › On Click: Event Argument not returning
Tagged: chart
This topic contains 6 replies, has 2 voices, and was last updated by corat@plett 12 years, 3 months ago.
-
Author
-
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);
};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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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
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 StoevjQWidgets Team
http://www.jqwidgets.comDear 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);
});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 StoevjQWidgets Team
http://www.jqwidgets.comHi Peter
Thank you for your prompt reply. That is exactly what I needed. It works perfectly.
Kind Regards -
AuthorPosts
You must be logged in to reply to this topic.