Stacked & Grouped Chart Remote Databinding

3 posts, 0 answers
  1. Dilanka
    Dilanka avatar
    1 posts
    Member since:
    Nov 2014

    Posted 03 Dec 2014 Link to this post

    hi,

    Would you be able to provide the Remote Databinding (From a JSON Url) example of the below mentioned static Series. 

    function createChart() {
    $("#chart").kendoChart({
    title: {
    text: "World population by age group and sex"
    },
    legend: {
    visible: false
    },
    seriesDefaults: {
    type: "column"
    },
    series: [{
    name: "0-19",
    stack: "Female",
    data: [854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654]
    }, {
    name: "20-39",
    stack: "Female",
    data: [490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439]
    }, {
    name: "40-64",
    stack: "Female",
    data: [379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066]
    }, {
    name: "65-79",
    stack: "Female",
    data: [97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956]
    }, {
    name: "80+",
    stack: "Female",
    data: [16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029]
    }, {
    name: "0-19",
    stack: "Male",
    data: [900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165]
    }, {
    name: "20-39",
    stack: "Male",
    data: [509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507]
    }, {
    name: "40-64",
    stack: "Male",
    data: [364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563]
    }, {
    name: "65-79",
    stack: "Male",
    data: [74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156]
    }, {
    name: "80+",
    stack: "Male",
    data: [9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223]
    }],
    seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
    "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
    valueAxis: {
    labels: {
    template: "#= kendo.format('{0:N0}', value / 1000) # M"
    },
    line: {
    visible: false
    }
    },
    categoryAxis: {
    categories: [1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010],
    majorGridLines: {
    visible: false
    }
    },
    tooltip: {
    visible: true,
    template: "#= series.stack #s, age #= series.name #"
    }
    });
    }

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Dec 2014 Link to this post

    Hi Dilanka,

    Please take a look at this forum thread which discusses the same subject and contains an example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Brandon
    Brandon avatar
    1 posts
    Member since:
    Nov 2014

    Posted 08 Dec 2014 in reply to Dilanka Link to this post

    Dilanka,

    The following is a json response for a stacked column chart I am using that shows grouped product category sales for the top 2 sellers and an "others" for a calendar year:

    [{"prodcat":"600","sales":92116.02,"YEAR":"2014","MONTH":"January"},{"prodcat":"600","sales":81412.23,"YEAR":"2014","MONTH":"February"},{"prodcat":"600","sales":102396.99,"YEAR":"2014","MONTH":"March"},{"prodcat":"600","sales":95307.64,"YEAR":"2014","MONTH":"April"},{"prodcat":"600","sales":69957.45,"YEAR":"2014","MONTH":"May"},{"prodcat":"600","sales":61042.87,"YEAR":"2014","MONTH":"June"},{"prodcat":"600","sales":59809.77,"YEAR":"2014","MONTH":"July"},{"prodcat":"600","sales":87974.97,"YEAR":"2014","MONTH":"August"},{"prodcat":"600","sales":85871.37,"YEAR":"2014","MONTH":"September"},{"prodcat":"600","sales":93221.54,"YEAR":"2014","MONTH":"October"},{"prodcat":"600","sales":48844.87,"YEAR":"2014","MONTH":"November"},{"prodcat":"600","sales":60964.65,"YEAR":"2013","MONTH":"December"},{"prodcat":"800","sales":145909.99,"YEAR":"2014","MONTH":"January"},{"prodcat":"800","sales":116555.19,"YEAR":"2014","MONTH":"February"},{"prodcat":"800","sales":115223.5,"YEAR":"2014","MONTH":"March"},{"prodcat":"800","sales":159642.97,"YEAR":"2014","MONTH":"April"},{"prodcat":"800","sales":94731.99,"YEAR":"2014","MONTH":"May"},{"prodcat":"800","sales":114520.37,"YEAR":"2014","MONTH":"June"},{"prodcat":"800","sales":91456.34,"YEAR":"2014","MONTH":"July"},{"prodcat":"800","sales":120503.63,"YEAR":"2014","MONTH":"August"},{"prodcat":"800","sales":98928.28,"YEAR":"2014","MONTH":"September"},{"prodcat":"800","sales":101285.73,"YEAR":"2014","MONTH":"October"},{"prodcat":"800","sales":50799.17,"YEAR":"2014","MONTH":"November"},{"prodcat":"800","sales":61699.72,"YEAR":"2013","MONTH":"December"},{"prodcat":"Other","sales":296002.97,"MONTH":"January"},{"prodcat":"Other","sales":311422.02,"MONTH":"February"},{"prodcat":"Other","sales":315405.16,"MONTH":"March"},{"prodcat":"Other","sales":246987.8,"MONTH":"April"},{"prodcat":"Other","sales":252565.89,"MONTH":"May"},{"prodcat":"Other","sales":250086.2,"MONTH":"June"},{"prodcat":"Other","sales":288052.05,"MONTH":"July"},{"prodcat":"Other","sales":341563.06,"MONTH":"August"},{"prodcat":"Other","sales":314825.02,"MONTH":"September"},{"prodcat":"Other","sales":331409.96,"MONTH":"October"},{"prodcat":"Other","sales":159019.99,"MONTH":"November"},{"prodcat":"Other","sales":185318.97,"MONTH":"December"}]

    I attached an image of a screenshot of the chart.

Back to Top