This is a migrated thread and some comments may be shown as answers.

Line chart with multiple data points in a category

7 Answers 1015 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 08 Dec 2015, 04:52 PM

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.

7 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 10 Dec 2015, 10:01 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chris
Top achievements
Rank 1
answered on 10 Dec 2015, 05:02 PM

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.

0
Chris
Top achievements
Rank 1
answered on 10 Dec 2015, 05:04 PM

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.

0
Iliana Dyankova
Telerik team
answered on 12 Dec 2015, 02:34 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chris
Top achievements
Rank 1
answered on 14 Dec 2015, 01:00 PM

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.

0
Chris
Top achievements
Rank 1
answered on 14 Dec 2015, 01:01 PM
Adding the attached display result from my previous post since the last one apparently decided to ignore it.
0
Accepted
Iliana Dyankova
Telerik team
answered on 16 Dec 2015, 08:59 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Chris
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Chris
Top achievements
Rank 1
Share this question
or