2

I am using this chart implementation. However, it disperse my data rather than stack on the top of each other.

I want to stack my first array on 1970, the second one on 1975. In other words, I would like to have two stacked bar rather than have five. I would like to keep my data array as it is, rather than seperating them into pieces.

function createChart() {
  $("#chart").kendoChart({
    title: {
      text: "World population by age group and sex"
    },
    legend: {
      visible: false
    },
    seriesDefaults: {
      type: "column"
    },
    series: [{
      name: "1970",
      stack: true,
      data: [85, 92, 98, 104, 54]
    }, {
      name: "1975",
      stack: true,
      data: [49, 50, 55, 56, 95]
    }],


    seriesColors: ["green", "yellow", "#dc5c71", "#e47f8f", "#eba1ad",
      "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"
    ],
    valueAxis: {
      labels: {
        template: "#= kendo.format('{0:N0}', value )#"
      },
      line: {
        visible: false
      }
    },
    categoryAxis: {
      categories: [1970, 1975],
      majorGridLines: {
        visible: false
      }
    },
    tooltip: {
      visible: true,
      template: "#= series.stack #s, age #= series.name #"
    }
  });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);

Fiddle

Current Output:

enter image description here

Desired Output: is similar to as follows

enter image description here

mystackoverflow
  • 357
  • 1
  • 4
  • 10
  • Could you post the chart code here? Or put it in a jsfiddle. My corporate network is blocking Telerik Dojo. :( – Nic May 28 '15 at 23:14
  • Any updates Nicholas. Something similar to http://jsfiddle.net/n9xvof2y/4/ following example, he concatenate arrays. – mystackoverflow May 28 '15 at 23:27

1 Answers1

2

Try arranging your data like this:

$("#chart").kendoChart({
     title: {
        text: "World population by age group and sex"
    },
    theme: "Metro",
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "column"
    },               
    series: [
      {
       name: "item1",
       stack: true,
       data: [85, 49]
     },{
       name: "item2",
       stack: true,
       data: [ 92, 50]
     },{
       name: "item3",
       stack: true,
       data: [98, 55]
     },{
       name: "item4",
       stack: true,
       data: [104, 56]
     },,{
       name: "item5",
       stack: true,
       data: [54,95]
     }, 
    ],
    valueAxis: {
        labels: {
            template: "#= kendo.format('{0:N0}', value )#"
        },
        line: {
            visible: false
        }
    },
    categoryAxis: {
        categories: [1970, 1975],
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name # #= value #"
    }
});

Updated DEMO

Updated FIDDLE

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • Is there a way to keep array itself, rather than separating them in pieces? Actually that is my main point. – mystackoverflow May 28 '15 at 23:22
  • @mystackoverflow, have a look at http://demos.telerik.com/kendo-ui/bar-charts/grouped-data. You would need to group by item instead of year to get one series per item with 2 points... – ezanker May 28 '15 at 23:24
  • I would like to have it as follows http://jsfiddle.net/n9xvof2y/3/ He has only one data array and handle it. By the way, I have upvoted your answer,however I have been dealing with this issue for many hours. – mystackoverflow May 28 '15 at 23:25
  • could you give me an example please how to make it? – mystackoverflow May 28 '15 at 23:27
  • I think @ezanker is right, this seems to be the way to go. You need to adjust your dataset so that Kendo can use it. – Nic May 28 '15 at 23:39
  • 1
    @mystackoverflow, for grouping you use one array of objects like this: https://jsfiddle.net/ezanker/va5pu8tf/2/. The fiddle you linked last uses highcharts not kendo and it also does not group the way you want... – ezanker May 29 '15 at 01:38
  • Perfect, that is what I have been looking for. You are great! I have marked your answer. – mystackoverflow May 29 '15 at 01:40
  • Out of my curiosity, any idea for the following question http://stackoverflow.com/questions/30519880/highlight-clicked-bar-series – mystackoverflow May 29 '15 at 01:52