Embed Google Geochart JS

1

hello

I have a table with our customers divided by French geographical department.
I would like to display them on a map.

I did not find this type of charts on Coda.
I looked for another way. I have a JS script with Google GeoChart.

on the other hand I do not know how to integrate the display of this card in coda.
the Embed formula allows you to put a url, no JS.
an idea ?

should a pack be used? create a pack?
how to do it in a pack?

1 Like
2

try this method…
it renders any html doc you provide it with, including html, css and javascript

if you need to use it regularly, please set up your own github copy of the server. but feel free to use the agile-dynamics github for testing it out.

max

2 Likes
3

Thanks for your idea. In principle, it works well but I have 2 problems that you may have already encountered.

  1. (index):21 Uncaught URIError: URI malformed
    I don’t understand why but I got this error message from your URL (https://agile-dynamics.github.io/js#). When I decode the url in command line, the code is fine.
    Here is the sample JS FusionChart library code I used :
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

<div id="chart-container">FusionCharts XT will load here!</div>

<script type="text/javascript">
   const chartData = [
 {
  "label": "Venezuela",
  "value": "290"
 }, {
  "label": "Saudi",
  "value": "260"
 }, {
  "label": "Canada",
  "value": "180"
 }, {
  "label": "Iran",
  "value": "140",
 }, {
  "label": "Russia",
  "value": "115"
 }, {
  "label": "UAE",
  "value": "100"
 }, {
  "label": "US",
  "value": "30"
 }, {
  "label": "China",
  "value": "30"
 }
];

    const chartConfig = {
  type: 'column2d',
  renderAt: 'chart-container',
  width: '100%',
  height: '400',
  dataFormat: 'json',
  dataSource: {
   "chart": {
    "caption": "Countries With Most Oil Reserves [2017-18]",
    "subCaption": "In MMbbl = One Million barrels",
    "xAxisName": "Country",
    "yAxisName": "Reserves (MMbbl)",
    "numberSuffix": "K",
    "theme": "fusion",
   },
   "data": chartData
  }
    };

 FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
 });
</script>
  1. Error 404
    When I fork your repository on Github, I can’t get a functional page
4

For error 1, I feel like it’s related to HTML code that’s too big. This should truncate the text to base64.

For the 404 error, it is not a real error. It’s a redirect issue because I was testing without the base64 parameter :slight_smile:

update 3: I found the problem. The character ‘%’ is to be avoided in the case used.

1 Like
5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.