Highcharts, displaying two sets of data on the same line chart

Question

I am working on a script that uses HighCharts. I have written the script to produce and output the result in JSON format, see below.

[{"name":"Month","data":["Jan","Feb","Mar","Apr","May"]},{"name":"Rooms","data":[140,77,76,1,1]},{"name":"Target","data":["155"]}]

The JSON has three (3) parts, the month, the total for the month and the target. What I am trying to do is display the data for each month as a line chart. This I have working, but I would like to display the target data as a line on the same chart.

How can I get the data for the target to display.

I have also written the script that calls the JSON data, see below.

$(function () {

var categories=[];
var data2 =[];
var targetValue = null;


var chart;
$(document).ready(function() {
    $.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) { 
    $.each(json,function(i,el) { 
      if (el.name == "Month") {
        categories = el.data; 
      } else if (el.name == "Target") {
        targetValue = el.data[0];
      } else {
        data2.push(el); 
      }
    });


    $('#container1').highcharts({
        chart: {
           renderTo: 'container',
           type: 'line',
           marginTop: 40,
       marginRight: 30,   
           marginBottom: 50,
       plotBackgroundColor: '#FCFFC5'
        },

title: {
        text: 'Monthly audits <?php echo $year;?>',
        x: -20, //center
    style: {
            fontFamily: 'Tahoma',
    color: '#000000',
            fontWeight: 'bold',
    fontSize: '10px'
        }
     },

     subtitle: {
         text: '',
         x: -20
     },

     xAxis: {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
     },

     yAxis: {

                showFirstLabel: false,
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickWidth:1,
                tickLength:2,
                tickInterval: 10,
                gridLineColor:'#ddd',
                title: {
                    text: '',
                    style: {
                fontFamily: 'Tahoma',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '10px'
                }
                },
                plotLines: [{
                    color: '#FF0000',
                    value: targetValue,
                    label: {
                        text: 'Target',
                        style: {
                            color: '#FF0000'
                        }
                    }
                }]
                },
    legend: {
    enabled: false,
        itemStyle: {
        font: '11px Trebuchet MS, Verdana, sans-serif',
        color: '#000000'
    },
          itemHoverStyle: {
             color: '#000000'
          },
          itemHiddenStyle: {
             color: '#444'
          }

    },

plotOptions: {
    column: {
            color:'#ff00ff'
    },

series: {
          dataLabels: {
          enabled: true,
          color: '#000000',
          align: 'center',
          y: 0, 
          style: {
             fontSize: '10px',
             fontFamily: 'Verdana, sans-serif'
          }
        }
      }
},

credits: {
        enabled: false
},

    series: data2
        });
    });

});

});

Many thanks for your time.

Answer 1

I suggest that you should use the 'plotLine'-Feature to display the target value. This adds a line to any of your axes and it seems that your requirement is the best example for the use of a plot line. First you have to update your code to process the JSON returned from your web service:

$(function () {

  var categories=[];
  var data2 =[];
  var targetValue = null;

  var chart;
  $(document).ready(function() {
      $.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) { 
        $.each(json,function(i,el) { 
          if (el.name == "Month") {
            categories = el.data; 
          } else if (el.name == "Target") {
            targetValue = el.data[0];
          } else {
            data2.push(el); 
          }
  });

  [...]

now we have the target value in the variable targetValue. This will now be inserted in the highcharts configuration to create a new plotLine for the yAxis:

yAxis: {
  plotLines: [{
    color: '#FF0000',
    value: targetValue,
    label: {
      text: 'Target',
      style: {
        color: '#FF0000'
      }
    }
  }],
  minRange: targetValue,  // to ensure the plotLine is always visible
  [...]
},

This will add a red line at the specified targetValue that has a red label 'Target' attached to its left like in this example:

https://jsfiddle.net/doc_snyder/2spmxtwa/1/