Script src tags

[erin2722]

Hello!

Thank you so much for this awesome package-- it is the best I have found and is super useful for a project of mine 😄

I see in the README that this should support script src tags, but unfortunately it is not working for me.

Right now, when my html contains <script src="insert cdn link here"></script>, I get an error in my console logs saying that they cannot find the library.

Do you have any suggestions for figuring out a way to fix this problem?

Thank you again for you work-- let me know if I can be of any help in solving this as well!

For context, here is the code we are rendering (it is a data visualization for a news article):

<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


#chartdiv1{
  width: 100%;
  height: 225px;
}

#hor-in-article-ad-placement{
    display: none;
}

  </style>
  <script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv1">

    <script>// Themes begin

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

  // Create chart instance
  var container = am4core.create("chartdiv1", am4core.Container);
  container.layout = "grid";
  container.fixedWidthGrid = false;
  container.width = am4core.percent(100);
  container.height = am4core.percent(100);

  // Color set
  var colors = new am4core.ColorSet();

  // Functions that create various sparklines
  function createLine(title, data, color) {

    var chart = container.createChild(am4charts.XYChart);
    chart.width = am4core.percent(100);
    chart.height = 100;

    chart.data = data;

    chart.titles.template.fontSize = 12;
    chart.titles.template.textAlign = "left";
    chart.titles.template.isMeasured = false;
    chart.titles.create().text = title;

    chart.padding(20, 5, 2, 5);

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.labels.template.disabled = true;
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.7;
    dateAxis.cursorTooltipEnabled = false;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.baseGrid.disabled = true;
    valueAxis.renderer.labels.template.disabled = true;
    valueAxis.cursorTooltipEnabled = false;

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.lineY.disabled = true;
    chart.cursor.behavior = "none";
    chart.cursor.fill = "color";

    var series = chart.series.push(new am4charts.LineSeries());
    series.tooltipText = "{date}: [bold]{value}";
    series.dataFields.dateX = "date";
    series.dataFields.valueY = "value";
    series.tensionX = 0.8;
    series.strokeWidth = 4;
    series.stroke = color;

    // render data points as bullets
    var bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.circle.opacity = 0;
    bullet.circle.fill = color;
    bullet.circle.propertyFields.opacity = "opacity";
    bullet.circle.radius = 3;

    return chart;
  }

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

    return isVisible;
}

      createLine("Fare Revenue (in millions)", [
        { "date": new Date(2013, 0, 1, 8, 0, 0), "value": "$"+ 5507 },
        { "date": new Date(2014, 0, 1, 9, 0, 0), "value": "$"+ 5709 },
        { "date": new Date(2015, 0, 1, 10, 0, 0), "value": "$"+ 5961},
        { "date": new Date(2016, 0, 1, 11, 0, 0), "value": "$"+ 6036},
        { "date": new Date(2017, 0, 1, 12, 0, 0), "value":"$"+  6172 },
    { "date": new Date(2018, 5, 1, 16, 0, 0), "value": "$"+ 3036, "opacity": 1 }
       ], colors.getIndex(9));



      createLine("Total Revenue (in millions)", [
       { "date": new Date(2013, 0, 1, 8, 0, 0), "value": "$"+ 7699 },
        { "date": new Date(2014, 0, 1, 9, 0, 0), "value": "$"+ 7970 },
        { "date": new Date(2015, 0, 1, 10, 0, 0), "value": "$"+ 8402},
        { "date": new Date(2016, 0, 1, 11, 0, 0), "value": "$"+ 8520},
        { "date": new Date(2017, 0, 1, 12, 0, 0), "value": "$"+ 8673 },
    { "date": new Date(2018, 5, 1, 16, 0, 0), "value": "$"+ 4287, "opacity": 1 }
       ], colors.getIndex(12));
 </script>
</div>

[christo-pr]

Hi @erin2722!

It's weird, probably the error is because you're actually trying to use the API of the the library that you're including in the same "string" where you're including it.

I built this library to specifically works with <script src="..." /> so I'm pretty sure that works fine, the only thing that's different on your snippet, is that you're also trying to use the lib (am4core) API

I'll see what I can do, but probably you could render all the <script src="..."> with <InnerHTML /> and then with React, do all the work that you have there ^^.