Css issue in the Graphs

52 views
Skip to first unread message

savith

unread,
Apr 9, 2012, 10:59:45 AM4/9/12
to google-visua...@googlegroups.com
Hi ,

I am using google coloumn and bar chart in my site.

In IE8 and IE 7 the text in the H-axis is getting cut in the bottom,which is coming fine in Mozilla . Also is there anyway i can mention font-style for the text on h-axis?

Is there any thing i can do to fix this issue.

Text sytle is appearing differently in both the browsers

Please help with this issue.

code used for Line chart:
   
  new google.visualization.LineChart(document.getElementById('line-chart')).
      draw(data,{
                  width: 300,
                                    height: 180,
                                    legend: 'none',
                                    series:[{color:'#B4C90C'}],
                                    lineWidth:1,
                                    pointSize:5,
                                    vAxis:{gridlineColor:'#cccccc', baselineColor:'#cccccc',
                                                    textStyle:{color:'#cccccc',fontName:'Georgia',fontSize:10},
                                                    viewWindow:{min:0}
                                                },
                                    hAxis:{textStyle:{color:'#cccccc',fontName:'Georgia',fontSize:10}},
                                    chartArea:{top:5,width:"80%",height:"75%"}
                                }   
          );

Code used for Coloumn chart:

 new google.visualization.ColumnChart(document.getElementById('bar_chart')).
      draw(data,
           {
            width:280,
                        height:180,
                        legend:'none',
                        chartArea:{left:50,top:5,width:"80%",height:"75%"},
                        vAxis:{title: "", textStyle:{color: '#cccccc', fontSize:10}},
            hAxis: {title: "", textStyle:{color: '#cccccc', fontName:'Georgia', fontSize: 10}},
                        vAxes:[
                                        {
                                            title:'KW', textStyle:{color: '#cccccc',fontName:'Georgia'},
                                            titleTextStyle:{fontName:'Georgia',color: '#cccccc',fontSize:10}
                                        }
                                    ],
                         series:[{color:'#B4C90C'}]
                        }
                    );


Thanks in advance.

Screenshot.png

asgallant

unread,
Apr 9, 2012, 1:55:31 PM4/9/12
to google-visua...@googlegroups.com
I'm not sure there is anything that can be done about this at all.  IE < 9 uses VML for the charts, which is rather broken and buggy, particularly where text is concerned.  

savith

unread,
Apr 10, 2012, 8:09:03 AM4/10/12
to google-visua...@googlegroups.com
can any one please help me with this?
Reply all
Reply to author
Forward
0 new messages