Import new D3 charts to Arcadia visuals

Hi,

Can we import new D3 charts into Arcadia visuals. If yes, please provide the steps.

Thank you,
Ganesh

@Ganesh You can refer to this post: Custom visual example -- using Custom Style (JS)

It does require reasonable knowledge of D3 & JS. Assuming you have that background, the example in the post should give you a sense of what’s needed. Then you can use this in the custom style within Arcadia.

1 Like

Thank you @shaun for your reply, but looks like it is to update/customize the existed charts. But we are looking to import new type of chart rather than existed charts.

Let say, if I would like to create similar to below type of charts. How would I achieve.

Regards,
Ganesh

@Ganesh In arcadia the way it works is that you start with basic table visual, we disable the draw of the table visual, and instead replace it with new visual you are creating.

This is the part of the custom style that disables the draw of table visual:

   f.disableDraw = function() {
        return true;
    };

Here’s the piece of the code that actually starts creating a new SVG object to be used for the 3D pie chart.

  if (document.getElementById('canvas')) {
        d3.selectAll("#canvas").remove();
    }

     var svg = d3.select("#"+arcapi.chartId()).append("svg")
        .attr("id", "canvas")
        .attr("width", width)
        .attr("height", height);

The rest is lots of D3 javascript code.