Line Chart Categories Not Displaying Correctly

[xeshan]

Hello,

 

I'm trying to get my chart to display correctly. However, it seems the categories are not correct. Here is my code:

 

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

        .Name("applicationStepsByDay")

        .Legend(legend => legend.Visible(true))

        .SeriesDefaults(seriesDefaults =>

            seriesDefaults.Line().Style(ChartLineStyle.Smooth)

        )

        .CategoryAxis(axis => axis

            .Categories(Model.Categories)

            .MajorGridLines(lines => lines.Visible(false))

        )

        .Series(series =>

        {

            foreach (var s in Model.CDashBoardLineCounts)

            {

                 

                 series.Line(model => model.countofitems)
                           .Name(s.dashcolor)
                .CategoryField("dateofCItem");

 

            }

        })

        .ValueAxis(axis => axis.Numeric()

            .Labels(labels => labels.Format("{0}"))

            .Line(lines => lines.Visible(false))

        )

        .Tooltip(tooltip => tooltip

            .Visible(true)

            .Shared(true)

            .Format("{0}")

        )

)

 

 

public IActionResult Index()
        {

            CombinedDashBoard x = new CombinedDashBoard();
            x.CDashBoardLineCounts = GetAllLineChartDetails();
            x.Categories = new string[] { "Green", "Red", "Yellow" };

            return View(x);
        }

 

public class CombinedDashBoard
{

    public List<CDashBoardModifiedPieCounts> CDashBoardPieCounts { get; set; }

    public List<CDashBoardModifiedLineCounts> CDashBoardLineCounts { get; set; }

    public string[] Categories { get; set; }




}

public class CDashBoardModifiedLineCounts
{
    public string dashcolor { get; set; }
    public string CItemName { get; set; }

    public DateTime dateofCItem { get; set; }

    public int countofitems { get; set; }




}

 

 

I would like to get  a line in the chart for Red (that shows count of items that have the color red mapped to the dates), another line that shows all green items mapped to date per count and one for yellow.

 

Instead I'm getting the chart image attached  

 

Thank you for your time

[Tsvetina]

Hello Akera,

To display a line for each color with the data structure that you have, you need the Chart data to be grouped by the dashcolor field. However, this can happen only if the Chart is bound using a DataSource, instead of direct binding to the model:

@(Html.Kendo().Chart<LineCharts.Models.CDashBoardModifiedLineCounts>()
            .Name("applicationStepsByDay")
            .Legend(legend => legend.Visible(true))
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Line().Style(ChartLineStyle.Smooth)
            )
            .CategoryAxis(axis => axis
                .MajorGridLines(lines => lines.Visible(false))
            )
            .Series(series =>
            {

                series.Line(s => s.countofitems).CategoryField("dateofCItem");

            })
            .ValueAxis(axis => axis.Numeric()
                .Labels(labels => labels.Format("{0}"))
                .Line(lines => lines.Visible(false))
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Shared(true)
                .Format("{0}")
            )
            .DataSource(ds => {
                ds.Read("GetDashboardData", "Home");
                ds.Group(group => group.Add(m => m.dashcolor));
            })
)

The GetDashboardData method would look like this:

public IActionResult GetDashboardData() {
    List<CDashBoardModifiedLineCounts> data = GetAllLineChartDetails();
    return Json(data);
}

I prepared a small sample project using dummy data to demonstrate my suggestion. I am attaching it along with a screenshot of the result.

Regards,
Tsvetina
Progress Telerik

[xeshan]

Thank you Tsvetina for clarifying when to use datasource vs model.

Thanks to you - this is now working.

 

I have a quick question...Is there a way to change the line color to match what the category or line color actually is.

So, in your example, if dashcolor value is Red it is using a Green or so line color :)

I would like to force the line chart to use a line color of green, if the dashcolor value is green and the same for red and yellow.

 

@(Html.Kendo().Chart<DashBoardWebApp.Models.CDashBoardModifiedLineCounts>()
                                           .Name("applicationStepsByDay")
                                           .Legend(legend => legend.Visible(true))
                                           .SeriesDefaults(seriesDefaults =>
                                               seriesDefaults.Line()
                                               .Style(ChartLineStyle.Smooth)
                                               .ColorField("dashcolor")
                                               .Color("dashcolor")
                                       )
                                       .CategoryAxis(axis => axis
                                           .MajorGridLines(lines => lines.Visible(false))
                                           .Color("dashcolor")



                                       )
                                       .Series(series =>
                                       {

                                           series.Line(s => s.countofitems)
                                           .CategoryField("dateofCItem")
                                           .ColorField("dashcolor")
                                           .Color("dashcolor")
                                           ;


                                       })
                                       .ValueAxis(axis => axis.Numeric()
                                           .Labels(labels => labels.Format("{0}"))
                                           .Line(lines => lines.Visible(false))
                                           .Color("dashcolor")

                                   )
                                   .Tooltip(tooltip => tooltip
                                       .Visible(true)
                                       .Shared(true)
                                       .Format("{0}")
                                   )
                                   .DataSource(ds =>
                                   {
                                       ds.Read("GetDashboardData", "Home");
                                       ds.Group(group => group.Add(m => m.dashcolor));
                                   })
   )

 

 

Your input appreciated.

Thank you

[Tsvetina]

Hi Akera,

You can do this using the DataBound event of the Chart to set the series color to be the same as the current series name, which by default equals the group value:

.Events(e=>e.DataBound("onDataBound"))

function onDataBound(){
    var series = this.options.series;
    for(var i = 0; i < series.length; i++){
        series[i].color = series[i].name;
    }
}

Regards,
Tsvetina
Progress Telerik

[xeshan]

Thank you Tsvetina - the onDataBound fn did the trick.