Html5 Chart

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

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:500px; height:400px; position: relative; left: 0px; top: 0px;"></div>
<button id="click">click</button>
<div id='eventText' style="width:200px; 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,
    valueAxis: {
        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.

$('#jqxChart').jqxChart(settings);
var chart =...