0

I have a High Charts Line chart feeding from a MySQL database via php and javascript. I have the chart displaying correctly, both lines are appearing as they should. The only issue is the tooltip(I believe it's called) when I have it set as shared: true, it will share the data points, BUT it won't display any tooltip, and removes the crosshair even though the crosshairs is selected to true, but when I remove shared, and set to 'false' it will do the correct behavior, selecting them individually and displaying the tooltip, name with the value. I have changed it, and at a loss.

Here is my code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Stacked area chart with data from MySQL using Highcharts</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container'
                },

        legend: {
                enabled: true,
                backgroundColor: '#FFFFFF',
                layout: 'vertical',
                align: 'right',
                floating: true,
                reversed: true,
                verticalAlign: 'top',
                y: -20.0,
                x: -20.0
                },

                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'DPMO'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
            crosshairs: true,
            animation: true,
                    shared: Boolean,
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br>'+
                            this.x +': '+ this.y;
                    }

                },

         title: {
                    text: '12 Week IRDR DPMO',
                    x: -20 //center
                },

                subtitle: {
                    text: 'http://xxxxxxx.com/',
                    x: -20
                },

                plotOptions: {
                line: {
                allowPointSelect: false,
                cursor: '',
                events: {
                legendItemClick: ' '
                },
                showInLegend: true
                }
            },
                series: [{
                color: Highcharts.getOptions().colors[2]}
                ]
            }

            $.getJSON("data.php", function(json) {
            options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[2];
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

Here is what it is doing: enter image description here Here is what I would like the behaviour to be, but more multiple data points. enter image description here

Desired Behaviour: enter image description here

1 Answer 1

3

When your tooltip is shared you can't access this.series in your formatter function, you need to reference each series separately with this.points[i].series, and similarly for your y values, e.g.

tooltip: {
    crosshairs: true,
    animation: true,
    shared: true,
    formatter: function() {
        return this.x + '<br>'
            + this.points[0].series.name + ': ' + this.points[0].y + '<br>'
            + this.points[1].series.name + ': ' + this.points[1].y;
        }
}

See http://jsfiddle.net/5EgLN/ for a working demo.

2
  • Awesome, so simple!! How easy! I feel so dumb! :P Any chance you know how to setup a couple static lines that are always at a certain data points? 5k, and 3k? Thanks, either way.
    – Nomad
    Jun 3, 2014 at 22:38
  • Disregard my question, I figured it out :) Thank you for all your help!
    – Nomad
    Jun 3, 2014 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.