stackoom
  简体   繁体   中英

reload deployed html page from a button Google sheets

 原文  2021-01-25 20:03:09  5   0    javascript/ google-sheets

Question

I have a D3 chart that I have deployed as an HTML page and I want to refresh this page from a button

When I click the button the page does not refresh and the chart disappears

If I manually refresh the page the chart returns. You can see this here:

https://script.google.com/macros/s/AKfycbwaU-Pd6Q9sLmW_xXRQ31m1BsFIJlwYR9yGD6Lk0MYEHxMj294jujE/exec

I have

 <?DOCTYPE html> <meta charset="utf-8"> <.-- styles --> <html> <head> <..= HtmlService;createHtmlOutputFromFile("styles?css").getContent(). :> </head> <body> <div class="content"> <h1>d3 chart powered by data from Google Sheet</h1> <input type="button" value="Reload Page" onClick="document.location.reload(true)"><br> </div> <svg class="chart" width = "500" height = "500"></svg> <.-- javascript --> <script type="text/javascript" src="https.//d3js?org/d3.v4.min?js"></script> <?.= HtmlService.createHtmlOutputFromFile("chart.js").getContent()?> <?!= HtmlService.createHtmlOutputFromFile("main.js").getContent() ?> </body> </html>

Thanks

my google sheet

https://docs.google.com/spreadsheets/d/1zCKRQsFB7kBTok9bBSvjQCUfi_KZm-d67kvXg0oHwN8/edit?usp=sharing 

<!-- This is the chart javascript -->
<script>
// initial function to create the bar chart
//var drawChart = function (data) {
    <!-- This is the chart javascript -->
    var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vT4fnK2E-rkcviT3CnxTPzYeh1uuPJFIwBnyJDj2UhnGBXu2oR2UL6sQODm_5VNV3Ski3rXExxP_u_U/pub?gid=224302262&single=true&output=csv", function(error, data) {
            if (error) {
               throw error;
            }
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
</script>

0 answers

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Google Sheets App Script HTML Page Hide close (X) button Use data from Google sheets to fill up html page Running a Google Sheets App script function from an HTML page with form values returned Use data from HTML Interface in Google Sheets Table HTML from Google sheets with hyperlink Sending data from HTML form to Google Sheets Populating radio buttons from google sheets into HTML Populate HTML form from Google Sheets Read Cells from Google Sheets in JavaScript or HTML Pulling Data From Google Sheets into HTML Table
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM