Skip to content Skip to sidebar Skip to footer

Google Chart Multiple Series With Same Scale

I'm looking for a way to have multiple series on my graphics, with the same scales but displayed only once. as you can see here : http://jsfiddle.net/Youkoal/d3xwnqdu/ I have 4 s

Solution 1:

the first letter in textStyle should be lowercase...

    textStyle: {
      color: 'none'
    }

this will hide the text, but the chart will still allocate room for the labels, to minimize, reduce the fontSize...

    textStyle: {
      color: 'none',
      fontSize: 1
    }

ideally we could use textPosition: 'none', but this option is not supported for material charts. Tracking Issue for Material Chart Feature Parity

see following working snippet...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Semaines', 'Test Region', 'Test2 Region', 'Test SerieNE', 'Test2 SerieNE', 'Test SerieS', 'Test2 SerieS', 'Test SerieO', 'Test2 SerieO'],
    ['Semaine 1', 0, 0, 0, 0, 0, 0, 0, 0],
    ['Semaine 2', 0, 0, 0, 0, 0, 0, 0, 0],
    ['Semaine 3', 0, 0, 0, 0, 0, 0, 0, 0],
    ['Semaine 4', 24, 0, 21, 0, 0, 0, 3, 0],
    ['Semaine 5', 122, 0, 21, 0, 52, 0, 49, 0],
    ['Semaine 6', 361, 0, 23, 0, 325, 0, 13, 0],
    ['Semaine 7', 51, 0, 21, 0, 11, 0, 19, 0],
    ['Semaine 8', 81, 3, 3, 0, 64, 3, 14, 0],
    ['Semaine 9', 711, 22, 81, 3, 527, 9, 103, 10],
    ['Semaine 10', 139, 13, 26, 5, 104, 5, 9, 3],
    ['Semaine 11', 255, 12, 139, 2, 33, 4, 83, 6],
    ['Semaine 12', 256, 10, 23, 4, 15, 5, 218, 1],
    ['Semaine 13', 145, 26, 84, 7, 58, 16, 3, 3],
    ['Semaine 14', 112, 15, 51, 0, 34, 11, 27, 4],
    ['Semaine 15', 122, 27, 29, 8, 53, 14, 40, 5],
    ['Semaine 16', 98, 18, 17, 6, 31, 7, 50, 5],
    ['Semaine 17', 87, 21, 12, 6, 37, 3, 38, 12],
  ]);

  var options = {
    chart: {
      title: 'Suivis hebdo',
      subtitle: 'Pilotage',
    },
    bars: 'vertical',
    isStacked: true,
    height: 600,
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
      4: {
        targetAxisIndex: 2
      },
      5: {
        targetAxisIndex: 2
      },
      6: {
        targetAxisIndex: 3
      },
      7: {
        targetAxisIndex: 3
      }
    },
    vAxis: {
      format: 'decimal',
      viewWindow: {
        min: 0,
        max: 1000
      }
    },
    vAxes: {
      1: {
        textStyle: {
          color: 'none',
          fontSize: 1
        }
      },
      2: {
        textStyle: {
          color: 'none',
          fontSize: 1
        }
      },
      3: {
        textStyle: {
          color: 'none',
          fontSize: 1
        }
      }
    },
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

notes:

1) need to use the correct library, jsapi should no longer be used, instead use loader.js this will only change the load statement, see above snippet...

2) you can use option vAxis to set the scale for all vAxes

3) it isn't necessary to move the first series to another targetAxisIndex

Post a Comment for "Google Chart Multiple Series With Same Scale"