I m Facing Problem in Displaying tool tip for jq plot bar chart My jqPlot Code Is

<script class="code" type="text/javascript">

$(document).ready(function(){
    var s1 = [0,10,20,30,40,50,60,70,80,90,100];
    var s2 = [-100,-90,-80,-70,-60,-50,-40,-30,-20,-10,-0];
    var ticks = ['01-jun','02-jun','03s-jun','04-jun','05-jun','06-jun','07-jun','08-jun','09-jun','10-jun'];
    var plot1 = $.jqplot('chart1', [s1, s2], {
        animate: !$.jqplot.use_excanvas,
        stackSeries: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true, barPadding: 10,barMargin: 15},
            pointLabels: { show: true }
        },
        series: [
                { color: '#68BA38',label:'Uptime' },
                { color: 'red',label:'Downtime' },
                { label:'abcd' }
        ],
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                pad: 1,
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1,
                min:-100,
                max: 100,
            }
        },
        highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },
    });
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
  </script>

Its Displaying Tooltip like this: uptime,20 or downtime,-20

i Want To display Tooltip contain my tick value like: 01-jun

I m Facing Problem in Displaying tool tip for jq plot bar chart My jqPlot Code Is

<script class="code" type="text/javascript">

$(document).ready(function(){
    var s1 = [0,10,20,30,40,50,60,70,80,90,100];
    var s2 = [-100,-90,-80,-70,-60,-50,-40,-30,-20,-10,-0];
    var ticks = ['01-jun','02-jun','03s-jun','04-jun','05-jun','06-jun','07-jun','08-jun','09-jun','10-jun'];
    var plot1 = $.jqplot('chart1', [s1, s2], {
        animate: !$.jqplot.use_excanvas,
        stackSeries: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true, barPadding: 10,barMargin: 15},
            pointLabels: { show: true }
        },
        series: [
                { color: '#68BA38',label:'Uptime' },
                { color: 'red',label:'Downtime' },
                { label:'abcd' }
        ],
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                pad: 1,
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1,
                min:-100,
                max: 100,
            }
        },
        highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },
    });
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
  </script>

Its Displaying Tooltip like this: uptime,20 or downtime,-20

i Want To display Tooltip contain my tick value like: 01-jun

• javascript
• charts
• jqplot

2 Answers 2

Had exactly this question myself, so I used Firefox's Web Developer tools to examine the plot object in the tooltipContentEditor function to find where the x-axis labels are. It is in plot.options.axes.xaxis.ticks. So the code you want to get your data point's x-axis label is:

plot.options.axes.xaxis.ticks[pointIndex]

This is the x-axis label for the point index in question.

My plete code for the callback function I now use is:

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    return plot.series[seriesIndex]["label"] + ": " + plot.options.axes.xaxis.ticks[pointIndex] + ", " + plot.data[seriesIndex][pointIndex];
}

This shows the series label, the x-axis tick label, then the data point value.

I think it might be something like

return ticks[pointIndex];