Link multiple series to multiple arrays of data on the same chart.

[Sharon Eden]

Hi,

I have a line chart that displays the medications given to a patient. Each medication is represented by a single series. My model contains a list of array (server bind or datasource, doesn’t really matters), each array
represent a medication/series data.

I would like to have something like this:
Series 1 use List[0],  Series2 use List[1], Series 3 use List[2],…

I tried to do it but couldn’t find a way to define the value
member to bound to. I thought that maybe this (http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/ChartSeriesFactory#methods-Line%28System.Collections.IEnumerable%29)
could work, but again, how do you define the value member?

My model is as follows:
MedicationChartEntry –a specific data point (represents a medication taken per day).
MedicationChartData.MedicationEntries – a list/array of MedicationChartEntry items (represents a specific medication given to a patient during a period).
ReDSChartData.Medications – a list/array of MedicationEntries (represent all the medications given to a patient)

public class MedicationChartEntry
{
    public string Name { get; set; }
    public int VerticalIndex { get; set; }
    public float? Dose { get; set; }
    public DateTime? Date { get; set; }
    public string DateFormatted { get; set; }
    public bool HasMarker { get; set; }
}

public class MedicationChartData
{
    public string MedicationName { get; set; }
    public List<MedicationChartEntry> MedicationEntries { get; set; }
}

public class ReDSChartData
{
    public float?[] Fluids { get; set; }
    public float?[] Weights { get; set; }
    public float?[] BNPs { get; set; }
    public string[] Dates { get; set; }
    public List<MedicationChartData> Medications { get; set; }
}

I am looking for something like this:

<div class="chart-wrapper">
@(Html.Kendo().Chart<SensibleMedical.EDC.Models.MedicationChartEntry>(Model.ReDSChartData.Medications)
    .Name("Medications")
    .Title("Medications")
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
    .Series(series =>
    {
        series
            .Line(Model.ReDSChartData.Medications[0].MedicationEntries)
            .Color("#0098ee")
            .Axis("Dose");

        series
            .Line(Model.ReDSChartData.Medications[1].MedicationEntries)
            .Color("#0098ee")
            .Axis("Dose");
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.DateFormatted)
        .Labels(labels => labels.Rotation(-45))
    )
    .ValueAxis(axis => axis
        .Numeric("Dose")
        .Color("#0098ee")
        .Min(0)
        .Max(70)
    )
)
</div>

Thank for the help,
Sharon.

[Sharon Eden]

I’ve manage to do it using grouped data (BTW, is this the way to do it?), but there is another problem that maybe related to that. Some of the grouped data doesn’t start on the same date the chart start, but the chart
displays it on the first category value (see attached screenshot). Another problem is that when I have values that are not  consecutive, the chart displays them on consecutive category values (for example, dates 24.4
and 26.4 are displayed with no day difference. And last thing, sometimes it displays following ticks with the same date.
It looks like I’m missing a major idea here. Do I have to create the entire series values (including gaps and before, after and in the middle) on the server side?

This is my  chart in the razor:

<div class="chart-wrapper">
@(Html.Kendo().Chart<SensibleMedical.EDC.Models.MedicationChartEntry>()
    .Name("Medications")
    .Title("Medications")
    .Theme("blueOpal")
    .ChartArea(chartArea => chartArea.Background("transparent")
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
    .DataSource(ds => ds
        .Read(read => read.Action("_GetChartData", "Trends", new { subjectkey = @Model.SubjectDiagnosis.SubjectKey }))
            .Group(group => group.Add(model => model.Name))
            .Sort(sort => sort.Add(model => model.Date).Ascending())
        )
    .Series(series =>
    {
        series
            .Line("VerticalIndex")
            .Axis("Dose")
            .MissingValues(ChartLineMissingValues.Gap)
            .GroupNameTemplate("#= group.value # (#= series.name #)")
            .Tooltip(t => t.Template("#= dataItem.Tooltip  # "))
            ;
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.DateFormatted)
        .Labels(labels => labels.Rotation(-45))
    )
    .ValueAxis(axis => axis
        .Numeric("Dose")
        .Color("#0098ee")
        .Min(0)
    )
    .Tooltip(true)
)
</div>

[Iliana Dyankova]

Hello Sharon,

I believe the issue is caused by different number of values for each of the groups. Please note that:

• By design on the categoryAxis of a grouped chart are displayed the categories for the first group;
• When using categorical charts (line, bar, column etc.) you need a matching set of data points (note the value can be null but the record needs to be presented in the data). I.e. you should have a data point for each of the of the medications for each of the dates. This is due to the fact that series.data is a simple array.

I recommend you checking this online demo which demonstrates a Grouped Kendo UI Chart.
 
Regards,
Iliana Nikolova
Telerik

[Sharon Eden]

Iliana thanks.

i didn't know that and it solved my problem.

P.S. for some reason i get error when i Mark your answer as answered so i marked this one instead..

Sharon.