Hi Daniel,
Thanks for responding.... but height and width of divs in which the charts
get displayed , are also same ......
On Tuesday, 4 April 2017 11:23:17 UTC-5, Daniel LaLiberte wrote:
>
> In addition to the chartArea, the top-level height and width options make
> a difference for how the charts will align.
>
> On Tue, Apr 4, 2017 at 11:03 AM, Arghya chakroborty <arghya...@gmail.com
> <javascript:>> wrote:
>
>> Hi,
>>
>> I am trying to put a line chart and a column chart atop each other. Their
>> x-axis is same and they are related as well.
>>
>> Problem is, they are not "exactly" aligned with each other. While the
>> line chart doesn't have any leading and trailing lines outside chart area ,
>> the Column chart has those little ones. That's the reason , even though
>> their chart area is exactly the same , they don't align.
>>
>> Here is the code for Column Chart :
>> ---------------------------------------------------
>> var options = {
>> title: '# SPRs Resolved Each Week',
>> *chartArea:{*
>> * top:'10%',*
>> * left:40,*
>> * width:'100%',*
>> * height:'80%'*
>> * }*,
>> colors:['#696969'
>> ,'#00B0F0'
>> ,'#FF8585'],
>> explorer: {
>> actions: ['dragToZoom', 'rightClickToReset']
>> },
>> legend : {position: 'in', textStyle: {color: 'black',
>> fontSize: 12}},
>> hAxis: {
>> ticks: ticksArray,
>> slantedText: true
>> },
>> isStacked: true
>> };
>>
>> var chart = new
>> google.visualization.ColumnChart(document.getElementById("div1"));
>> chart.draw(data, options);
>>
>>
>> And the code for Line Chart :
>> --------------------------------------------
>>
>> var options = {
>> title: 'Open SPR Trends',
>> titleTextStyle: {
>> bold: true,
>> color: 'black',
>> fontSize: 13
>> },
>> explorer: {
>> actions: ['dragToZoom', 'rightClickToReset']
>> },
>> *chartArea:{top:'10%',left:40,width:'100%',height:'80%'},*
>> hAxis: {
>> ticks: ticksArray,
>> slantedText: true
>> },
>> legend: {
>> position: 'in',
>> textStyle: {
>> fontSize: 12
>> }
>> },
>> series: [
>> {color: '#00B0F0'},
>> {color: '#FF8585'},
>> {color: '#92D050'},
>> {color: '#FF8585', lineWidth : 4},
>> {color: '#92D050', lineWidth : 4}
>> ]
>> };
>>
>> var chart = new
>> google.visualization.LineChart(document.getElementById('div2'));
>> chart.draw(data, options);
>>
>> PFA the charts as in my web page.
>>
>> Any suggestions / help is much appreciated !!!
>>
>> Regards,
>> Arghya
>>
>> --
>> 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-visualization-api+unsubscr...@googlegroups.com
>> <javascript:>.
>> To post to this group, send email to google-visua...@googlegroups.com
>> <javascript:>.
>> 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/57b5c46d-4658-44cb-aa50-3f08baa1cf68%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/google-visualization-api/57b5c46d-4658-44cb-aa50-3f08baa1cf68%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>
> dlali...@google.com <javascript:> 5CC, 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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@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/bce54327-3f2e-455d-99cc-cfef327b1e87%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
