Html5 Chart

Bind to the mouseover event by type: jqxChart. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>
<div id='eventText' style="width:600px; height: 30px" />

JavaScript

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>";
     $('#eventText').html(eventData);

 };
 // select the chartContainer DIV element and render the chart.

...