I am having trouble with loading a Histogram into a div on my html. My code takes some text and makes an array that contains the frequency of each letter in the text.
This would be the array when the default text is entered. I am not sure if it is in correct format for google charts.
var frequency = { A : 25, B : 25, C : 25, D : 50, E : 100, F : 25, G : 25, H : 50, I : 25, J : 25, K : 25, L : 25, M : 25, N : 25, O : 100, P : 25, Q : 25, R : 50, S : 25, T : 50, U : 50, V : 25, W : 25, X : 25, Y : 25, Z : 25};
My code for generating the Chart is within a function. The function call occurs when a button is clicked.
<script language = "JavaScript">
function createImageChart(){
var frequency = createfrequency();
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(frequency);
var data = new google.visualization.DataTable();
var options = {
title: 'The Frequency table',
legend: { position: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
</script>
When it runs I receive a blank page. I have read from online that google.load uses a document.write.
What should change so that the chart appears in a div on the html page?
Should I display the chart by using "document.getElementById("showImage").innerHTML = chart.draw(data, options);" ?