Made in Chicago Company Directory

(@finnito123)

Hello everabody,

I am trying to implement charts into a new webpage using amcharts. Implementing the charts works but I have troubles using the dataloader to use data from a csv file I have uploaded to wp Media.

Resources:

//www.amcharts.com/lib/5/index.js
//www.amcharts.com/lib/5/xy.js
//www.amcharts.com/lib/5/themes/Animated.js

HTML:

<div id="$CHART$" style="width: 100%; height: 300px;"></div>

Java Script:

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("$CHART$");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelX: "panX",
  wheelY: "zoomX",
  pinchZoomX:true
  dataSets: [{
    dataLoader: {
        url: "https://*******.******/wp-content/uploads/2022/12/SingleDual_v2_4m_2.83.csv",
        format: "csv",
        delimiter: ",",       // column separator
        useColumnNames: true, // use first row for column names
        skip: 1               // skip header row
      }
  }]
}));


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  logarithmic: true,
  renderer: am5xy.AxisRendererX.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "single",
  valueXField: "freq",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueX}: {valueY}"
  })
}));

series.strokes.template.setAll({
  strokeWidth: 3
});

series.data.setAll(data);

// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);

I understand that the code would not work like this but I have not found the correct way to implement the dataloader in wordpress in an example. Only in the github example is in github I understand. And the shortcode example to load a csv via shortcode does not help me to understand how to than use the csv data in Javascript as data for the chart?

Kind regards,

Finn

This topic was modified 1 year, 8 months ago by Jan Dembowski.
This topic was modified 1 year, 8 months ago by finnito123.

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

finnito123

(@finnito123)

1 year, 8 months ago

So I have tried other solutions based on net.load

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("$CHART$");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX",
  pinchZoomX:false
}));

// Data
var data = am5.CSVParser.parse(am5.net.load("https://*****.***/wp-content/uploads/2022/12/SingleDual_v2_4m_2.83.csv"), {
        delimiter: ",",       // column separator
        useColumnNames: true, // use first row for column names
        skip: 1               // skip header row
  });

///function dataLoaded(result) {
  // Set data on all series of the chart
//  var data = am5.CSVParser.parse(result.response, {
//        delimiter: ",",       // column separator
//        useColumnNames: true, // use first row for column names
//        skip: 1               // skip header row
//  	});
//  result.target.series.each(function(series) {
//    series.data.setAll(data);
//  });
//}

//am5.net.load("https://******.***/wp-content/uploads/2022/12/SingleDual_v2_4m_2.83.csv", chart).then(dataLoaded);

// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  logarithmic: true,
  renderer: am5xy.AxisRendererX.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueXField: "freq",
  valueYField: "single",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueX}: {valueY}"
  })
}));

//series.strokes.template.setAll({
//  strokeWidth: 3
//});

series.data.setAll(data);

// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);

which actually does not throw any exceptions or errors but does not show any graph.

This reply was modified 1 year, 8 months ago by finnito123.

Thread Starter

finnito123

(@finnito123)

1 year, 8 months ago

So I continued to try to solve the problem

var data = [];
am5.net.load("https://******.***/wp-content/uploads/2022/12/SingleDual_v2_4m_2.83.csv").then(function(result) {
  // This gets executed when data finishes loading
  data = am5.CSVParser.parse(result.response, {
    delimiter: ",",
    useColumnNames: true,
    skip: 1
  });
  console.log(result.response)
}).catch(function(result) {
  // This gets executed if there was an error loading URL
  // ... handle error
  console.log("Error loading " + result.xhr.responseURL);
});

console.log(data[0]);

With this code I am able to write the csv correctly to console, but I am not able to access data[i] or plot something when I execute

series.data.setAll(data);

after

var series = chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueXField: "freq",
  valueYField: "single",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueX}: {valueY}"
  })
}));

Unfortunately i do not finde any (to me) usefull information of how the parser works.

I hope somebody can help me 🙂

Thread Starter

finnito123

(@finnito123)

1 year, 8 months ago

So I have got a little further debugging my problem.

// Data

var data = [];
data = am5.net.load("https://******.***/wp-content/uploads/2022/12/SingleDual_v2_4m_2.83.csv").then(function(result) {
  // This gets executed when data finishes loading
    var data = am5.CSVParser.parse(result.response, {
    delimiter: ",",
    useColumnNames: true,
    skip: 1
  });
	return data;
}).catch(function(result) {
  // This gets executed if there was an error loading URL
  // ... handle error
  console.log("Error loading " + result.xhr.responseURL);
});
              
const waitForData = () => {
  data.then((a) => {
    console.log(a[0]);
    return a;
  });
};

// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueXField: "freq",
  valueYField: "single",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueX}: {valueY}"
  })
}));
series.data.processor = am5.DataProcessor.new(root, {
  numericFields: ["freq"],
  numericFields: ["single"],
  numericFields: ["dual"]
});
//series.strokes.template.setAll({
//  strokeWidth: 3
//});

console.log(waitForData());
series.data.setAll(waitForData());

This does unfortunately not work, as i understand I have to wait for the promise to be returned to use data. Then the data parsed needs to be converted to values as it is a string. Unfortunaltey it does not work, console output is:

undefined
TypeError: e is undefined
    s https://www.amcharts.com/lib/5/index.js?ver=1.4.1:1
    value https://www.amcharts.com/lib/5/index.js?ver=1.4.1:1
    <anonymous> /?amcharts_preview=1:197
Object { freq: "20.2", single: "79.3", dual: "81.9" }
Object { freq: "20.2", single: "79.3", dual: "81.9" }

I Actually don’t know how to pass the array back to series.data.setAll(); Everyhing I try I get data[0] = undefined. Only when I log inside .then I get the DataList printed.

javaScript is too heavy for me ^^

This reply was modified 1 year, 8 months ago by finnito123.

Thread Starter

finnito123

(@finnito123)

1 year, 8 months ago

So I was able to load the data from a csv file. Working code is:

// Data
async function fetchData() {
    try {
        const csv = await am5.net.load("https://******.***/wp-content/uploads/2022/12/SingleDual_v2_4m_2.83.csv");
        const list = await am5.CSVParser.parse(csv.response, {
            delimiter: ",",
            useColumnNames: true,
            skip: 1
        });
        return list;
    }
    catch (error) {
      console.error(error);
    }
}
  
const promise = fetchData();
promise.then((data) => series1.data.setAll(data));

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Loading CSV Data from WP Media into Chart’ is closed to new replies.