No axis units on IE7 and IE8

214 views
Skip to first unread message

Stephane

unread,
Oct 4, 2011, 11:59:24 AM10/4/11
to Google Visualization API
Hi,

Can someone explain me why I can't see hAxis and vAxis units (date in
string and a number of visits) in IE7 and IE8? I didn't try with IE9
but it works well on Firefox and Chrome.

Here's my code:

google.load("visualization", "1", { packages: ["corechart"] });
function drawChart(tbl) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Visiteurs');
data.addRows(tbl.length);

for (var i = 0; i < tbl.length; i++) {
data.setValue(i, 0, tbl[i].date);
data.setValue(i, 1, tbl[i].nbVisits);
}

var chart = new
google.visualization.LineChart(document.getElementById('chartDiv'));
chart.draw(data, { left: 50, top: 0,
width: 570, height: 330, chartArea:{left:80,top:
20,width:500,height:250}, legend: 'none', hAxis: { showTextEvery: 4/*,
slantedText: true*/ }
});
}

I can't show you the page because it's on an intranet. The data is
loaded from Ajax though. I request a data table and then pass the
result to the function drawChart(tbl) to refresh the graph.

Thanks for any idea.

Stephane

Jinji

unread,
Oct 4, 2011, 12:21:42 PM10/4/11
to google-visua...@googlegroups.com
There's no google.setOnLoadCallback call here. If this isn't the issue, please create a simple example (with dummy data) and send to us so we could inspect it (possibly using jsfiddle). 


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.


Stephane

unread,
Oct 4, 2011, 2:03:48 PM10/4/11
to Google Visualization API
Hi,

I set up a demo here:

http://mddep.percute.com/
user google
pass g00gle

I don't need google.setOnLoadCallback because we use jquery and ajax
to fill the table et create the graph.

Thanks for your help.

Stephane

Jinji

unread,
Oct 5, 2011, 2:44:20 PM10/5/11
to google-visua...@googlegroups.com
I'm afraid using google.setOnLoadCallback is not optional. Loading the visualization API is an asynchronous thing, and you can use it only after you know is was loaded. How can you know it's loaded without using setOnLoadCallback?

asgallant

unread,
Oct 5, 2011, 3:11:17 PM10/5/11
to google-visua...@googlegroups.com
You could try replacing $(document).ready(function () {...}); with google.setOnLoadCallback(function () {...}); which would provide similar but not quite the same functionality.  Given the complexity of your set up, there could be issues with doing that.

Alternatively, you could wrap the drawing function inside another, which first loads the API and then issues the callback to draw when the API is loaded:

function initCharts (tbl{

    google.load("visualization""1"packages["corechart"});
    google.setOnLoadCallback(function ({

        var data new google.visualization.DataTable();
        data.addColumn('string''Date');
        data.addColumn('number''Visiteurs');
        data.addRows(tbl.length);
        
        for (var 0tbl.lengthi++{
        data.setValue(i0tbl[i].date);
        data.setValue(i1tbl[i].nbVisits);
        }
        
        var chart new google.visualization.LineChart(document.getElementById('chartDiv'));
        chart.draw(data{
            left50,
            top0,
            width570,
            height330,
            chartArea{
                left:80,
                top:20,
                width:500,
                height:250
            },
            legend'none',
            hAxis{
                showTextEvery4
                /*, slantedText: true*/
            }
        });
    });
}


Then change all the drawChart(tbl) calls to initChart(tbl).  The loader is smart enough to know when the API has already been loaded, so when you call it a second time, it skips the loading and initiates the callback function again, so there should be little to no performance impact on your site.

Roni Biran

unread,
Oct 6, 2011, 4:25:06 AM10/6/11
to google-visua...@googlegroups.com
I think that the order of your page generation is wrong.
Try to move your function and its reference to the head section, also see if you can create a table function which is already generated, thus you'll be able to assign the LineChart the data.
Something in the form of:

var data = new google.visualization.DataTable(
     {
       cols: [{id: 'data', label: 'Date', type: 'string'},
              {id: 'nbVisits', label: 'Visiteurs', type: 'number'}],
       rows: [{c:[{v: 'Apr-04'}, {v: 4245}]},
              {c:[{v: 'May-02'}, {v: 20327}]},
              {c:[{v: 'May-30'}, {v: 18599}]},
              {c:[{v: 'Hune-27'}, {v: 17196}]},
              {c:[{v: 'Jul-25'}, {v: 19483}]}
             ]
     },
   0.6
)

See if this will help. I know that I'm using this method and it works.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

Alexander Bautz

unread,
Oct 8, 2011, 3:05:58 PM10/8/11
to Google Visualization API
Hi,
I noticed the same issue today.

I tried to load a chart into a div that was wrapped in another HIDDEN
div. After the chart was loaded, I set the wrapping div to visible
using jQuery.
I then lost the vAxis ruler.

If i set the wrapping div to visible before drawing the chart, all was
OK.

Hope this helps.

Alexander

Stephane

unread,
Oct 12, 2011, 3:29:00 PM10/12/11
to Google Visualization API
@Alexander No sh*t it worked... Amazing how I tried to figure out for
hours while it was that simple.

Thanks a lot.

Stephane
Reply all
Reply to author
Forward
0 new messages