I am trying to draw graph from the array of data I created and failed. I tried everything I saw here with the same topic and it didn't help. Please advice. There is HTML in the same page but I don't find it important to show.

<script src = ".11.1/jquery.min.js"></script>
<script src = ".3.6/js/bootstrap.min.js"> </script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript">

function getData(dateRange){
    var date = new Date();
    var currentDateInFormat = date.getFullYear() + "-" + date.getDate() + "-" + date.getMonth() + 1;
    var BASE_URL = '=';
    var yql_query_for_table_data;

    var dataArray = ['Date' , 'Stock Value'];

    if(dateRange === "year"){
        yql_query_for_table_data = 'select * from yahoo.finance.historicaldata where symbol = "YHOO" and startDate = "2009-09-11" and endDate = "2010-03-01"';
    }
    else if(dateRange === "halfYear"){
        yql_query_for_table_data = 'select * from yahoo.finance.historicaldata where symbol = "'+ symbol + '" and startDate = "2015-30-06" and endDate = "'+ currentDateInFormat + '"';
    }

    var yql_query_str_for_table_data = encodeURI(BASE_URL + yql_query_for_table_data);
    var query_str_final_for_table_data = yql_query_str_for_table_data + "&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables%2Falltableswithkeys";

    $.getJSON(query_str_final_for_table_data , function(data){
        var stockArray = data.query.results.quote;
        for (var i=0; i<stockArray.length ; i++){
            var currentObject = stockArray[i];
            var pushArray =  [currentObject.Date , parseFloat(currentObject.Close)];
            dataArray[i+1] = pushArray;     
        }

        google.load('visualization' , '1.0' , {'packages':['corechart']});
        var chartData = google.visualization.arrayToDataTable(dataArray);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        return dataArray;
    });

}

function buttonPressed(buttonTitle){
    console.log(buttonTitle);
    getData(buttonTitle);       

}

</script>

I am trying to draw graph from the array of data I created and failed. I tried everything I saw here with the same topic and it didn't help. Please advice. There is HTML in the same page but I don't find it important to show.

<script src = "http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript" src="https://www.gstatic./charts/loader.js"></script>
<script type="text/javascript">

function getData(dateRange){
    var date = new Date();
    var currentDateInFormat = date.getFullYear() + "-" + date.getDate() + "-" + date.getMonth() + 1;
    var BASE_URL = 'https://query.yahooapis./v1/public/yql?q=';
    var yql_query_for_table_data;

    var dataArray = ['Date' , 'Stock Value'];

    if(dateRange === "year"){
        yql_query_for_table_data = 'select * from yahoo.finance.historicaldata where symbol = "YHOO" and startDate = "2009-09-11" and endDate = "2010-03-01"';
    }
    else if(dateRange === "halfYear"){
        yql_query_for_table_data = 'select * from yahoo.finance.historicaldata where symbol = "'+ symbol + '" and startDate = "2015-30-06" and endDate = "'+ currentDateInFormat + '"';
    }

    var yql_query_str_for_table_data = encodeURI(BASE_URL + yql_query_for_table_data);
    var query_str_final_for_table_data = yql_query_str_for_table_data + "&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables%2Falltableswithkeys";

    $.getJSON(query_str_final_for_table_data , function(data){
        var stockArray = data.query.results.quote;
        for (var i=0; i<stockArray.length ; i++){
            var currentObject = stockArray[i];
            var pushArray =  [currentObject.Date , parseFloat(currentObject.Close)];
            dataArray[i+1] = pushArray;     
        }

        google.load('visualization' , '1.0' , {'packages':['corechart']});
        var chartData = google.visualization.arrayToDataTable(dataArray);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        return dataArray;
    });

}

function buttonPressed(buttonTitle){
    console.log(buttonTitle);
    getData(buttonTitle);       

}

</script>

• javascript
• datatables
• google-visualization

1 Answer 1

You need to wait for google visulization has finished loading its libraries, before you can use those libraries. Instead of

google.load('visualization', '1.0', {'packages':['corechart']});
var chartData = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

use a callback to ensure arrayToDataTable actually is present before using it :

google.load('visualization', '1.0', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
   var chartData = google.visualization.arrayToDataTable(dataArray);
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
})