Ingo

Uncaught ReferenceError: loadData is not defined

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now