updates

goinvo · Jun 28, 2024 · a6eb4b8 · a6eb4b8
1 parent 19c1848
commit a6eb4b8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -9,8 +9,8 @@
     <script type="text/javascript" src="script.js" defer></script>
 </head>
 <body>
-    <h1>Massachusetts Services</h1>
-    <div id="chart_div"></div>
-    <div id="info"></div>
+    <h1>List of all State of MA services</h1>
+    <div id="chart_div" style="width: 900px; height: 500px;"></div>
+    <div id="info" style="margin-top: 20px; font-size: 18px; font-weight: bold;"></div>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,45 +1,45 @@
 google.charts.load('current', {'packages':['treemap']});
 google.charts.setOnLoadCallback(drawChart);
 
-let chart;
-let data;
-let options = {
-    minColor: '#D3EFF4', // Light blue
-    midColor: '#9BC8CF', // Medium blue
-    maxColor: '#007385', // Dark blue
-    headerHeight: 25,
-    fontColor: 'black',
-    showScale: true,
-    useWeightedAverageForAggregation: true
+const itemDescriptions = {
+    'Item1': 'Description for Item 1',
+    'Item2': 'Description for Item 2',
+    'Item3': 'Description for Item 3',
+    // Add more items and descriptions as needed
 };
 
 function drawChart() {
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1nKfr0JKhdzhHCMK1ilWhLRfPzgBd5fbpZTtXtOdglsg/gviz/tq?sheet=Sheet1');
-    query.send(handleQueryResponse);
-}
 
-function handleQueryResponse(response) {
-    if (response.isError()) {
-        console.error('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
-        return;
-    }
+    query.send(function(response) {
+        if (response.isError()) {
+            console.error('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
+            return;
+        }
 
-    data = response.getDataTable();
-    chart = new google.visualization.TreeMap(document.getElementById('chart_div'));
+        var data = response.getDataTable();
+        var chart = new google.visualization.TreeMap(document.getElementById('chart_div'));
 
-    google.visualization.events.addListener(chart, 'select', function() {
-        var selection = chart.getSelection();
-        if (selection.length > 0) {
-            var item = data.getValue(selection[0].row, 0);
-            document.getElementById('info').innerText = 'You selected: ' + item;
-            chart.setSelection([]); // Clear the selection to prevent zooming
-        }
-    });
+        google.visualization.events.addListener(chart, 'select', function() {
+            var selection = chart.getSelection();
+            if (selection.length > 0) {
+                var item = data.getValue(selection[0].row, 0);
+                var description = itemDescriptions[item] || 'No description available for ' + item;
+                document.getElementById('info').innerText = description;
+                chart.setSelection([]); // Clear the selection to prevent zooming
+            }
+        });
 
-    chart.draw(data, options);
+        var options = {
+            minColor: '#D3EFF4', // Light blue
+            midColor: '#9BC8CF', // Medium blue
+            maxColor: '#007385', // Dark blue
+            headerHeight: 25,
+            fontColor: 'black',
+            showScale: true,
+            useWeightedAverageForAggregation: true
+        };
 
-    // Redraw chart on window resize
-    window.addEventListener('resize', function() {
         chart.draw(data, options);
     });
 }
diff --git a/style.css b/style.css
@@ -2,35 +2,15 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-h1 {
     text-align: center;
 }
 
 #chart_div {
-    width: 100%;
-    max-width: 900px;
-    height: 0;
-    padding-bottom: 56.25%; /* 16:9 aspect ratio */
-    position: relative;
-}
-
-#chart_div > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    margin: 0 auto;
 }
 
 #info {
     margin-top: 20px;
     font-size: 18px;
-    color: #333;
-    text-align: center;
     font-weight: bold;
 }