How to create QChart.js Line Chart

Question

I'm able to get QChart.js to work with pie charts without issues (as well as polar and doughnut charts), but whenever I try to create a line chart (as well as radar and bar charts) I get the following error:

TypeError: Cannot read property 'length' of undefined

The working code for pie charts is as follows:

Chart {
    id: chart_line
    Layout.fillHeight: true
    Layout.fillWidth: true
    chartType: Charts.ChartType.PIE

    chartData: [
        {value: 15, color: "#6AA84F"},
        {value:  3, color: "#DC3912"},
        {value:  5, color: "#FF9900"}]
}

The broken code for line charts is as follows:

Chart {
    id: chart_line
    Layout.fillHeight: true
    Layout.fillWidth: true
    chartType: Charts.ChartType.LINE

    chartData: [
        {labels: ["January","February","March","April","May","June","July"],
         datasets: [{ data: [65,59,90,81,56,55,40]} ] }
    ]
}

My understanding is that I'm not loading in chartData properly. The charts I'm having issues with are all the ones that use lists in their declarations in QChartGallery.js. I'm not especially familiar with JavaScript and it seems something about my syntax is off and I can't find documentation to clarify.

Kiwi · Accepted Answer · 2019-02-13 19:38:40Z

1

Got it, turns out it was about exactly as silly of a solution as I thought it might be. For these kinds of charts, you need to update the chartData on Component.onCompleted. So, the working example code for anyone in the future having this problem is as follows:

Chart {
    id: chart_line
    Layout.fillHeight: true
    Layout.fillWidth: true
    chartType: Charts.ChartType.LINE

    Component.onCompleted: {
        chartData = {
            labels: ["January","February","March","April","May","June","July"],
            datasets: [{
                    data: [65,59,90,81,56,55,40]
                }]
        }
    }
}

answered Feb 13, 2019 at 19:38

Kiwi

2352 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create QChart.js Line Chart

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related