I noticed that there is a component for creating charts using d3js or Google Charts. However, no documentation is provided by the component on how to create the charts.
I would love to receive tips from someone who has already managed to use this component to implement a chart using D3js.
Go into the marketplace and drop this token into the search bar. J0dVK-nLWYnNp-GyHg-CBw
It will add a page that has an example of a Google Chart. Use that as your starting point.
@William_Glass thank you for your response.
But for some reason, Google Chart is not rendering the chart with the first set of variables configured for the page. And only after clicking the Randomize Data button, the chart is displayed.
Trying to solve this problem, I set the chartData variable before passing the chart function string, but this resulted in another problem: an error saying there was no data within the chart’s view was displayed. But the question is, was this really a problem or maybe the information is not being passed on to the correct priority for Google Chart?
How have you configured the first set of variables to the page? It sounds weird that initial data would not show the chart. I’m wondering if it could be so that the graph was rendered before the initial data was available and then doesn’t response to data being set.
I had that same issue with the preview google chart. Just plug-in a set page variable logic node to fire once the page is loaded on the pages logic canvas. That should do the trick.
@William_Glass in fact the page you gave as an example is no longer working, even with the variable configured for the page. I tried to replicate your entire scheme and I still have the problem. Is the page you created working correctly for you?
@Tomi_Laakso the image shows the scheme used to configure the variables. The first configures the javascript function in string format on the page, the second retrieves information from a request via REST and assigns the values to a variable chartdata that is later assigned to the component.
The function used:
function chartExecutor() {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable("$chartData");
const options = {
title: '',
curveType: 'function',
legend: { position: 'bottom' },
};
const chart = new google.visualization.LineChart(document.getElementById('chart_data_div'));
chart.draw(data, options);
}
}
const funcAsString = chartExecutor.toString();
return { funcAsString }
Example of data response added to chartData variable:
An overview of the scheme
Hi, sorry for taking so long to answer you. I tried to look at this issue, but I wasn’t able to reproduce this issue in my tester app. Could you share me your app ID so I could take a look at your app? Let’s see if I can spot something odd there… Please also let me know if it’s okay to make some little change to the logic and try things around cause that might be needed for me to debug this further
Hello all,
Uncertain if this is the right place for my question… please let me know…
I would like to use arcs with d3.arc()
to create something like:
I have not figure out how to use D3 rather than google charts yet.
Please advise.
In fact, i had the same probem with you. It appears that the chart doesn’t work in preview on web, but it does work on mobile.
Hey all, if it helps in the interim (until this component is supported on all devices), I made a video using quickchart.io to make app with Appgyver that builds charts as an image. They have quite a few chart options, and I think depending on the level of complexity of your chart (and your use case) this may be a more user friendly option to implement. I think this may be easier than the d3 component, it should work on all devices, and quickchart is built on chart.js.
