How to use generated JSON to create chart programmatically

[gabrielflorit]

How do I use the generated JSON to create the chart with code? I ask because I see that Atlas charts are nicely responsive. Maybe there's a tutorial I'm missing?

[nsonnad]

Hey Gabriel. At the moment the chart creation and chart rendering are pretty well decoupled in the code but, as this isn't the prime focus of Chartbuilder—which is not to render charts on the page but facilitate their creation and export—we haven't really documented it.

That said, it's pretty easy. You can just replicate what the Chartbuilder.jsx component does to draw a chart, namely require the RendererWrapper react component and pass the generated JSON as the model property. This is how Chartbuilder.jsx does it:

return (
  <RendererWrapper
    editable={true} /* will component be editable or only rendered */
    model={this.state} /* PASS YOUR JSON HERE */
    enableResponsive={false}
    width={640}
    showMetadata={true}
    className={svgWrapperClassName.desktop}
  />
);

In a react project you can just require("./RendererWrapper.jsx") and pass in JSON like so. If you think this is a common requirement we can/should consider making it clearer and possibly splitting chart rendering and creation a bit further.

[yanofsky]

Perhaps we should investigate creating a script that exports a chartbuilder library that can render chartbuilder json on a html page without needing a react project?

[gabrielflorit]

Thanks @nsonnad, that's quite helpful. And yes @yanofsky I think that would be great. Maybe add a fourth button, export JS, which would dump everything in an iframe.