CODEWITHSUNDEEP
javascriptgoogle-visualization
Jonathan Fishbein
Jonathan Fishbein

Reputation: 526

pass data into an appended google charts script

how do I pass my array into the google method arrayToDataTable()? I know the code here does not work. I don't know how to pass data into an appended script. Does anyone have any ideas? This is part of a userscript and the website I am making it for does not use JQuery so I am not able to use it and I also don't know JQuery yet as I am a beginner at Javascript. 

    function insertgraph(array) {
    //div element
var chart = document.createElement("div")
chart.id = "chart_div"
chart.style = "width: 900px; height: 500px";
document.body.appendChild(chart)

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.google.com/jsapi?callback=loadchart"
document.head.appendChild(script)
alert("this is the array" + array)
var scriptload = document.createElement("script")
scriptload.type = "text/javascript";
scriptload.textContent =  " function loadchart()    

    {google.load(\"visualization\", \"1\", {packages:[\"corechart\"],\"callback\" : drawChart})};alert(\"alert\");google.setOnLoadCallback(drawChart);function drawChart(array) {var data = google.visualization.arrayToDataTable(array);var options = {title: 'Company Performance'};var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}"
    document.head.appendChild(scriptload)

}

It works well if you manually enter in the data

Upvotes: 0

Views: 2263

Answers (1)

asgallant
asgallant

Reputation: 26340

Let's break this problem down into a few smaller peices. First, you have th script that you want to append (cleaned up a bit to make it easier to read and to remove extraneous code):

function loadchart() {
    google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
}
function drawChart(array) {
    var data = google.visualization.arrayToDataTable(array);
    var options = {title: 'Company Performance'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

You have an array of data somewhere called array (which is not a good name for a variable, btw), and you want to pass it to your chart drawing function. The problem here is that the callback from the google.load call cannot pass your data to the drawChart function by itself. All scripts appended to a page have their contents dumped into the global scope, so you can't pass a local variable to the drawChart function. Ideally, you would be able to do something like this:

scriptload.textContent = "...";
google.setOnLoadCallback(function () {
    drawChart(myData);
});
document.head.appendChild(scriptload);

but due to a quirk in the way google.load works when called after the document "load" event fires, 'google.setOnLoadCallback' doesn't work - the only way to set a callback is in-line with the google.load call. This leaves two workable solutions (given the constraints of your original question). The first is to declare your data variable in global scope, and reference it inside your drawChart function:

// "myData" is a global variable
function loadchart() {
    google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
}
function drawChart() {
    var data = google.visualization.arrayToDataTable(myData);
    var options = {title: 'Company Performance'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

The second is to pass the callback function dynamically to the loadChart function when that is called:

function loadchart(myCallback) {
    google.load('visualization', '1', {packages:['corechart'], callback: myCallback});
}
function drawChart(myData) {
    var data = google.visualization.arrayToDataTable(myData);
    var options = {title: 'Company Performance'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

The callback would have to call drawChart with the appropriate data as a parameter:

loadChart(function () {
    drawChart(myData);
});

Upvotes: 3

Related Questions