Highchart for temperature and humidity does not share tooltip

Question

I'm working on a weekend project to monitor temperature and humidity using a DHT22 sensor and my raspberryPi. The readings are working great and now I'm trying to plot everything using Highcharts.

This is the Highcharts options I'm using:

Highcharts.setOptions({global:{useUTC:false}});options={
    chart:{
        renderTo:"content",
        type:"spline",
        zoomType: 'xy'
    },
    title:{
        text:"title"
    },
    subtitle:{
        text:""
    },
    xAxis:{
        type:"datetime",
        dateTimeLabelFormats:{
            hour:"%H. %M"
        }
    },
    yAxis: [{ // temperature axis
        title: {
            text:"T (°C)"
        },
        labels: {
            format: '{value}',
            style: {
                fontSize: '10px'
            }
        }
    }, { // humidity axis
        title: {
            text: "Humidity (%)",
        },
        labels: {
            format: '{value}',
            style: {
                fontSize:'10px'
            }
        },
        opposite: true,
        gridLineWidth: 0
    }],
    tooltip:{
        shared: true
    },
    series: [{
        name: 'Temperature',
        data:[],
        tooltip: {
            valueSuffix: ' °C'
        }
    },
    {
        name: 'Humidity',
        data:[],
        yAxis:1,
        tooltip: {
            valueSuffix: ' %'
                    }
    }]
}

and this is the actual code to insert data into the graph:

<script type="text/javascript">
    $(document).ready(function(){
        var urls = [GetTempXml(),GetHumidityXml()];
        var xmlTemp;
        var xmlHum;
        $.get(GetTempXml(), function(xmlTemp) {
            $.get(GetHumidityXml(), function(xmlHumid) {
                var $xmlTemp = $(xmlTemp), $xmlHumid = $(xmlHumid);

                //populate with data
                function populate(xml, index) {
                    $(xml).find("row").each(function() {
                        var t = parseInt($(this).find("t").text())*1000
                        $(this).find("v").each(function(index){
                            var v = parseFloat($(this).text())
                            v = v || null
                            if (v != null) {
                                options.series[index].data.push([t,v])
                                };
                            });
                        });
                    };

                populate(xmlTemp, 0);
                populate(xmlHumid,1);

                options.title.text = "Temperature and Humidity";

                //add sunrise and sunset
                options.xAxis.plotBands = []
                for (var i = GetBandsNumber(); i >= 0; i--) {
                    var d = new Date();
                    d.setHours(0,0,0,0);
                    d.setDate(d.getDate()-i);
                    var sunrise = d.getTime()+computeSunrise(dayOfYear(), true);
                    var sunset = d.getTime()+computeSunrise(dayOfYear(), false);
                    options.xAxis.plotBands.push({
                        from: sunrise,
                        to: sunset,
                        color: '#FCFFC5'
                        });
                };
                chart = new Highcharts.Chart(options);
            });
        });
    });
</script>

But as you can see there are a few issues: highchart_temp_humidity

The Humidity axis is not using a different collor. I even tried using on the axis definition but didn't work:

style: { color: Highcharts.getOptions().colors[0] }
The tooltip was supposed to be shared but only displays humidity data
There is a weird curve from the first humidity value to the last temperature value. How can I remove that?

First of all it's humidity serie not axis that you are mentioning. Secondly, It seems your humidity serie has no data. Thats why it doesn't show any red lines or doesn't show in the tooltip. That curve may be because your data is not sorted. Do you have any errors in your page console? As @RocoCTZ mentioned it would be much easier for us to help you if you could implement your code in jsfiddle.net — Raein Hashemi
The problems is that you have single serie, so you should create two separated series. — Sebastian Bochan
I believe you are right @SebastianBochan, but isn't the series definition on the options correct? If not, can you point me to the correct direction? Meanwhile I'm trying to put it into Jsfiddle.net — douglaslps

douglaslps douglaslps · Accepted Answer · 2015-02-03T18:35:54

Thank you guys. I found my own error on this one.

If you check the populate function, you will see that I was using the index variable to drive the series array, but that variable was overridden by the function used on find.each call. I just changed the name of the variable to serie and voilá!

//populate with data
function populate(xml, serie) {
    $(xml).find("row").each(function() {
        var t = parseInt($(this).find("t").text())*1000
        $(this).find("v").each(function(index){
            var v = parseFloat($(this).text())
            v = v || null
            if (v != null) {
                options.series[serie].data.push([t,v])
                };
            });
        });
    };

Highchart for temperature and humidity does not share tooltip

1 Answers