How to create a chart using d3js?

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.

4 Likes

@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?

1 Like

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:

Screenshot from 2020-10-07 10-20-54

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.

This was answered here :slight_smile:

1 Like

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.