HTML google charts - embed html not visible

Design help Custom code
1

Not the first this has happened but sometimes some of my HTML embeds don’t render in designer or published mode and I’m not sure why.

(LINKS REMOVED CHANGE IN DIRECTION)

This shot has one box that just shows white when in actuality it should be rendering a graph as well, like the others but its not showing up.

image
image1920×938 116 KB

In the screenshot you can see that there’s a HTML embed but when you look on the published site (hit the toggle switch) you’ll it doesn’t show

image
image1920×938 304 KB

Cheers!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Nice design. No way to answer (Add screenshot of the “problem”) + Read Only link.

3

post updated with screenshots!

4

The problem is with the video - The HTML Embed - works perfect (Write “hello” - inside your embed HTML and always it will be visible).

Add read-only link. Anyway, for me, it works fine (Chrome). What custom code you added?

5

READ ONLY link added.

navigate to Insight Report under pages tab.

6

Wrong code. Remove the <html>, <head> and <body> wrappers (Also not valid)

copy-paste and test again

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
  google.charts.load('current', {
    'packages': ['bar']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);
    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>
<div id="barchart_material" style="width: 100%; height: 300px;"></div>
7

good observation but no change.

the other mini graphs do have the html and body tags in them and they show but for whatever reason some of them don’t. Weird :confused:

8

This is your chart:
https://codepen.io/ezra_siton/pen/mQeEyj

Maybe load the assets after the div

<!-- add this div by weblow ui 
####
<div id="barchart_material" style="width: 100%; height: 300px;"></div>
####
-->

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
  google.charts.load('current', {
    'packages': ['bar']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);
    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>

Also clear cache.

If this not solve your problem - put this code before body. For the div with the id of barchart_material use webflow regular div (No need for embed html) - and add class (height 300px)

9

thanks, i’ll try that out!

1 Like
10

no luck! :frowning_face:

11

Wierd. Again this is very simple code (By google). Try the same code on empty page first (Create “hello-chart” page).

On your page, I still see red errors. You use barchart_material more than one time.

image

12

I’ve followed every instruction to the T… hang a bit.

1 Like
13

I see… i think it may be because I duplicated the embed scripts and it only loads them one time. Hopefully when I additional graphs are added with unique scripts that should remedy the matter.

14

http://new-landing-page-94e5db.webflow.io/chart

Yes. If you use the same drawchart (by id!) for 30 elements. This is a little buggy. Again this is more issue of google charts (You should know how to code this).

Example of two charts on the same page:

https://codepen.io/ezra_siton/pen/mQeEyj

For more details write me in private.

code (With some comments)

<h2>Chart1</h2>
<div id="barchart_material" style="width: 100%; height: 300px;"></div>
<hr>
<h2>Chart2</h2>
<div id="barchart_material2" style="width: 100%; height: 300px;"></div>

<!-- load this only one time!! -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<script type="text/javascript">
  /* write only one time */
  google.charts.load('current', {
    'packages': ['bar']
  });
  /*chart 1*/
  google.charts.setOnLoadCallback(drawChart);
  /* chart 2 */
  google.charts.setOnLoadCallback(drawChart2);

  /* draw chart1*/
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);
    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };
    /* change her the ID */
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
  /* draw chart2*/
  function drawChart2() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);
    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'vertical' // Required for Material Bar Charts.
    };
    /* change her the ID */
    var chart = new google.charts.Bar(document.getElementById('barchart_material2'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>
1 Like
15

Thanks for this. I’ll give it some A/B testing and see what works out. :slight_smile: