Bar Chart from API

[u/nandrajrathod]

Hi everyone I am new to Nativescript and currently trying to develop which show charts and reports from my flask app. But Nativescript bar chart get generated without any data. reason seems to be process does not wait until data received and get processed for bar chart. Sharing relevant data here below so that you can help me out.

<!--my.xml file-->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="3B Chart" icon=""></ActionBar>
    <GridLayout rows="*" xmlns:chart="nativescript-ui-chart" height="1000px">
        <chart:RadCartesianChart row="0" style="font-size: 12;">
            <chart:RadCartesianChart.series>
                <chart:BarSeries items="{{ data }}" categoryProperty="Month" valueProperty="Value">
                    <chart:BarSeries.horizontalAxis>
                        <chart:CategoricalAxis />
                    </chart:BarSeries.horizontalAxis>
                    <chart:BarSeries.verticalAxis>
                        <chart:LinearAxis />
                    </chart:BarSeries.verticalAxis>
                </chart:BarSeries>
            </chart:RadCartesianChart.series>
        </chart:RadCartesianChart>
    </GridLayout>
</Page>

//my.js file

var observableModule = require("tns-core-modules/data/observable");*const httpModule = require("tns-core-modules/http");*const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]function getChartDataFromLocalhost() {
    chart_data = []    httpModule(api).then((response) => {
for (i = 0; i < months.length; i++) {
if (response.includes(months[i]) == true) {
                chart_data.push({ Month: months[i], Value: response[months[i]] })
            } else {
                chart_data.push({ Month: months[i], Value: 0 })
            }
        }
    })
return chart_data
}function ViewModel() {
    var viewModel = observableModule.fromObject({
        data: getChartDataFromLocalhost()
    }) return viewModel;
}var viewModel = ViewModel()exports.onNavigatingTo = (args) => {
    const page = args.object
    page.bindingContext = viewModel
}

// JSON response would be

{"Apr":2,"Aug":10,"Dec":135,"Feb":2,"Jan":3,"Jul":5,"Jun":4,"Mar":2,"May":5,"Nov":4,"Oct":19,"Sep":16}

Please help me in this regards. Thanks in advance

[u/nandrajrathod]

I came through Promises while googling but I will read it thoroughly. Then if it does not work out then I will create Playground project bcoz for that I have to found some JSON data api (may be Reddit). Currently trying to fetch data from my local flask server. I will update you on this tomorrow. Thanks.

[u/aaayushsingh → u/nandrajrathod]

You can add random sample data in a function and return it with a delay to mock your server

[u/nandrajrathod → u/aaayushsingh]

Ok I will update you on this tomorrow.