jqplot line chart point label

380 Views Asked by At

I should show value of graphic`s labels. Now it work only when hover.enter image description here

$.jqplot("projects_profit1", [s2, s1], {
                // Turns on animatino for all series in this plot.
                animate: true,
                // Will animate plot on calls to plot1.replot({resetAxes:true})
                animateReplot: true,
                cursor: {
                    show: true,
                    zoom: false,
                    looseZoom: false,
                    showTooltip: false
                },
                series: [
                    {
                        pointLabels: {
                            show: true
                        },
                        renderer: $.jqplot.BarRenderer,
                        showHighlight: false,
                        yaxis: 'y2axis',
                        rendererOptions: {
                            // Speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for bar series is 3000.
                            animation: {
                                speed: 2500
                            },
                            barWidth: 15,
                            barPadding: -15,
                            barMargin: 0,
                            highlightMouseOver: false
                        },
                    },
                    {
                        rendererOptions: {
                            // speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for a line series is 2500.
                            animation: {
                                speed: 2000
                            }
                        }
                    }
                ],
                axesDefaults: {
                    pad: 0
                },
                axes: {
                    // These options will set up the x axis like a category axis.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: labels

                    },
                    y2axis: {
                        rendererOptions: {
                            // alignTicks: true,
                            forceTickAt0: true
                        },
                        min: 0,
                        max: maxCount + 2,
                        tickInterval: 1,
                        tickOptions: {
                            // formatString: '%d',
                            fontSize: '14pt',
                        },
                        pointLabels: {
                            show: true,
                            showLabel: true,

                        },
                        showLabel: true,
                    },
                    yaxis: {
                        rendererOptions: {
                            // align the ticks on the y2 axis with the y axis.
                            forceTickAt0: true,
                        },
                        tickOptions: {
                            formatString: '%d',
                            fontSize: '14pt',
                        }
                    }
                },
                highlighter: {
                    show: true,
                    showLabel: true,
                    tooltipAxes: 'y',
                    sizeAdjust: 7.5, tooltipLocation: 'ne'
                }
            });

My first array contains citys and counts(value label of horizontal line) My second array contains city and some values. I want show this values like on horizontal lines. How to show value labels on the orange graphic? How to show legend for the graph?

1

There are 1 best solutions below

0
Артём Котов On

U should add seriesDefaults: {pointLabels: { show:true }}. like this

plot1 = $.jqplot("projects_profit1", [s2, s1], {
                // Turns on animatino for all series in this plot.
                animate: true,
                // Will animate plot on calls to plot1.replot({resetAxes:true})
                animateReplot: true,
                cursor: {
                    show: true,
                    zoom: false,
                    looseZoom: false,
                    showTooltip: false
                },
                seriesDefaults: {
                    pointLabels: { show:true }
                },
                series: [
                    {
                        pointLabels: {
                            show: true
                        },
                        renderer: $.jqplot.BarRenderer,
                        showHighlight: false,
                        yaxis: 'y2axis',
                        rendererOptions: {
                            // Speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for bar series is 3000.
                            animation: {
                                speed: 2500
                            },
                            barWidth: 15,
                            barPadding: -15,
                            barMargin: 0,
                            highlightMouseOver: false
                        },
                    },
                    {
                        rendererOptions: {
                            // speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for a line series is 2500.
                            animation: {
                                speed: 2000
                            }
                        }
                    }
                ],
                axesDefaults: {
                    pad: 0
                },
                axes: {
                    // These options will set up the x axis like a category axis.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: labels

                    },
                    y2axis: {
                        rendererOptions: {
                            // alignTicks: true,
                            forceTickAt0: true
                        },
                        min: 0,
                        max: maxCount + 2,
                        tickInterval: 1,
                        tickOptions: {
                            // formatString: '%d',
                            fontSize: '14pt',
                        },
                        pointLabels: {
                            show: true,
                            showLabel: true,

                        },
                        showLabel: true,
                    },
                    yaxis: {
                        rendererOptions: {
                            // align the ticks on the y2 axis with the y axis.
                            forceTickAt0: true,
                        },
                        tickOptions: {
                            formatString: '%d',
                            fontSize: '14pt',
                        }
                    }
                },
                highlighter: {
                    show: true,
                    showLabel: true,
                    tooltipAxes: 'y',
                    sizeAdjust: 7.5, tooltipLocation: 'ne'
                }
            });