Stack Bar Chart

[Erick]

Hello, I want to make a Stacked Bar/Column Chart in ASP MVC.
I can't reproduce the example: http://demos.kendoui.com/dataviz/bar-charts/grouped-stacked-bar.html with Binding.
Then I modified the example in: http://demos.kendoui.com/dataviz/bar-charts/grouped-data.html adding Stack(true) in the series definition.

@model IEnumerable<SampleProject.GraphValueModel>

 

@(Html.Kendo().Chart(Model)

        .Name("chart")

        .Title(title => title.Position(ChartTitlePosition.Top).Text("Some Customers"))

        .DataSource(dataSource => dataSource

            .Read(read => read.Action("ChartForAnything", "Home"))

            .Group(group => group.Add(model => model.ColumnOrGroupName))

            .Sort(sort => sort.Add(model => model.AxisXValue).Ascending())

        )

        .Series(series => {

            series.Column(model => model.IndexValue, model => model.Color)

                .Name("close")

                .GroupNameTemplate("#= group.value #").Stack(true).Labels(label => { label.Position(ChartBarLabelsPosition.Center).Visible(true).Background("Transparent").Format("p1").Color("#FFFFFF"); });

        })

        .Legend(legend => legend

                .Position(ChartLegendPosition.Top)

            )

        .ValueAxis(axis => axis.Numeric()

            .Labels(labels => labels.Format("p2").Skip(1))

            .Axis.Max = 1.0f)

            .CategoryAxis(axis => axis

            .Categories(model => model.AxisXValue)

            .Labels(labels => labels.Format("MMM"))

        ))

The model is:

public class GraphValueModel

{

        public DateTime AxisXValue { get; set; }

        public string SerieName { get; set; }

        public object IndexValue { get; set; }

        public string Color { get; set; }

        public string ColumnOrGroupName { get; set; }

}

Everything is working, but that is the correct approach?

I have a issue with the color of the Legend Item, maybe because the Item is a Group.

The result is:
http://s8.postimage.org/4udwdfixh/Legend_Item_Color.png

[Iliana Dyankova]

Hi Erick,

The used approach (adding Stack(true) in the series definition) is totally valid. Generally speaking, there are two main approaches to set stacking in Kendo UI Chart: 

• Set Stack(true) to the SeriesDefaults (or on the first series);
• Stack each of the series with group name (as in the "Stacked and Grouped Bars" demo).

Regarding the colors and the legend, the observed behavior is due to the following:

• By design the legend colors show the colors of the series;
• In your example you get the Color field from the data, which specifies the colors of the points in the series.

In order to display the points' colors in the legend you need manually to set them in the legend. For this purpose you can hook up to the Chart's dataBound event and set the color via the options. Like here: 

@(Html.Kendo().Chart(Model)
  //....
  .Events(ev=>ev.DataBound("onDB"))
)

<script>
function onDB(e) {
     var chart = $("#chart").data("kendoChart");
     chart.options.series[0].color = chart.options.series[0].data[0].color;
     //....
}
</script>

Regards,
Iliana Nikolova
the Telerik team

[osman]

<script>
var mydata=[{"name":"Work","data":108404,"mach":"Fongs-3"},{"name":"Reason Late","data":80121,"mach":"Atyc-3"},{"name":"Work","data":2920,"mach":"Then-13"},{"name":"manuel wait","data":138383,"mach":"Then-12"},{"name":"Work","data":174811,"mach":"Loris Bellini 2"},{"name":"Work","data":39887,"mach":"Loris Bellini 1"},{"name":"manuel wait","data":761119041,"mach":"Loris Bellini 1"}];
$('#stacked').kendoChart({
dataSource:{
data:mydata,
group: {
field:"name",
dir:"asc"
},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"},
"mach":{"type":"string"}
}
}
}
},
seriesDefaults : {
stack:true,
gap:0.1
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>

how can i can stack name  according data for each mach ?

[Iliana Dyankova]

Hello Osman,

I have already replied to the same question in your other thread, however I am pasting my reply here too:

In order to achieve the desired outcome you need a matching set of data points. I.e. you should have a data point for "Fongs-3" (also for each of the categories) for each of the three groups ("Reason Late", "Work", "manuel wait") etc. Please note the value can be null, but the record needs to be presented in the data. This is due to the fact that series.data is an array.

Regards,
Iliana Nikolova
Telerik

[Prashant]

Hi lliana,
I also have same scenario. I tried changing the color in function on databind and it is working. 

My problem is with statement
var chart = $("#chart").data("kendoChart");

Is there any way by which we can get the chart element ( "#chart") from parameter "e" of DB()?

I want to render several charts dynamically (runtime) so hardcoding "#chart" will not work.

Regards,
Prashant Gham


  



 
<script> function onDB(e) { var chart = $("#chart").data("kendoChart"); chart.options.series[0].color = chart.options.series[0].data[0].color; //.... } </script>

[Iliana Dyankova]

Hi Prashant,

You could get the chart via the event arguments (documentation link):

function onDB(e) {
   console.log(e.sender);
}

Regards,
Iliana Nikolova
Telerik