Question

I am making a graph where I need little help. (I have googled so much but can’t succeed thats why asking. – If possible duplicate I apologize.)

My Code:

var plot2 = $.jqplot('distance_graph', data.distance, {
                // The "seriesDefaults" option is an options object that will
                // be applied to all series in the chart.
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: false},
                    pointLabels: { show: true },
                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.

                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },
                axes: {
                    // Use a category axis on the x axis and use our custom ticks.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        label: 'Date',
                        ticks: ticks,
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            angle: -30
                        }
                    },
                    // 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: {
                        label: 'Distance Travelled',
                        pad: 1.05,
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                          labelPosition:'middle'
                        },
                        min:min_val,
                        max:max_val     
                    }
                }
            });
        plot2.legend.labels = data.device;
        plot2.replot( { resetAxes: false } );

and How can I remove 0 values also, Because I am converting this chart to multiple Item’s chart. This is currently One Item’s Chart.. So How to remove 0 labels also…

Answer 1

Based on these examples: point-labels, you can modify the display of point labels using .jqplot-point-label class in your CSS. Therefore, you can use CSS transform property to rotate the text as described here: how-to-draw-vertical-text-with-css-cross-browser

To remove labels for 0 values, you need to provide a set of labels with zeros changed to empty strings. You can use this custom set like this:

pointLabels: {
    show: true,
    labels: customSetOfLabels
},

Here’s a working demo – however, it looks like jqPlot blocks requests from jsfiddle so sometimes the scripts don’t load. You can either try locally or visit the jqPlot demo page and the jsfiddle in one browser window so the scripts are loaded from cache.

I used a JavaScript array map() function to create the custom set of labels like this:

function removeZeros(x){
    return x===0 ? '' : x;
}
var line1 = [14, 32, 41, 44, 0, 40];
var line1Labels = line1.map(removeZeros);

Please note that map() might not work in all browsers so you might want to iterate over the array using a for loop instead.