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.
On Sat, Apr 20, 2019 at 4:41 PM Erez V. <[email protected]> wrote: > 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 > > [image: counter.png] > > [image: balance.png] > > Here is a screenshot of the dual Y-axis > > [image: dual_y.png] > > > 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 > > > > -- > 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 [email protected]. > To post to this group, send email to > [email protected]. > 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 > <https://groups.google.com/d/msgid/google-visualization-api/2781beae-6196-4899-83eb-f0aef709f125%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> Cambridge MA -- 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 [email protected]. To post to this group, send email to [email protected]. 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/CAOtcSJOqbLV%2B%3DH0xYCt1Zs8ffXgoh4DOfkiLdj%3D8mLmj1SWnJQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
