Uncaught ReferenceError: loadData is not defined

[Ingo]

Hello all,

I'm trying to get FusionCharts running under Laravel 6 inside a blade view. Using the code for candlesticks provided under https://www.fusioncharts.com/fusiontime/examples/interactive-candlestick-chart?framework=javascript, I have:

<!-- Include fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Include gammel theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

<script type="text/javascript">

Promise.all([
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json"
  ),
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-schema.json"
  )
]).then(function(res) {
  const data = res[0];
  const schema = res[1];

  const dataStore = new FusionCharts.DataStore();
  const dataSource = {
    chart: {},
    caption: {
      text: "Apple Inc. Stock Price"
    },
    subcaption: {
      text: "Stock prices from January 1980 - November 2011"
    },
    yaxis: [
      {
        plot: {
          value: {
            open: "Open",
            high: "High",
            low: "Low",
            close: "Close"
          },
          type: "candlestick"
        },
        format: {
          prefix: "$"
        },
        title: "Stock Value"
      }
    ]
  };
  dataSource.data = dataStore.createDataTable(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "500",
    dataSource: dataSource
  }).render();
});
</script>

<div id="chart-container"></div>

Upon retrieving the view, no chart is displayed and I get the following error in Chrome dev tools:

Uncaught ReferenceError: loadData is not defined

How can I resolve that error?

Many thanks!

[Srishti Jaiswal]

Hi Ingo,

You are getting the error since you need to use the "fetch" API instead of "loadData" to get the JSON from the URLs.

Please refer to this fiddle for the implementation: http://jsfiddle.net/Lpejv1r9/

Hope this will help.

Thanks,

Srishti jaiswal

[Ingo]

Hi Srishti,

thank you, this is now working fine. Since my data and schema are not stored in files but in arrays that get passed from the Laravel controller to the view, how would I correctly reference the array variables?

I've tried something like this (also deleting the fetch() altogether, but to no avail:

var chart;
Promise.all([
fetch(
  {{ $data }}
), fetch(
  "[{
    "name": "Date",
    "type": "date",
    "format": "%Y-%m-%d"
}, {
    "name": "Open",
    "type": "number"
}, {
    "name": "High",
    "type": "number"
}, {
    "name": "Low",
    "type": "number"
}, {
    "name": "Close",
    "type": "number"
}, {
    "name": "Volume",
    "type": "number"
}]"
)
]).then(function(res) {
Promise.all([
  res[0].json(),
  res[1].json()
]).then(function(res) {

Many thanks again,

Ingo

[Srishti Jaiswal]

Hi Ingo,

Your query "How to reference the array variables that get passed from the Laravel controller to the view" is not in our scope. We suggest you check the Laravel forum to resolve your query.

Please refer to this link to the Laravel forum: https://laravel.com/docs/7.x/views#passing-data-to-views

Hope this will help.

Thanks,
Srishti Jaiswal