JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<script src="http://andrewawhitaker.com/jquery-plugins/jquery.jplot.min.js"></script>
<link rel="stylesheet" href="http://andrewawhitaker.com/jquery-plugins/jquery.jplot.min.css">
<div id="chartdiv" style="height:400px;width:400px; "></div>
<div id="chartdiv2" style="height:400px;width:400px; "></div>

JavaScript

$("#chartdiv").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) {
    if (neighbor) {
        alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
    }
});


line1 = [[1, 1], [1.5, 2.25], [2, 4], [2.5, 6.25], [3, 9], [3.5, 12.25], [4, 16]];
line2 = [25, 12.5, 6.25, 3.125];
xticks = [[0, 'zero'], [1, 'one'], [2, 'two'], [3, 'three'], [4, 'four'], [5, 'five']];
yticks = [-5, 0, 5, 10, 15, 20, 25, 30];
plot4 = $.jqplot('chartdiv', [line1, line2], {
    legend: {
        show: true
    },
    title: 'Click Event Test',
    grid: {
        background: '#f3f3f3',
        gridLineColor: '#accf9b'
    },
    series: [
        {
        label: 'Rising line',
        markerOptions: {
            style: 'square'
        }},
    {
        label: 'Declining line'}
    ],
    axes: {
        xaxis: {
            ticks: xticks
        },
        yaxis: {
            ticks: yticks,
            tickOptions: {
                formatString: '%d'
            }
        }
    }
});

var plot2 = $.jqplot('chartdiv2', [line1, line2], {
    legend: {
        show: true
    },
    title: 'Click Event Test',
    grid: {
        background: '#f3f3f3',
        gridLineColor: '#accf9b'
    },
    series: [
        {
        label: 'Rising line',
        markerOptions: {
            style: 'square'
        }},
    {
        label: 'Declining line'}
    ],
    axes: {
        xaxis: {
            ticks: xticks
        },
        yaxis: {
            ticks: yticks,
            tickOptions: {
                formatString: '%d'
            }
        }
    }
});