Question

In: Computer Science

Language Javascript and HTML Google Treemap Chart is not displaying information and I don't know why....

Language Javascript and HTML

Google Treemap Chart is not displaying information and I don't know why.

Index.html

<html>

<head>

google.charts.load('current', {'packages':['treemap']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['State', 'Region', 'Housing', 'Utilities'],

['Global', null, 0, 0],

['AK', 'Southeast', 150, 167],

['AL', 'Southeast', 79, 99],

['AR', 'Southeast', 83, 92],

['AZ', 'Southwest', 110, 95],

['CA', 'West', 184, 107],

['CO)', 'West', 103, 94],

['CT', 'Northeast', 161, 122],

['DC', 'Northeast', 248, 103],

['DE', 'Northeast', 101, 122],

['FL', 'Southeast', 92, 99],

['GA', 'Southeast', 80, 98],

['HI', 'West', 236, 167],

['IA', 'Midwest', 92, 90],

['ID', 'West', 79, 93],

['IL', 'Midwest', 89, 102],

['IN', 'Midwest', 82, 87],

['KS', 'Midwest', 85, 87],

['KY', 'Southeast', 78, 95],

['LA', 'Southeast', 91, 84],

['MA', 'Northeast', 130, 120],

['MD', 'Northeast', 175, 109],

['ME', 'Northeast', 133, 109],

['MI', 'Midwest', 86, 103],

['MN', 'Midwest', 96, 101],

['MO', 'Midwest', 80, 103],

['MS', 'Southeast', 83, 108],

['MT', 'West', 97, 88],

['NC', 'Southeast', 83, 98],

['ND', 'Midwest', 100, 82]

['NE', 'Midwest', 82, 99]

['NH', 'Northeast', 128, 125]

['NJ', 'Northeast', 166, 135]

['NM', 'Southwest', 97, 92]

['NV', 'West', 87, 84]

['NY', 'Northeast', 188, 117]

['OH', 'Midwest', 83, 97]

['OK', 'Southwest', 80, 93]

['OR', 'West', 117, 99]

['PA', 'Northeast', 98, 109]

['RI', 'Northeast', 132, 124]

['SC', 'Southeast', 83, 107]

['SD', 'Midwest', 98, 94]

['TN', 'Southeast', 78, 89]

['TX', 'Southwest', 83, 96]

['UT', 'West', 82, 85]

['VA', 'Southeast', 93, 97]

['VT', 'Northeast', 138, 128]

['WA', 'West', 102, 85]

['WI', 'Midwest', 91, 104]

['WV', 'Southeast', 86, 100]

['WY', 'West', 117, 95]

]);

tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

tree.draw(data, {

minColor: '#f00',

midColor: '#ddd',

maxColor: '#0d0',

headerHeight: 15,

fontColor: 'black',

showScale: true

});

}

</script>

</head>

<body>

</body>

</html>

Expert Solution

commas are missingin few lines:

edited code:

<html>

<head>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

google.charts.load('current', {'packages':['treemap']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['State', 'Region', 'Housing', 'Utilities'],

['Global', null, 0, 0],

['AK', 'Southeast', 150, 167],

['AL', 'Southeast', 79, 99],

['AR', 'Southeast', 83, 92],

['AZ', 'Southwest', 110, 95],

['CA', 'West', 184, 107],

['CO)', 'West', 103, 94],

['CT', 'Northeast', 161, 122],

['DC', 'Northeast', 248, 103],

['DE', 'Northeast', 101, 122],

['FL', 'Southeast', 92, 99],

['GA', 'Southeast', 80, 98],

['HI', 'West', 236, 167],

['IA', 'Midwest', 92, 90],

['ID', 'West', 79, 93],

['IL', 'Midwest', 89, 102],

['IN', 'Midwest', 82, 87],

['KS', 'Midwest', 85, 87],

['KY', 'Southeast', 78, 95],

['LA', 'Southeast', 91, 84],

['MA', 'Northeast', 130, 120],

['MD', 'Northeast', 175, 109],

['ME', 'Northeast', 133, 109],

['MI', 'Midwest', 86, 103],

['MN', 'Midwest', 96, 101],

['MO', 'Midwest', 80, 103],

['MS', 'Southeast', 83, 108],

['MT', 'West', 97, 88],

['NC', 'Southeast', 83, 98],

['ND', 'Midwest', 100, 82],

['NE', 'Midwest', 82, 99],

['NH', 'Northeast', 128 ,99],

['NJ', 'Northeast', 166, 135],

['NM', 'Southwest', 97, 92],

['NV', 'West', 87, 84],

['NY', 'Northeast', 188, 117],

['OH', 'Midwest', 83, 97],

['OK', 'Southwest', 80, 93],

['OR', 'West', 117, 99],

['PA', 'Northeast', 98, 109],

['RI', 'Northeast', 132, 124],

['SC', 'Southeast', 83, 107],

['SD', 'Midwest', 98, 94],

['TN', 'Southeast', 78, 89],

['TX', 'Southwest', 83, 96],

['UT', 'West', 82, 85],

['VA', 'Southeast', 93, 97],

['VT', 'Northeast', 138, 128],

['WA', 'West', 102, 85],

['WI', 'Midwest', 91, 104],

['WV', 'Southeast', 86, 100],

['WY', 'West', 117, 95],

]);

tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

tree.draw(data, {

minColor: '#f00',

midColor: '#ddd',

maxColor: '#0d0',

headerHeight: 15,

fontColor: 'black',

showScale: true

});

}

</script>

</head>

<body>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

</body>

venereology answered 13 hours ago

//Trying to get this code with JavaScript. I could partition the subarrays, but I don't know...

//Trying to get this code with JavaScript. I could partition the subarrays, but I don't know how to check for unique elements Given an array of integers check if it is possible to partition the array into some number of subsequences of length k each, such that: Each element in the array occurs in exactly one subsequence For each subsequence, all numbers are distinct. Elements in the array having the same value must be in different subsequences If it is...

It's NOT letting me upload a photo. I don't know why. Maybe you can google a...

It's NOT letting me upload a photo. I don't know why. Maybe you can google a photo? I'm sorry. Didn't think this would be such a hassle. Required Prepare a vertical analysis of both the balance sheets and income statements for 2019 and 2018.  Analysis Bal Sheet Analysis Inc Stmt  Complete this question by entering your answers in the tabs below. Prepare a vertical analysis of the balance sheets for 2019 and 2018. (Percentages may not add exactly...

Use JavaScript/HTML to create a Tic Tac Toe game displaying X's O's. Score the result. Each...

Use JavaScript/HTML to create a Tic Tac Toe game displaying X's O's. Score the result. Each player takes a turn putting their mark until done or tied.

1. True/False HTML is the standard text formatting language used for creating and displaying pages on...

1. True/False HTML is the standard text formatting language used for creating and displaying pages on the web. 2. True False The DOCTYPE is a special tag and must be the first one in an HTML document 3. True/False Inline elements take up the full width of their parent elements. 4. True/False The CSS box model is comprised of margin, padding, and border. 5. True/False The property margin-top has no effect on an inline element.

PHP Language I have XAMPP and I don't know how to display my PHP code. For...

PHP Language I have XAMPP and I don't know how to display my PHP code. For instance, when I create a basic HTML webpage I just open the code into a web browser and it shows me a basic web page. When I try to show a PHP calculation it doesn't show. What are the steps in displaying my PHP doc?

IMPORTANT: I know the answer is "C". However, I don't know why. Could you please explain...

IMPORTANT: I know the answer is "C". However, I don't know why. Could you please explain why? Thank you A linear total cost curve that passes through the origin implies that a. average cost is constant and marginal cost is variable. b. average cost is variable and marginal cost is constant. c. average and marginal costs are constant and equal. d. you need more information to answer question.

I don't understand how the bonds chart work.

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game. 1. Blackjack Games Rules: a. The object of the game is to "beat the dealer", which can be done in a number of ways: • Get 21 points on your first two cards (called a blackjack), without a dealer blackjack; • Reach a final score higher than the dealer without...

JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I...

JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I edit the JavaScript below so that when the calculate button is clicked the total price only shows two decimal places by using the toFixed() method? ----------------------------------------------------------------------------------------------------------- JavaScript: // Variables var tax = "tax"; // Tax percentage var taxRate = document.getElementById('tax'); // Selecting tax element // On the time of loading the DOM we are setting the tax rate window.addEventListener('DOMContentLoaded', (event) => { taxRate.value =...

This is in HTML and JavaScript So I have 2 radio buttons One called students and...

This is in HTML and JavaScript So I have 2 radio buttons One called students and one called teacher. If the user selects the student then a list of check boxes these should appear. These should not be visable if the user selects the teacher radio button. - buy text books - visit teachers website - attend class If the user selects the teacher radio button then all the text boxes above should be hidden From the user. Then these...