Graph in Highcfarts with 2 Axes

Question

Graph in Highcfarts with 2 Axes

Navigation

#1 by (1 votes)

1

I want to be able to graph two or more categories (series) in a single graph with very different magnitudes, for this I know that 2 Y axes are required, for example that in the left part there is a scale of up to 100 and in the right part a scale of 20, I have seen the documentation of highcharts and I can not capture what I want.

The code I have is the following:

jQuery(function ($) {
  var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'spline'
   },

    title: {
      text: 'Informe Mensual'
    },
    subtitle: {
        text: 'Ventas Vs No. Productos'
    },

    yAxis: {
      title: {
         text: 'Valores en Millones'
      }
    },

    xAxis: {
      categories: ['DIA 1','DIA 2','DIA 3','DIA 4','DIA 5','DIA 6','DIA 
7','DIA 8','DIA 9','DIA 10','DIA 11','DIA 12','DIA 13','DIA 14','DIA 
15','DIA 16','DIA 17','DIA 18','DIA 19','DIA 20','DIA 21','DIA 22','DIA 
23','DIA 24','DIA 25','DIA 26','DIA 27','DIA 28', 'DIA 29', 'DIA 30', 'DIA 
31']
},

    series: [{
      name : "Ventas",
      data: []

    },{
      name : "No. Productos",
      data: []
    }]
  });

    $( "#MES" ).change(function() {
    //validamos las fechass
    var ANO = $('#ANO').val();
    var MES = $('#MES').val();
    var CIUDAD = $('#CIUDAD').val();

    $.ajax({
      url: "procesar.php",
      method: "POST",
      data: { ANO: ANO, MES: MES, CIUDAD: CIUDAD },
      dataType: "json"
    })

    .done(function(data) {

      console.log(CIUDAD);
      console.log(ANO);
      console.log(MES);
      console.log(data);

      chart.series[0].setData(data[0]); 
      chart.series[1].setData(data[1]);  
    });
  });
});

jquery highcharts

asked by Anderviver 24.10.2017 в 15:17

source

1 answer

Get the file of an input type file what is the difference between a getElementsByTagNameNs () and a getElementsByTagName ()

score 1 · Accepted Answer

You only need to add a different axis ID for each such as property yAxis in series and automatically choose an appropriate and independent scale (different from each other if necessary) for each axis:

var chart = new Highcharts.Chart({
  chart: {
     renderTo: 'container',
     type: 'spline'
 },

 title: {
   text: 'Informe Mensual'
 },
 subtitle: {
     text: 'Ventas Vs No. Productos'
 },

 yAxis: {
   title: {
      text: 'Valores en Millones'
   }
 },

 xAxis: {
    categories: ['DIA 1','DIA 2','DIA 3','DIA 4','DIA 5','DIA 6',
      'DIA 7','DIA 8','DIA 9','DIA 10','DIA 11','DIA 12','DIA 13','DIA 14',
      'DIA 15','DIA 16','DIA 17','DIA 18','DIA 19','DIA 20','DIA 21','DIA 22',
      'DIA 23','DIA 24','DIA 25','DIA 26','DIA 27','DIA 28', 'DIA 29', 'DIA 30', 'DIA 31']
 },

 series: [{
    name : "Ventas",
    data: [],
    yAxis: 0,
 },{
    name : "No. Productos",
    data: [],
    yAxis: 1,
  }]
});