jqPlot line Chart Example higtlight

by Nathan Smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.logAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.cursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<div id="c-11-0" class="rf-default"></div>

CSS

.jqplot-highlighter-tooltip {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#353535+0,444444+24,474747+39,2b2b2b+76,4f4f4f+91,666666+100 */
    background: rgb(53,53,53); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(53,53,53,1) 0%, rgba(68,68,68,1) 24%, rgba(71,71,71,1) 39%, rgba(43,43,43,1) 76%, rgba(79,79,79,1) 91%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(53,53,53,1) 0%,rgba(68,68,68,1) 24%,rgba(71,71,71,1) 39%,rgba(43,43,43,1) 76%,rgba(79,79,79,1) 91%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(53,53,53,1) 0%,rgba(68,68,68,1) 24%,rgba(71,71,71,1) 39%,rgba(43,43,43,1) 76%,rgba(79,79,79,1) 91%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#666666',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: 0px 0px 10px #000;
    color: #fff;
    padding: 2px 5px;
    margin: 0px;
    font-size: 12px;
    min-width: 100px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 100000000;
}

JavaScript

var classChangeOptions = {
        seriesDefaults: {
            pointLabels: { show: true },
        },
        axes: {
            xaxis: {
                pad: 0,
                min: 1,
                tickOptions: { showGridline: false, show: false }
            },
            yaxis: {
                pad: 0,
                tickOptions: { showGridline: false, show: false }
            }
        },
        grid: {
            backgroundColor: '#000',
            borderWidth: 1,
            borderColor: '#e4cb94'
        },
        series: [
            {
                // Class straight line
                showLine: true,
                markerOptions: { size: 0 },
                color: 'rgba(210, 179, 130, 1.0)',
                lineWidth: 5
            },
            {
                // Data points
                lineWidth: 3,
                markerOptions: { size: 15 },
                color: 'rgba(255, 255, 255, 1.0)'
            },
            {
                // Current class diamon
                lineWidth: 3,
                markerOptions: { size: 20, style: 'filledDiamond' },
                color: 'rgba(210, 179, 130, 1.0)'
            },
            {
                // Current class diamon
                lineWidth: 4,
                linePattern: 'dotted',
                markerOptions: { size: 0 },
                color: 'rgba(255, 0, 0, 1.0)'
            }
        ],
        highlighter: {
            tooltipContentEditor: null,
            tooltipAxes: 'y',
            tooltipLocation: 'ne',
            show: true,
            useAxesFormatters: false
        }
    };
    
$(document).ready(function () {
            classHighlighter0 = [,'ROLL1','ROLL2','ROLL3','ROLL4'];

            classChangeOptions.highlighter.tooltipContentEditor = function (str, seriesIndex, pointIndex) {
                console.log("Showing popup PI: " + pointIndex + ":" + str + ":" + seriesIndex);
                if (seriesIndex == 1) {
                   ...