Sparkline chart in a grid column

7 posts, 0 answers
  1. Eliezer
    Eliezer avatar
    1 posts
    Member since:
    Dec 2012

    Posted 28 Apr 2013 Link to this post

    I am trying to put a sparkline bullet chart in one column of my grid, and I can't figure out how to pass in the data that is currently in my grid. Do you have an example of using a sparkline in a grid in this manner?

    Here is what I currently have. However, 1) I had to hardcode the data as an example, since I have not yet figured out how to pass in the data, and 2) it doesn't work, as it's complaining there is a runtime error of an Invalid template

    @(Html.Kendo().Grid<LabResult>(Model.LabResults)
        .Name("grLabResult")
        .Pageable()
        .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
        .Columns(columns => {
            columns.Bound(a => a.Name);
            columns.Bound(a => a.Value).ClientTemplate("#= Value # #= Unit #");
            columns.Bound(a => a.Range);
            columns.Bound(a => a.Unit).Visible(false);
            columns.Bound(a => a.MaxValue).ClientTemplate(
                Html.Kendo().Sparkline()
                .Name("varSpark_#=LabResultId#")
                .Type(SparklineType.Bullet)
                .Series( series => series.Bullet(new double[]{70}))
                .ValueAxis(axis => axis
                    .Numeric()
                    .Min(25)
                    .Max(75)
                    .PlotBands(bands =>
                        {
                            bands.Add().From(0).To(25).Color("#2890cc").Opacity(0.6);
                            bands.Add().From(25).To(75).Color("#2890cc").Opacity(0.8);
                            bands.Add().From(75).To(100).Color("#2890cc").Opacity(0.6);
                        })
                    )
                .ToClientTemplate()
                .ToHtmlString()
            );
            })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(a => a.LabResultId);
            })
            .Events(events => events.Error("error_handler"))
            .Sort(sorting => sorting.Add("Name"))
        )
    )
    This was my attempt to pass in the data, which failed:
    .Series( series => series.Bullet(new double[]{Double.Parse("#=Value#")}))
    .ValueAxis(axis => axis
                .Numeric()
                .Min(Double.Parse("#=MinValue#"))
                .Max(Double.Parse("#=MaxValue#"))
                .PlotBands(bands =>
                {
                    bands.Add().From(0).To(Double.Parse("#=MinValue#")).Color("#2890cc").Opacity(0.6);
                    bands.Add().From(Double.Parse("#=MinValue#")).To(Double.Parse("#=MaxValue#")).Color("#2890cc").Opacity(0.8);
                    bands.Add().From(Double.Parse("#=MaxValue#")).To(100).Color("#2890cc").Opacity(0.6);
                })
                )
        
    Thanks for your help!
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 Apr 2013 Link to this post

    Hello Eliezer,

    I posted a reply in the support ticket that you opened. For reference I will paste it here.

    Feel free to continue our conversation here or in the support ticket that you opened.

    -------------------------------------------------------------------------------------------------------------------------


    Using the Kendo MVC wrappers wrappers has its limitations - you cannot create the chart dynamically based on the data in the Grid.
    If you change the Chart widget to be initialized with JavaScript you can manage to achieve your goal. 

    Basically the idea is to use the dataItem method and the dataBound event  of the Grid to retrieve the record for a specific record and use it to pass the data for the chart widget.

    To demonstrate what I mean please check the following demo I created:

    http://jsbin.com/oletef/7/edit


    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Nick Gerne
    Nick Gerne avatar
    3 posts
    Member since:
    Sep 2011

    Posted 17 Oct 2013 Link to this post

    How would you do this in the MVC wrapper version?
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Oct 2013 Link to this post

    Hello,

    As I explicitly covered in my previous post this is not possible with the MVC wrappers.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Will
    Will avatar
    4 posts
    Member since:
    Sep 2013

    Posted 14 May 2015 in reply to Petur Subev Link to this post

    Is this still not possible with the Kendo helpers?

    I've tried it with a client template and javascript, returning the html of the chart, but the lines on my chart are missing.

  6. Will
    Will avatar
    4 posts
    Member since:
    Sep 2013

    Posted 14 May 2015 in reply to Will Link to this post

    What about a Template rather than ClientTemplate?

    I tried something like: 
    Html.Kendo().Chart<ForecastProduction>(@item.ForecastProductions)

  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 18 May 2015 Link to this post

    Hello Will,

     

    As my colleague Peter Subev explained you could created chart or any other widget inside column template. See the following article - How do I use a Kendo UI widget inside a Grid client column template?

     

    However you will not be able to dynamically initialize, as this was the original question in this thread., these widgets. They are defined on server and the column templates are initialized on client while the Grid widget is initialized. Thus if you need to create them based on the data in the row in which they reside, you should be using JavaScript for their initialization.

     

    Regards,
    Nikolay Rusev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top