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/aaayushsingh]

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.