Accessing Dynamic Data in HTML Element (Google Charts)

Need help Plugins
1

I’m trying to using Google Charts Library (for Timeline) inside an HTML element.

I’ve finally worked out how to use List Item Expression from the Toolbox plugin to format a text from the list of things I want to use in the Timeline chart.

This is the list, and it works perfectly when I paste it directly into the Chart Javascript code:

[ 'Attempt 1', new Date(2020, 11, 30), new Date(2020, 12, 27) ], [ 'This Campaign Name', new Date(2020, 12, 14), new Date(2021, 01, 23) ], [ 'This Campaign Name', new Date(2020, 12, 14), new Date(2021, 01, 23) ], [ 'Buy now campaign', new Date(2020, 12, 14), new Date(2021, 01, 23) ], [ 'Buy now campaign', new Date(2020, 12, 14), new Date(2021, 01, 23) ], [ 'Buy now campaign', new Date(2020, 12, 14), new Date(2021, 01, 23) ], [ 'Buy now campaign', new Date(2020, 12, 14), new Date(2021, 01, 23) ], [ 'Buy now campaign', new Date(2020, 12, 14), new Date(2021, 01, 23) ]

But I cannot figure out how to replace that in the code with Dynamic Data from the List Item Expression.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();
          
        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          ListItemExpression A's list join with ' 
        
        ]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 1000px;"></div>
  </body>
</html>

I get this error in the console: Error: <text> attribute x: Expected length, "NaN".

Which is related I think to the library trying to know how many rows there are before drawing the chart:

image
image693×677 77.6 KB

I’m winging this and learning as I go, so any suggestions about how I can get my list of things into this timeline chart would be much appreciated.

thanks to @mishav for his great plugin!

2

Hey! I’m working on a similar problem, did you ever figure out how to do this?

3

I wonder why are using Google charts? Is there not a free plug-in that supports your need? If not, what shirt are you trying to reproduce? I like to google charge library but doing what you’re doing is a pain in the ass. It would be nice to add it to my free plugin that’s on the market place though!

4

Thanks Jared for the comment! I’m new to Bubble, so I might be doing something unnecessarily inconvenient. Would appreciate your perspective.

Similar to Kyleharryjohnson I’d like to display a chart on my Bubble app. In my case I’m using Amcharts with the Bubble HTML element, and I want to add Dynamic Inputs from Airtable API.

I like Amcharts (or Highcharts) because they have so many options of aesthetically pleasing data visuals, and similarly, I’m using Airtable for backend for the aesthetically pleasing and interactive database.

1 Like
5

Understood. How is your data coming in? As lists?