Line Chart Not Updating

[gregdouglas]

Dynamically add / changing values in a line chart does not seem to work. Am I doing something wrong here. Code below - from your examples.

app.js

export class App
{
    constructor(){
        this.DynamicDoughnutData = {};
        this.SimpleLineData = {};

        this.resetPieData();
        this.resetLineData();
    }

    resetPieData() {
        this.DynamicDoughnutData = {
            labels: ["Red", "Green", "Yellow" ],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };
    }

    resetLineData() {
        this.SimpleLineData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "Healthy People",
                    backgroundColor: "rgba(220,220,220,0.2)",
                    borderColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "Ill People",
                    backgroundColor: "rgba(151,187,205,0.2)",
                    borderColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };
    }

    addEntry() {
        this.DynamicDoughnutData.labels.push("New Colour");
        this.DynamicDoughnutData.datasets[0].data.push(50);
        this.DynamicDoughnutData.datasets[0].backgroundColor.push("#B4FD5C");

        this.SimpleLineData.labels.push('August');
        this.SimpleLineData.datasets[0].data.push(60);
        this.SimpleLineData.datasets[1].data.push(60);
    };

}

app.html

<template>
    <fieldset>
        <legend>Line Graph via Attribute</legend>
        <canvas id="line-chart" chart="type: line; should-update: true; data.bind: SimpleLineData"></canvas>
        <p>Changing the data wont change this graph as it is not update-able</p>
    </fieldset>

    <fieldset>
        <legend>Doughnut Chart via Element</legend>
        <chart id="dynamic-doughnut-chart" type="doughnut" style="width: 50%; height: 50%; display: block;" should-update="true" throttle="2000" data.bind="DynamicDoughnutData"></chart>
        <chart id="dynamic-pie-chart" type="pie" style="width: 50%; height: 50%; display: block;" should-update="true" throttle="2000" data.bind="DynamicDoughnutData"></chart>
        <div>
            <label>Values</label>
            <div repeat.for="i of DynamicDoughnutData.datasets[0].data.length">
                <input value.bind="DynamicDoughnutData.datasets[0].data[i]" placeholder="Value ${$index + 1}"/>
            </div>
        </div>

        <p>Both charts are using the same dataset behind the scenes, so changing one will change both.</p>
        <p>Changing the above value should trigger a chart refresh after 2 seconds</p>
        <p>Although dynamically added entries will not be tracked currently</p>
        <button click.delegate="addEntry()">Add Entry</button>
        <button click.delegate="resetPieData()">Reset</button>
    </fieldset>
</template>

[grofit]

Will take a look shortly and get back to you.

[grofit]

Sorted, will be fixed in the new release. Issue was down to my general incompetence :)

The attribute fixes were missing the initial check for subscriptions and also was missing the this prefix, many a time I wish I had written this stuff in typescript so I would not be plagued by such trivial issues.

Anyway check out new release when its live, then you can find the next random bug.

[grofit]

Should be live on here and npm, will close but feel free to re-open if it did not solve your issue.