Grouped Data Chart dataSource Model data

[Doug]

I'm following the dataviz -> bar_charts -> grouped_data example from Kendo.Mvc.Examples that groups by stock symbols and displays closing values by date.
I'm trying to do the same thing and group by sTypeLabel and display dValue by dtDate and it's not working.  I think it has something to do with the read.Action, but I'm not sure how to make it work.  My example is so simple.  When I look at the Kendo.Mvc.Examples it uses an action of  _StockData in Scatter_Charts controller, which I see returns Json(ChartDataRepository.StockData()).  Do I need to create an Action to do something?  Is there documentation on this somewhere?

First my Model class:
    public class TimeBasedTrendsGraphModel
    {
        public int ID { get; set; }
        public DateTime dtDate { get; set; }
        public string sTypeLabel { get; set; }
        public double dValue { get; set; }
    }

My controller:
   public class TimeBasedTrendsGraphController : Controller
    {
        private MOSTestDBContext db = new MOSTestDBContext();

        public ViewResult Index()
        {
            return View(db.TimeBasedTrendsGraph.ToList());
        }

I'm using MOSTestDBContext, which created the SQL Server database MOSTest, in table TimeBasedTrendsGraphModels, with rows:
ID dtDate sTypeLabel dValue
1 2012-01-01 00:00:00.000 CourtesyDriver 5
2 2012-01-01 00:00:00.000 VanDrivers 10
3 2012-01-01 00:00:00.000 LaneCapt 15
4 2012-01-01 00:00:00.000 LotMaint 20
5 2012-01-01 00:00:00.000 LotCoord 25
6 2012-01-01 00:00:00.000 ServiceTruck 5
This repeats for 2012-01-02, 2012-01-03, and 2012-01-04 with the same data, increasing ID's, for testing

My view (Index.cshtml):
@model IEnumerable<MvcApplication5.Models.TimeBasedTrendsGraphModel>

@{
    ViewBag.Title = "Index";
}

<h2>Time Based Trends Graph</h2>

<div class="chart-wrapper">
    @(Html.Kendo().Chart(Model)
        .Name("chart1")
        .Title("Time Based Trends")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("_TBTData", "TimeBasedTrendsGraph"))
            .Group(group => group.Add(model => model.sTypeLabel))
            .Sort(sort => sort.Add(model => model.dtDate).Ascending())
        )
        .Series(series =>
        {
            series.Column(model => model.dValue)
                .Name("value")
                .Stack(true)
                .GroupNameTemplate("#= group.value # (#= series.name #)");
        })
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .CategoryAxis(axis => axis
            .Categories(model => model.dtDate)
            .Labels(labels => labels.Format("MM/DD/YY"))
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}"))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}")
        )
    ) 

</div>

[T. Tsonev]

Hello,

Everything seems fine with your code. I've assembled it together and it appears to work as well. The changes I made are purely cosmetic:

• No need to return the records from the Index action, as they'll be loaded via the data source
• The format string should read DD/mm/yy

Attached is the project I tested with.

Regards,
Tsvetomir Tsonev
the Telerik team

[Doug]

Tsvetomir,

Thank you for posting code.
I added an action to get the data as follows:

        public ActionResult _TBTData()
        {
           
            var TBT = db.TimeBasedTrendsGraph
                .Select(a => new { ID = a.ID, dtDate = a.dtDate, sTypeLabel = a.sTypeLabel, dValue = a.dValue } );
   
            return Json(TBT);
        }

That is based on an example I found online.

I then copied your @(Html.Kendo().Chart(Model) code into my project so I know I have it right. 
It stacks per date now.  There are 4 stacked columns for 1/1 through 1/4, but there is a categoryAxis label for every date in the result set repeating per sTypeLabel.  It's also not formatted per the label format.
Is it supposed to use unique field data from the model?

Thanks,
Doug

[T. Tsonev]

Hello,

That seems odd. Can you please try specifying the type for the dtDate field in the DataSource schema:
   schema:{ 
        model: {
            fields: {
                dtDate: {
                    type: "date"
                }
            }
        }
    }

I can also test this locally if you send us the exact response returned from the server.

All the best,
Tsvetomir Tsonev
the Telerik team

[Doug]

Are you talking about something more granular that can be set in the view?  I have it set as DateTime, and have checked the database, which shows the field as datetime.
I have attached my entire project.  Perhaps the problem is easily noticable to you.
I have to other charts that are working ok for my testing.

Thanks.

Doug

[T. Tsonev]

Hello,

Thank you for sending the sample project.

It looks like the category axis doesn't switch to date mode after it receives the actual data. We'll investigate why this happens, but the problem is easily avoided by removing the initial binding to the model:

public class TimeBasedTrendsGraphController : Controller {
public ViewResult Index()
{
    ...

    // Old: return View(db.TimeBasedTrendsGraph.ToList());
    // New: (no initial data)
    return View();
}
}

I hope this helps.
 
Kind regards,
Tsvetomir Tsonev
the Telerik team