title: Multiple axes graph highcharts.js server upload/download line graph with bar on x-axis for server up/down
body: <p>I'm stuck making a graph exactly like this. I searched a lot and found high charts can do it. I've to show upload and download speed on y-axis and a bar chart on x-axis that shows green colour when server is up and red when server is down. below it comes the date which is also on x axis. I'm unable to do it. I've made the bar graphs for server up/down time and the upload/download speed.
  I just want a way to merge them to show them in one graph exactly as in
  <a href="https://drive.google.com/open?id=0B9seSsqMTwxTYVJXM3FkbVF1NWc&amp;authuser=0" rel="nofollow">image</a>.
  I've written code for upload download graph<br></p>
  
  <pre><code>$(function () {
  $('#container').highcharts({
  
      chart: {
          type: 'line'
      },
  
       plotOptions: {
          series: {
            marker: {
                  enabled: false
              },
              lineWidth: 2 
  
              },
  
          },
  
          series: [{
  
          color: '#FCBC15'
      },
                   {
  
          color: '#002453'
      }
                  ],
  
      title: {
          text: 'Average User Connection Speed'
      },
  
      data: {
           csv: document.getElementById('csv').innerHTML
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Now below is the code for server up time down time</p>
  
  <pre><code>$(function () {
      $('#container').highcharts({
         chart: {
                  type: 'column'
              },
              title: {
                  text: 'Title',
                  style: { fontSize: '17px', color: 'Black', fontWeight: 'bold', fontfamily: 'Times New Roman' }
              },
              subtitle: {
                  text: ''
              },
              xAxis: {
                  categories: [
                  'May 1',
                  'May 2',
                  'May 3',
                  'May 4'
              ]
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Attributes Scores'
                  }
              },
              tooltip: {
                  headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
                  pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
                  '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f} &lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
                  footerFormat: '&lt;/table&gt;',
                  shared: true,
                  useHTML: true
              },
              plotOptions: {
                  column: {
                      pointPadding: 0,
                      borderWidth: 0,
                      minPointLength: 0
                  }
              },
          series: [{
                  name: ' ',
                  color: "",
                  data: [1, 0, 1, 1]
  
  
                  // data: eval('(' + seriesYTD + ')')
  
  
              }
                  ],
  
    exporting: {
                  enabled: false
              }
          }, function (chart) {
  
  
  
              $.each(chart.series[0].data, function (i, data) {
  
                  if (data.y &lt; 1){
                      data.y=data.y+1;
                      data.update({
                          color: '#FF0000'
                      });
                  }
                  else
                      data.update({
                          color: '#00B14A'
                      });
  
  
  
              });
  
  
  
          });
  </code></pre>
  
  <p>});</p>