jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
105 lines (98 loc) • 4.92 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Events Example</title>
<meta name="description" content="This is an example of javascript chart events." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../scripts/demos.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,
xAxis:
{
dataField: 'Day',
type: 'basic'
},
colorScheme: 'scheme04',
showToolTips: false,
enableAnimations: true,
seriesGroups:
[
{
type: 'column',
valueAxis:
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' }
},
series: [
{ dataField: 'Keith', displayText: 'Keith' },
{ dataField: 'Erica', displayText: 'Erica' },
{ dataField: 'George', displayText: 'George' }
]
}
]
};
function myEventHandler(event) {
var eventData = '<div><b>Last Event: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, Value: </b>' + event.args.elementValue + "</div>";
if (event.type == 'toggle')
eventData = '<div><b>Last Event: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, visible: </b>' + event.args.state + "</div>";
$('#eventText').html(eventData);
};
// select the chartContainer DIV element and render the chart.
$('#chartContainer').jqxChart(settings);
$('#chartContainer').on('mouseleave mouseenter click toggle', function (event) {
if (event.args)
myEventHandler(event);
});
});
</script>
</head>
<body style="background:white;">
<table>
<tr>
<td>
<div id='chartContainer' style="width:850px; height: 500px"/>
</td>
</tr>
<tr><td>
<div id='eventText' style="width:600px; height: 30px"/>
</td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript chart events. The different events can be caught with the myEventHandler function. You can see the type, the value and the state of the event.
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>