Highcharts: with multiple axes

Question

I'm not a developer so I need your help. I would like to create a charts with Highcharts with multiple axes like this: http://www.highcharts.com/demo/combo-multi-axes The Highcharts example uses 3 types of values: Temperature, Pressure and Rainfall, but I need it to plot both temperature and humidity in the same charts, so only two type of values. The data (Temperature and Humidity) are stored into XML thanks to RRDtool (round-robin database). Now I'm using Highcharts to plot basic line, so each chart plot only one type of values (one chart for Temperature, another chart fo Humidity).

This is my code of basic line chart:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type="text/javascript" src="/weather-station/js/highcharts.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).ready(function() {

                $.ajax({
                    type: "GET",
                    url: "/data/temperature24h.xml",
                    dataType: "xml",
                    success: function(xml) {

                        Highcharts.setOptions({global:{useUTC:false}});
                        options={chart:{renderTo:"container-fluid",type:"spline",zoomType:"xy"},title:{text:""},xAxis:{type:"datetime",dateTimeLabelFormats:{hour:"%H. %M"}},yAxis:{title:{text:"Temperature (°C)"}},tooltip:{formatter:function(){return"<b>"+this.series.name+"</b><br/>"+Highcharts.dateFormat("%H:%M",this.x)+": "+this.y.toFixed(1)+" °C"}},plotOptions:{series:{marker:{radius:2}}},lineWidth:1,series:[]}

                        var series = []
                        //alert('start');

                        //define series
                        $(xml).find("entry").each(function() {
                            var seriesOptions = {
                                name: $(this).text(),
                                data: []
                            };
                            options.series.push(seriesOptions);
                        });
                        //alert('finish part 1');

                        //populate with data
                        $(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) {
                                    //alert('index = ' + index + 'time=' + t + 'v=' + v);
                                    options.series[index].data.push([t, v])
                                };
                            });
                        });
                        //alert('finish part 2');

                        options.title.text = "Temperatures of the last 24h"
                        $.each(series, function(index) {
                            options.series.push(series[index]);
                        });
                        //alert('finish part 3');

                        chart = new Highcharts.Chart(options);
                    }
                });
            });
        });

    </script>

            <script type="text/javascript" src="/weather-station/js/exporting.js"></script>

This is the example of some rows of the XML (time and data):

<?xml version="1.0" encoding="ISO-8859-1"?>

<xport>
<meta>
<start>1381828200</start>
<step>300</step>
<end>1381828200</end>
<rows>289</rows>
<columns>3</columns>
<legend>
<entry>External Temperature</entry>
<entry>Internal Temperature</entry>
<entry>Bedroom Temperature</entry>
</legend>
</meta>
<data>
<row><t>1381828200</t><v>2.2399482146e+01</v><v>2.3000000000e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381828500</t><v>2.2598366803e+01</v><v>2.3000000000e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381828800</t><v>2.2898350863e+01</v><v>2.3099450288e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381829100</t><v>2.3197774941e+01</v><v>2.3100000000e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381914600</t><v>NaN</v><v>NaN</v><v>NaN</v></row>
</data>
</xport>    

Please, can someone modify my basic line Highcharts code to create multiple axes code by getting the data from the XML files?

Many thanks!

Answer 1

You need to familiar with parsing XML and series structure for multiple yAxis like here: http://www.highcharts.com/demo/combo-multi-axes Then prepare data during preprocessing.