Line chart with multiple data points in a category

[Chris]

I am trying to display data read in from sensors, thousands of data points read in over the course of days, and I cannot figure out a way to build a chart that isn't a mess of lines and category axis labels.

 I make an API call to my server to get an array of { Datum: decimal, Time: Date }. I am looking to create a line chart where the category axis is divided so that multiple data points are shown each category so i don't have data points lost to aggregation, something like this the attached image.

 For reference, what I have so far:

$("#chart").kendoChart({
                title: {
                    text: "Test Chart - Client Side"
                },
                legend: {
                    position: "left"
                },
                seriesDefaults: {
                    style: "normal",
                    type: "line"
                },
                series: [{
                    name: "Data",
                    data: formatedData,
                    field: "Datum",
                    categoryField: "Time",
                    markers: {
                        visible: false
                    },
                    tooltip: {
                        visible: true,
                        template: "#: dataItem.Datum # @@ #: dataItem.Time #"
                    }
                }],
                categoryAxis: {
                    type: "date",
                }
            })

Any help is appreciated, Thanks.

[Iliana Dyankova]

Hi Chris,

Displaying multiple points in a single category is not supported by Kendo UI Chart. What I would suggest is using ScatterLine Chart instead.

Regards,
Iliana Nikolova
Telerik

 

 

[Chris]

Thanks for the reply Iliana.

I had looked into ScatterLine for this as well but I was not able to get it to plot the data I'm passing in. I'm trying to familiarize myself with Telerik Charting so I am trying a variety of approaches and for the ScatterLine I have a .NET MVC implementation

@for (int i = 0; i < Model.Length; ++i)
{
    ChartViewModel model = Model[i];
    @(Html.Kendo().Chart()
                    .Name(string.Format("server-side-chart-{0}", i + 1))
                    .Title(model.Title)
                    .Series(s =>
                    {
                        s.ScatterLine(model.DataSetJson)
                        .Name("Data")
                        .XField("Time")
                        .YField("Datum");
                    })
        )
}

model.DataSetJson is a serialized array of these guys

public class ChartData
    {
        public double Datum { get; set; }
        public DateTime Time { get; set; }

        public ChartData(double datum, DateTime time)
        {
            Datum = datum;
            Time = time;
        }
    }

I have attached what that call produces, and here is the HTML generated by the server side code

<div class="k-chart" id="server-side-chart-1"></div>
<script>
    jQuery(function() {
        jQuery("#server-side-chart-1").kendoChart(
            {
                "title":
                    {
                        "text":"Server Side Test Data - Example 0"
                    },
                "series":
                    [
                        {
                            "name":"Data",
                            "type":"scatterLine",
                            "xField":"Time",
                            "yField":"Datum",
                            "data":"[{\"Datum\":0.11721521016080641,\"Time\":\"2015-12-10T11:42:26.7151554-05:00\"},{\"Datum\":0.60957694407998442,\"Time\":\"2015-12-10T11:43:26.7151554-05:00\"},{\"Datum\":0.040601507313829617,\"Time\":\"2015-12-10T11:44:26.7151554-05:00\"},{\"Datum\":0.58119624973330475,\"Time\":\"2015-12-10T11:45:26.7151554-05:00\"},{\"Datum\":0.72930259524346452,\"Time\":\"2015-12-10T11:46:26.7151554-05:00\"},{\"Datum\":0.068180671459148023,\"Time\":\"2015-12-10T11:47:26.7151554-05:00\"},{\"Datum\":0.068341162553215942,\"Time\":\"2015-12-10T11:48:26.7151554-05:00\"},{\"Datum\":0.36065156588361208,\"Time\":\"2015-12-10T11:49:26.7151554-05:00\"},{\"Datum\":0.064343433391462743,\"Time\":\"2015-12-10T11:50:26.7151554-05:00\"},{\"Datum\":0.83956405699232783,\"Time\":\"2015-12-10T11:51:26.7151554-05:00\"},{\"Datum\":0.88274928735697145,\"Time\":\"2015-12-10T11:52:26.7151554-05:00\"},{\"Datum\":0.34809290447649216,\"Time\":\"2015-12-10T11:53:26.7151554-05:00\"},{\"Datum\":0.47235734736190987,\"Time\":\"2015-12-10T11:54:26.7151554-05:00\"},{\"Datum\":0.43914321457927263,\"Time\":\"2015-12-10T11:55:26.7151554-05:00\"},{\"Datum\":0.98524609533382868,\"Time\":\"2015-12-10T11:56:26.7151554-05:00\"},{\"Datum\":0.47281545655467339,\"Time\":\"2015-12-10T11:57:26.7151554-05:00\"},{\"Datum\":0.95523858627082714,\"Time\":\"2015-12-10T11:58:26.7151554-05:00\"},{\"Datum\":0.66900691514322852,\"Time\":\"2015-12-10T11:59:26.7151554-05:00\"},{\"Datum\":0.57663615633576926,\"Time\":\"2015-12-10T12:00:26.7151554-05:00\"},{\"Datum\":0.90887470166612172,\"Time\":\"2015-12-10T12:01:26.7151554-05:00\"}]"
                        }
                    ]
            });
    });
</script>

I am guessing ScatterLine doesn't support DateTime? Or is it possible that the DateTime format you see in the attached file is incorrect? As I said, I'm displaying data that has been read in from sensors, so I have multiple data points per second to display. So if only Dates (as shown in the example you linked me to) are all that ScatterLine supports the Charts I generate are going to have some serious data loss - thousands of thousands of points lost.  

Thanks again for your help.

[Chris]

A note I forgot to mention, the data I show in my previous post is made up. I know I said I have need to display multiple data points per second, but for learning how to use the telerik chart controls I went with 1 data point per minute to make it a bit easier for me to manage while I learn.

 

Thanks.

[Iliana Dyankova]

Hi Chris,

To display dates in Scatter Chart you should set xAxis type "date":

//....
.XAxis(x=>x.Date())

For more detailed information take a look at this documentation topic.

Regards,
Iliana Nikolova
Telerik

 

 

[Chris]

Still no luck.

New razor code

@for (int i = 0; i < Model.Length; ++i)
{
    ChartViewModel model = Model[i];
    @(Html.Kendo().Chart()
                    .Name(string.Format("server-side-chart-{0}", i + 1))
                    .Title(model.Title)
                    .Series(s =>
                    {
                        s.ScatterLine(model.DataSetJson)
                        .Name("Data")
                        .XField("Time")
                        .YField("Datum");
                    }).XAxis(x => x.Date())
        )
}

New Output

<div class="k-chart" id="server-side-chart-1"></div>
<script>
    jQuery(function() {
        jQuery("#server-side-chart-1").kendoChart(
            {"title": {"text":"Server Side Test Data - Example 1"},
            "series":[
                {
                    "name":"Data",
                    "type":"scatterLine",
                    "xField":"Time",
                    "yField":"Datum",
                    "data":"[{\"Datum\":0.078867766111561918,\"Time\":\"2015-12-14T07:45:14.1042711-05:00\"},{\"Datum\":0.87464046798396877,\"Time\":\"2015-12-14T07:46:14.1042711-05:00\"},{\"Datum\":0.53331139801689953,\"Time\":\"2015-12-14T07:47:14.1042711-05:00\"},{\"Datum\":0.55539633918339215,\"Time\":\"2015-12-14T07:48:14.1042711-05:00\"},{\"Datum\":0.34516802353093773,\"Time\":\"2015-12-14T07:49:14.1042711-05:00\"},{\"Datum\":0.81819447354329489,\"Time\":\"2015-12-14T07:50:14.1042711-05:00\"},{\"Datum\":0.30015458785935983,\"Time\":\"2015-12-14T07:51:14.1042711-05:00\"},{\"Datum\":0.82068903922135428,\"Time\":\"2015-12-14T07:52:14.1042711-05:00\"},{\"Datum\":0.86474505619366893,\"Time\":\"2015-12-14T07:53:14.1042711-05:00\"},{\"Datum\":0.17826173835353076,\"Time\":\"2015-12-14T07:54:14.1042711-05:00\"},{\"Datum\":0.99667818890729831,\"Time\":\"2015-12-14T07:55:14.1042711-05:00\"},{\"Datum\":0.96570240518343742,\"Time\":\"2015-12-14T07:56:14.1042711-05:00\"},{\"Datum\":0.018499449369730171,\"Time\":\"2015-12-14T07:57:14.1042711-05:00\"},{\"Datum\":0.68098019607410776,\"Time\":\"2015-12-14T07:58:14.1042711-05:00\"},{\"Datum\":0.22984190854702233,\"Time\":\"2015-12-14T07:59:14.1042711-05:00\"},{\"Datum\":0.49624108499672315,\"Time\":\"2015-12-14T08:00:14.1042711-05:00\"},{\"Datum\":0.29283652701081547,\"Time\":\"2015-12-14T08:01:14.1042711-05:00\"},{\"Datum\":0.42283475744670013,\"Time\":\"2015-12-14T08:02:14.1042711-05:00\"},{\"Datum\":0.16208245892174655,\"Time\":\"2015-12-14T08:03:14.1042711-05:00\"},{\"Datum\":0.56615602158296663,\"Time\":\"2015-12-14T08:04:14.1042711-05:00\"}]"
                }],
                "xAxis":[{"type":"date"}]
            }
        );
    });
</script>

Same display result (attached).

 I also read through the link you provided and I'm not sure what I was supposed to find there. It appears to contain some customization options for how data in a scatter line might be displayed. I need data to be displayed first before customizing it's display.

All I am doing for this little exercise is generating 20 random double values, assigning them datetimes 1 minute apart, and attempting to graph it. Generating a working example, if it's possible, would probably be more helpful in helping me find a solution.

Thanks.

[Chris]

Adding the attached display result from my previous post since the last one apparently decided to ignore it.

[Iliana Dyankova]

Hi Chris,

I used the provided JavaScript output and believe the issue is caused by the escape characters (\) in the Datum and Time fileds. Also, series.data should be passed as an array, not string. Fixing the suggestions above makes the chart correctly rendered (dojo example).

Regards,
Iliana Nikolova
Telerik