Visuals DOM elements in Studio

#1

It’s super cool and very useful that we can see the code that was generated for a visual in ChartFactor Studio, and even better that we can modify it to change the its behaviour. After playing for sometime with the visual I decided to copy the code and put it into an html file (with all the libraries included of course)

I though that I was going to immediately see the visual appearing on my page but for my surprise it didn’t. Then I realized the element was missing in the code, but looking at the widget code in Studio, it was also missing. This can be a little confusing.

Is this something that works only in Studio? Because none of the widget have the element defined.

If I have a large number of widgets in my Studio app how can I obtain a specific one thru the console in the developer tools if I don’t know the element?

Thanks in advance

#2

In order to render a visualization in the browser, the chart type and the DOM element are always required.

Since ChartFactor Studio is the one that dynamically creates and handle the DOM elements where the visualizations are contained, it will automatically append the .element() internally for them, this way the user won’t need to worry about something that he should not modify.

The elements in ChartFactor Studio have a generated unique id that should not be used, instead you can use the global function getId() that takes the widget title as parameter and returns the element id.

#3

I ran into this same issue at the very beginning. We usually use Studio mainly as a mock-up tool: We create a dashboard with some visuals depending on the subject and then we publish that as a standalone web application.

We have simplified the process of moving from studio to the web app a little bit, by having some templates that we re-use, but we still need to copy the code from each visualization and then plug them into the DOM element and then adjusts sizes.

Is there a way to simplify this even more? Don’t get me wrong, is easy enough, and what may take a day or two just take barely a couple of hours, but just wondering.

App with Studio Cli not working
#4

We have developed this Studio CLI tool that does the job. It will take an exported dashboard (a .cfs file) and will create a standalone wep application from it that will work from the very beginning. It can even generate multiple tab per dashboard if you have more than one .cfs file in the same folder.

If you want to know how to get this tool, please contact us.