Line chart with multiple data points in a category

8 posts, 1 answers
  1. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 08 Dec 2015 Link to this post

    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.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Dec 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 10 Dec 2015 in reply to Iliana Nikolova Link to this post

    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.

  5. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 10 Dec 2015 in reply to Chris Link to this post

    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.

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 12 Dec 2015 Link to this post

    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!
     
  7. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 14 Dec 2015 in reply to Iliana Nikolova Link to this post

    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.

  8. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 14 Dec 2015 in reply to Chris Link to this post

    Adding the attached display result from my previous post since the last one apparently decided to ignore it.
  9. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 16 Dec 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready