[New plugin] Advanced Financial Charts and Graphs

Thimo · February 5, 2021, 5:17pm

Hi everyone!

I just published a plugin that lets you add advanced and fully customizable financial charts to your application! These charts are perfect for trading, stocks or crypto applications. The charts can use data from your database or data supplied by an API.

Charts:

Click to see the charts this plugin offers

Area chart

Ability to add another Area chart
Ability to add a Histogram chart
Ability to add a Candlestick chart
Ability to add a Line chart
Ability to add a Bar chart
Ability to add/remove Markers
Ability to add/remove Price lines
Scroll to data point
Take screenshot of chart
Update data of chart
Hide/show/remove data series

Histogram chart

Ability to add a Area chart
Ability to add another Histogram chart
Ability to add a Candlestick chart
Ability to add a Line chart
Ability to add a Bar chart
Ability to add/remove Markers
Ability to add/remove Price lines
Scroll to data point
Take screenshot of chart
Update data of chart
Hide/show/remove data series

Candlestick chart (OHLC)

Ability to add a Area chart
Ability to add a Histogram chart
Ability to add another Candlestick chart
Ability to add a Line chart
Ability to add a Bar chart
Ability to add/remove Markers
Ability to add/remove Price lines
Scroll to data point
Take screenshot of chart
Update data of chart
Hide/show/remove data series

Line chart

Ability to add a Area chart
Ability to add a Histogram chart
Ability to add a Candlestick chart
Ability to add another Line chart
Ability to add a Bar chart
Ability to add/remove Markers
Ability to add/remove Price lines
Scroll to data point
Take screenshot of chart
Update data of chart
Hide/show/remove data series

Bar chart (OHLC)

Ability to add a Area chart
Ability to add a Histogram chart
Ability to add a Candlestick chart
Ability to add a Line chart
Ability to add another Bar chart
Ability to add/remove Markers
Ability to add/remove Price lines
Scroll to data point
Take screenshot of chart
Update data of chart
Hide/show/remove data series

Demo page (editor is public): financialcharts.bubbleapps.io

Plugin page: Financial Charts And Graphs (Chart) Plugin | Bubble

Compressed

You can always reach out to me for questions, bug reports or feature requests!

martin101 · February 6, 2021, 6:11pm

Those look absolutely amaizing! Congrats!

This could be exactly what I need for a project I am thinking about.

Q1: I see that you don’t support technical natively, but If I do calculations backend, can I add additional line chart that could represent technical indicators (e.g. moving averages, RSI, etc.)?

Q2: Can I add multiple price lines, for example to represent a position (e.g. 3 lines for buy price, stop loss, and take profit)?

Q3: Can I add partial line (e.g. a horizontal line that is at certain price, but is shown only for a certain time period or number of bars, or a straight line that links the high of one bar and the low of another bar)?

Thimo · February 6, 2021, 4:28pm

@martin101

Nice to see you are interested in my plugin! I have answered your questions below

1 - Yes, you can add unlimited additional data series (Line, Area, Histogram etc). These can definitely technical indicators from an API or from your own calculations.

2 - Yes. You can add unlimited Priceline to your charts. Besides Pricelines, you could also add unlimited markers to your chart. These can also be used for the same purpose (see demo).

3 - This should be possible. If you add an additional data series only for a specific time stamp range, it will only be shown for these time stamps! Example:

Let me know if you any other questions!

underhill.dan · February 6, 2021, 5:43pm

Thanks for this, I have a big financial project coming up later this year and this may be perfect.

Thanks!

jumpstartmediahub · February 21, 2021, 2:10pm

How do I feed historical OHLC data from a custom data API to the chart? Is this possible? What format does it need to be in JSON/List/Array etc…?

Thimo · February 21, 2021, 3:01pm

@jumpstartmediahub Yes, these charts are specifically made for that purpose. You can make a call to an API you want. Like you can see on the demo page you will need to have a list for the Open, High, Low, Close and time series data. You can take a look inside the editor of the demo page to see exactly how to setup the charts

jumpstartmediahub · February 21, 2021, 3:26pm

Not sure that I understand how specifically to format the data output from my API; from looking at your demo page. A user will put in a ticker (dynamic); then send a get request to my API. From there what does my response have to look like so the OHLC data displays correctly in your chart. Would happily use this to display my data if this is possible.

Thimo · February 21, 2021, 3:48pm

@jumpstartmediahub I have created a demo for you that uses data from a stocks API (Twelve Data). All the stock Data APIs are really similar so this will hopefully be useful to you. I also added a dropdown which lets a user switch ticker, so you can see how that would work. Let me know if this helps!

The response from the Twelve Data API looks like this:

{
    "meta": {
        "symbol": "AAPL",
        "interval": "1min",
        "currency": "USD",
        "exchange_timezone": "America/New_York",
        "exchange": "NASDAQ",
        "type": "Common Stock"
    },
    "values": [
        {
            "datetime": "2021-02-19 15:59:00",
            "open": "129.87000",
            "high": "130.02000",
            "low": "129.78000",
            "close": "129.87000",
            "volume": "1020645"
        },
        {
            "datetime": "2021-02-19 15:58:00",
            "open": "129.87000",
            "high": "129.92000",
            "low": "129.78999",
            "close": "129.88000",
            "volume": "426453"
        },

etc…

jumpstartmediahub · February 21, 2021, 5:06pm

First off thank you so much, your response rate to these questions is GREAT! Let me take a quick look and revert. Thanks again

jumpstartmediahub · February 21, 2021, 5:16pm

I just looked at the request raw, I can certainly format my API to deliver data in the same format. But I have one question.

The raw get returns:
“meta”: {
“symbol”: “AAPL”,
“interval”: “1min”,
“currency”: “USD”,
“exchange_timezone”: “America/New_York”,
“exchange”: “NASDAQ”,
“type”: “Common Stock”
},
“values”: [
{
“datetime”: “2021-02-19 15:59:00”,
“open”: “129.87000”,
“high”: “130.02000”,
“low”: “129.78000”,
“close”: “129.87000”,
“volume”: “1020645”
}…

Where may I see how to get this data into the chart on the demo ? I am new to Bubble and understand how to make my API and the get request; but do not know what needs to happen to get the OHLC data into your chart ? Is this done in the workflow ?

Thimo · February 21, 2021, 5:36pm

@jumpstartmediahub

You can use the data from the API you have set-up using the API connector like this:

1 - Inside the expression field for the data, select ‘Get data from external API’:

2 - Inside the ‘Get data from external API’ menu select the API you have setup inside the API connector:

3 - Now you have access to the API call properties inside the expression:

When you do this for all the data series fields it will look like the fields from the demo I just send you:

You can also try to recreate an expression like this inside a text field to see what data is getting displayed (;

Let me know if this makes sense!

jumpstartmediahub · February 21, 2021, 5:51pm

Yes 100% ; thanks you so much for your help, if possible please leave that demo page you created active for reference. Looking forward to using your plugin!

Thimo · February 21, 2021, 6:06pm

That’s great to hear! Yes, that demo page will not be deleted, maybe it can also be useful for other users

broker · August 29, 2021, 11:43pm

Hi @Thimo,
There is an issue with the charts, throwing the following error:

When I refresh the page again then it loads the charts. Can you please check?
Thanks.

Thimo · August 30, 2021, 1:54pm

Hi @broker

It is hard for me to see where this error is coming from, so I will send you a PM to take a closer look at this issue

ima.najeeb · September 8, 2021, 2:01pm

Hello @Thimo there are few questions I have for using the chart which we are unable to solve:

We are using a API to get current market value and plotting the candle chart - this works fine.
On the same chart we want to plot 2 line charts (or similar) to show support range. Support range are 2 values (for example max: 16000 and min: 15000) which indicate (predicts) where market will end up in few hours to few days. We are pushing this to bubble from an external python script every 3 hours and storing this in bubble DB.

We also want to show Exit Points - which is another element on the same chart. It will be a point on the chart showing where the market might end up that day
Lastly we want to show c/d count - which is another indicator which is mostly 0 - but we get a heart beat with a value sometimes. We want to represent that using 2-bar charts at the time we receive them

Could you guide us by creating a demo - of how we can include values from API (for candle chart) and values from bubble DB (support range: line chart, exit points: a point and c/d counts: 2 bars) on the same chart? We are struggling with that.

Thanks a lot!

Update: I have also now created the desired output. See the screenshot

ima.najeeb · September 14, 2021, 9:54am

@Thimo did you get a chance to look into this one? You reply would really help us accelerate our work. Thanks a lot

Thimo · September 14, 2021, 12:55pm

Like you can see on the demo page you can use workflow actions to add more series to your chart. You will have to supply a time series in UNIX with the associated data points to be plotted. These can come from an API or from your database. The same is true for adding a histogram series.

The demo page also showcases how to add markers to your chart (second chart, USD/LTC). This is also done by using workflow actions. Here, you only need the UNIX time point.

Does this point you in the right direction?

timothymugendi · September 23, 2021, 7:52am

Hi @Thimo how does one add scale on the right and on the left like this

I want to add volume and price as well

Thimo · September 23, 2021, 9:58pm

Hi @timothymugendi

Right inside the workflow action, in this case to add the area series, you can check the box that says ‘Add to left price scale’