No axis units on IE7 and IE8

[Stephane]

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]

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]

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]

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]

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 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*/
            }
        });

    });
}

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]

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.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/gg2LV85mv0QJ.

[Alexander Bautz]

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]

@Alexander No sh*t it worked... Amazing how I tried to figure out for
hours while it was that simple.

Thanks a lot.

Stephane