Anyone made a bar chart

Has anyone made any custom bar chart widgets they would be willing to share? I’m trying to do some in-app analysis of a large connector function output without having to write things to a table.

Not quite the same, but these library widgets may be a good starting point:

I’m going to tap @rahul.singh @thorsten.langner @mellerbeck to see if they have any advice / have made something similar in the past that could help as well :slight_smile:

I did something like this with Google Charts
The Type of chart ich changable (but I have some Line chart specific inputs)

I never finished it and for sure thats not a price winning piece of code… But maybe thats a startingpoint…

customWidget-LineChart_1Line.json (5.8 KB)

Find the google documentation here:

2 Likes

With the built in third party Libraries

image

You can do quite a bit.

image

1 Like

I fetched the data from tulip table into HTTP connector in JSON format. then call the connector output & store it in a variable in Tulip App. Use Props to pass the variable data from application into custom widget environment & then use JS to map the props in your code.
Thats how you can use the connector output into custom widget environment without using tables




Screenshot 2024-05-01 125848

2 Likes

@rahul.singh @mellerbeck would you mind sharing the export for the custom widget?

@rahul.singh is doing basically the same thing.
customWidget-Animated Histogram v1.0.0.json (5.2 KB)

Pass this to the widget
[{“year”:2000,“value”:10},{“year”:2001,“value”:104},{“year”:2002,“value”:369},{“year”:2003,“value”:300},{“year”:2004,“value”:92},{“year”:2005,“value”:64},{“year”:2006,“value”:265},{“year”:2007,“value”:35},{“year”:2008,“value”:287},{“year”:2009,“value”:69},{“year”:2010,“value”:10},{“year”:2011,“value”:104},{“year”:2012,“value”:369},{“year”:2013,“value”:300},{“year”:2014,“value”:92},{“year”:2015,“value”:64},{“year”:2016,“value”:265},{“year”:2017,“value”:35},{“year”:2018,“value”:287},{“year”:2019,“value”:69}]