This is a migrated thread and some comments may be shown as answers.

Data appears in console but not stacked bar chart

1 Answer 137 Views
Charts
This is a migrated thread and some comments may be shown as answers.
H
Top achievements
Rank 1
H asked on 16 Apr 2019, 01:10 PM
I have some data that I want to display in a [Kendo UI Stacked Bar Chart](https://demos.telerik.com/kendo-ui/bar-charts/stacked-bar). I can see the data in the console and I can see what one of the data points is as well, but for some reason Kendo UI is unable to display the data.

Earlier I had dummy data as

      series: [{
          name: "test",
          data: [100],
          color: "#1FA8E0"
      }, {

and the bar went to 100 as expected, so as far as I'm concerned I'm passing data in the correct location.

### JS snippet:

    function _loadWODataSet() {
        var curDate = new Date(),
            _startDate = '1-1-' + curDate.getFullYear(),
            _endDate = curDate.getMonth() + '/' + 
                       curDate.getDate() + '/' + 
                       curDate.getFullYear();
        GetHSClassData("ClassHere", 
            "WOffAmt, WUWDAmt", 
            "@DISTINCT and WorkDate >= '" + _startDate + 
            "' and WorkDate <= '" + _endDate + "'",
            "", function(results) {
                createWOChart(results);
            });
    }
    function createWOChart(payload) {
        $("div[report='wo-report']").kendoChart({
            title: {
                text: "WO-Title"
            },
            seriesDefaults: {
                type: "column",
                stack: true
            },
            chartArea: {
                width: 200,
                height: 500
            },
            series: [{
                name: "WOffAmt",
                data: payload[0].woffamt,
                color: "#1FA8E0"
            }, {
                name: "WUWDAmt",
                data: payload[0].wuwdamt,
                color: "#473F38"
            }],
            valueAxis: {
                min: -2000,
                max: 2000,
                majorUnit: 1000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: false
                }
            },
            categoryAxis: {
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
        console.log(payload);
        console.log(payload[0].woffamt); // -1100
    }

### Elsewhere in JS, before the above code:

    function _loadDatasets(){
    // irrelevant code here
        JSON.parse(sessionStorage.getItem('dsPYMTD'))[0].Error){
            _getCFDataset();
            _loadW0DataSet();
        }
    
        loadCount = 0;
        _detectDatasets();
    }

### Other JS file: https://jsfiddle.net/tx0z43fn/

### Console screenshot: https://i.stack.imgur.com/AUSJo.png

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 18 Apr 2019, 08:54 AM
Hi,

When binding your Chart to actual data items, it is easier to use a DataSource, like shown in the local binding and remote binding demos. If data is returned in this format from your server:
[
    { woffamt: - 1100, wuwdamt: -2122337.56 },
    { woffamt: - 1200, wuwdamt: -212246.56 },
    { woffamt: - 900, wuwdamt: -2122837.56 },
    { woffamt: - 1125, wuwdamt: -2122283.56 }
]

You can declare the Chart like this:
$("div[report='wo-report']").kendoChart({
    dataSource: {
         data: payload
    // other needed settings
    },
    title: {
        text: "WO-Title"
    },
    seriesDefaults: {
        type: "column",
        stack: true
    },
    chartArea: {
        width: 200,
        height: 500
    },
    series: [{
        name: "WOffAmt",
        field: "woffamt",
        color: "#1FA8E0"
    }, {
        name: "WUWDAmt",
        field: "wuwdamt",
        color: "#473F38"
    }],
    valueAxis: {
        min: -2000,
        max: 2000,
        majorUnit: 1000,
        line: {
            visible: false
        },
        minorGridLines: {
            visible: false
        }
    },
    categoryAxis: {
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    }
});


Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
H
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or