kendo Multi level chart in mvc

0
votes

I am trying to generate multi dimensional chart in kendo..

I have datatable like this

enter image description here

I am trying to generate similar to like this..

Instead of "Product" it should replace to "Year column 2010...2014..."

Instead of "Budget" It should come "Nationality --- Bahraini, Non Bahraini"

Instead of "Actual" It should come "Sector --- Public,Private, Other etc"

Instead of "New Column" It should come "Gender --- Male,Female"

enter image description here

2
kendo-uikendo-asp.net-mvckendo-chart
The data in your chart does not match the data in your grid. Explain which of your column is analogous to product, and which are like budget and actual. - ezanker
Did you see the grouped/stacked demo: demos.telerik.com/kendo-ui/bar-charts/grouped-stacked-bar - ezanker
@ezanker i updated the answer.... I check the grouped stacked bar.... i need to generate the chart similiar to like this.. - Prasad Raja
dojo.telerik.com/@ezanker/OsaVE - ezanker
i need to show the label similar to the image..... how can i make the structure similar to the image ? - Prasad Raja

2 Answers

0
votes

The labels can be achieved through use of the visual function and some trial and error:

visual: function (e) {

    var draw = kendo.drawing;
    var geom = kendo.geometry;
    var Rect = geom.Rect;
    var Path = draw.Path;

    var rect = new Rect([e.rect.origin.x, e.rect.origin.y ], [e.rect.size.width, 50]);
    var pathA = Path.fromRect(rect).stroke("#555", 1, 0.75);

    var p1 = new geom.Point(e.rect.origin.x + e.rect.size.width / 2, e.rect.origin.y + 30);
    var pLeft = new geom.Point(e.rect.origin.x + e.rect.size.width / 6, e.rect.origin.y + 4);
    var pMid = new geom.Point(e.rect.origin.x + e.rect.size.width / 2, e.rect.origin.y + 4);
    var pRight = new geom.Point(e.rect.origin.x + e.rect.size.width * 5 / 6, e.rect.origin.y + 4);
    var text = new kendo.drawing.Text(e.value, p1, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });
    var textLeft = new kendo.drawing.Text("Nationality", pLeft, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });
    var textMid = new kendo.drawing.Text("Sector", pMid, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });
    var textRight = new kendo.drawing.Text("Gender", pRight, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });


    var group = new draw.Group();
    group.append(pathA);
    group.append(text); 
    group.append(textLeft); 
    group.append(textMid); 
    group.append(textRight); 

    return group;       
}

The unique text color is then used in the render event to set the svg text element anchor to middle for better centering.

render: function(e){
  $('[fill="rgba(100,100,100,0.999)"]').attr("text-anchor", "middle");
},

DEMO

0
votes

Finally lot of struggle, i found the solution

jsbin working example

 $("#chart").kendoChart({
  seriesDefaults: {
    type: "column"
  },
  series: [{
    name: "Sales",
    data: [10, 20, 0.5, 0, 100, 0]
  }],
  valueAxis: [{
    majorGridLines: { visible: false },
    title: { text: "Sales" },
    axisCrossingValue: [0,0]
  }],
  categoryAxis: [{
    categories: ["Order", "Invoice", "Credit Memo", "Order", "Invoice", "Credit Memo"],
    majorGridLines: { visible: false }
  },
                 {
    categories: ["Item", "Resources"],
    line: { visible: true },
    majorGridLines: { visible: true },
    title: { text: "Type & Document Type" }
  }
                ]
});