Basic example please

6 posts, 0 answers
  1. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 02 Nov Link to this post

    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?

  2. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 02 Nov Link to this post

    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.

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 02 Nov Link to this post

    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?
  5. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 02 Nov Link to this post

    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.

  6. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 02 Nov in reply to Joe Link to this post

    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?

  7. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 04 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready