Dual Y-axis column chart gives a dual x-axis

[Erez V.]

Hello,

I want to create a dual Y-axis column chart instead of 2 separate column charts.

Here are images of th 2 column charts

Here is a screenshot of the dual Y-axis

Here is the code for the dual t-axis

 google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawVisualization);
   


 
   
   
 ////////////////////////    Drawing the graph    //////////////////////
      function drawVisualization() {
       
        var data = new google.visualization.DataTable();
 data.addColumn('string', 'Couple');
 data.addColumn('number', 'profit');
 data.addColumn('number','trades');
 
 for(var i = 0; i < datum_b.length; i++){
 datum_b[i].profit=parseFloat(datum_b[i].profit);
 datum_c[i].trades=parseFloat(datum_c[i].trades);
 var obj_b = datum_b[i];
 var obj_c = datum_c[i];
 data.addRow([obj_b.item, obj_b.profit, obj_c.trades]);
 }
 
 
   
    var options = {
      title :'Profit / Loss and trades count of all traded couples',


    series: {
                  0: {axis: 'Balance'},
                  1: {axis: 'Trades'}
               },
               axes: {
                  y: {
                     'Balance': {label: 'Balance'},
                     'Trades': {label: 'Trades'}
                  },
 x: {title: 'Traded Couples ', direction: 1,
        slantedText: true,
        slantedTextAngle: 45},
   colors:['navy', 'pink']
    },
       animation: {
          duration: 1000,
          easing: 'out',
          startup: true},
   bar: { groupWidth: '80%' },
   barVisibilityThreshold :-1,
   seriesType: 'bars'};


    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, options);
  }//END CHART 1
  </script>

The dual Y-axis doesn't give slanted text on the X-axis

I got 2 sepatated x axes with partial data on the axis due to lack of space

I suppose that it has something to do with classic / material charts

Can I have a dual Y-axis chart with 1 x-axis and slanted text on x-axis?

Can I change the color of the text of each Y-axis to fit the color of its columns?

Thanks

[Daniel LaLiberte]

The main problem is that, as you guessed, the google.charts.Bar is one of the material charts that doesn't support all the options that the corechart supports.  So I would recommend switching back to the corecharts, which also support multiple columns, and dual-Y-axis, but also give you more control over the style of axis ticks and the viewWindow min and max, which you will need to set to ensure the vAxis gridlines align, assuming you want to do that too.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2781beae-6196-4899-83eb-f0aef709f125%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   Cambridge MA