CODEWITHSUNDEEP
chartsextjs5
Brent Wilderman
Brent Wilderman

Reputation: 383

ExtJS Chart Label Issue

I have a cartesian Chart with multiple series. One series is a Bar and the other series is a Line. The line axis label is not rendering the correct values corresponding to the data entered for the line.

For instance my store data is as follows:

{
    "agg_fq": "2013 - FQ1",
    "quarterly_sum": 12748,
    "dys": 92,
    "avg_per_day": 138
}, {
    "agg_fq": "2013 - FQ2",
    "quarterly_sum": 12161,
    "dys": 90,
    "avg_per_day": 135
}, {
    "agg_fq": "2013 - FQ3",
    "quarterly_sum": 12410,
    "dys": 91,
    "avg_per_day": 136
}, {
    "agg_fq": "2013 - FQ4",
    "quarterly_sum": 12137,
    "dys": 92,
    "avg_per_day": 131
}, {
    "agg_fq": "2014 - FQ2",
    "quarterly_sum": 11970,
    "dys": 90,
    "avg_per_day": 133
}, {
    "agg_fq": "2014 - FQ3",
    "quarterly_sum": 9743,
    "dys": 91,
    "avg_per_day": 107
}, {
    "agg_fq": "2014 - FQ4",
    "quarterly_sum": 8294,
    "dys": 92,
    "avg_per_day": 90
}

The data charted for the line is the dys property. The values are between 90 and 100 yet the chart label shows 0 - 1.0. I've tried looking into the renderer of the label and it shows the same issue and the values are incorrect.

Here is my chart as defined:

{
    xtype: 'cartesian',
    store: store,
    width: 400,
    height: 400,
    axes: [{
        type: "category",
        postion: "bottom",
        fields: "agg_fq",
        title: "Quarters",
        label: {
            rotate: {
                degrees: -45
            }
        }
    }, {
        type: "numeric",
        position: "right",
        grid: true,
        fields: ["avg_per_day"],
        title: "Emails"
    }, {
        type: "numeric",
        position: "left",
        title: "Days in Qtr",
        fields: ["dys"],
        renderer: function(value) {
            console.log(value);
        }
    }],
    series: [{
        type: "bar",
        axis: "right",
        xField: "agg_fq",
        yField: ["avg_per_day"],
        stacked: false
    }, {
        type: "line",
        axis: "left",
        xField: "agg_fq",
        yField: ["dys"]

    }]
}

Here is a Sencha Fiddle with the issue.

Upvotes: 4

Views: 902

Answers (1)

weeksdev
weeksdev

Reputation: 4355

After messing around with the code, I found the issue. The yField on a line series apparently causes issues if it is an array. Changing the series to the following will fix the issue:

{
    type: "line",
    axis: "left",
    xField: "agg_fq",
    yField: "dys"
}

And here is a Sencha Fiddle with the fix.

Upvotes: 3

Related Questions