Basic example please

[Joe]

My need is relatively straight forward, but I am not normally a report person, nor a charting kind of person, so my knowledge of different charting types and values is practically nil.

I have a List<ClientBreakdown>, which is just a collection of a very simple class:

public class ClientBreakdown
{
    public string State { get; set; }
    public int Count { get; set; }
}

 

What I'd like is a Bar Chart, with the States alphabetically along the bottom, and the number of Clients in each state as the value of the bar.

I've done this:

@(Html.Kendo().Chart<ClientBreakdown>()
    .Name("chart")
    .Title("Breakdon of Client States")
    .Legend(l => l.Position(ChartLegendPosition.Bottom))
    .Series(s => s
        // pie chart is too busy, let's try it as a bar chart
        // .Pie(m => m.Count, m => m.State).Padding(5).Labels(l => l.Visible(false).Template("#= category # - #= value #"))
        .Column(m => m.Count, m => m.State).Labels(l => l.Visible(false).Template("#= category # - #= value #"))
    )
    .DataSource(ds =>
    {
        ds.Read(r => r.Action("ClientsByState", "Clients").Type(HttpVerbs.Get));
    })
    .Tooltip(tp => tp.Visible(true).Template("#= category # - #= value #"))
)

 

It gives me a bar chart ok, but each column is black, and there are no labels.  (See attached image)

Could someone give me a few tips on how to best accomplish this?

[Joe]

I suppose you can disregard this question... After searching a bit more, I think I've found what I need...  Here is what I ended up with

@(Html.Kendo().Chart<ClientBreakdown>()
    .Name("chart")
    .Title("Breakdown of Client States")
    .Legend(l => l.Position(ChartLegendPosition.Bottom))
    .Series(s => s.Column(m => m.Count).Name("Client Count by State")
        .Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd))
    )
    .CategoryAxis(c => c.Categories(m => m.State).Labels(true))
    .DataSource(ds => { ds.Read(r => r.Action("ClientsByState", "Clients").Type(HttpVerbs.Get)); })
    .Tooltip(tp => tp.Visible(true).Template("#=category# - #=value#"))
)

 

I also attached a screen shot showing the results.

 

[Joe]

As it turns out, I do need a bit of help after all.  I'd like to show a stacked bar chart similar to what I'm already showing, but I'd like to break the bar stacks down to Active Clients, and All Clients. Based on what I've already posted, what would I need to do to my model, my controller method, as well as my chart code to make this happen?

[Joe]

I changed my model, I changed my controller, and I changed my chart code, and I actually got what I wanted.  Mostly.

The Code:

@(Html.Kendo().Chart<ClientBreakdown>()
    .Name("chartAll")
    .Title("Breakdown of All Client States")
    .Legend(l => l.Position(ChartLegendPosition.Bottom))
    .SeriesDefaults(sd => sd.Bar().Spacing(5).Stack(true))
    .Series(s =>
    {
        s.Bar(m => m.Active).Name("Active").Color("#009933");
        s.Bar(m => m.Count).Name("Total").Color("#ff0000");
    })
    .CategoryAxis(c => c.Categories(m => m.State).Labels(true))
    .DataSource(ds => { ds.Read(r => r.Action("ClientsByState", "Clients").Type(HttpVerbs.Get)); })
    .Tooltip(tp => tp.Visible(true).Template("#=category# - #=value#"))
    .ChartArea(ca => ca.Height(800))
)

 

Also attached is a screen shot.

So why is it only mostly what I want? The bars themselves are very thin, I'd like them thicker.  And I'd really rather this was horizontal as opposed to vertical.

[Joe]

I wish I could just go back and edit messages...

Ok, the height increases if the overall ChartArea becomes larger.  SO I guess I can deal with that.  But how do I get the bars to display vertically (up and down) instead of side by side?

[Daniel]

Hello,

Besides increasing the chart size you can make the bars ticker by decreasing the gap. To show vertical bars, you should use column series instead of bar.

Regards,
Daniel
Telerik by Progress