How to show two series that are not chronologically aligned?

[Robert]

I have a line chart that shows datetime-based values in a series. The Json data come gets loaded with an Ajax call. Now I want to show a second series (as a second line) in the same chart. As far as I can see from the examples, in order to get it up and working, the data needs to be present in this way:

- Date (Datetime)
- ValueA (Double)
- ValueB (Double)

The problem is: the data that I need to show is not synchronized, or, in other words, it is recorded independently at unregular intervals, so I don't have the required neat [Date,ValueA,ValueB] packets.
As a workaround I tried the following: in my controller, I fetch the data independently for each series into an object (DateTime Date,Double? ValueA, Double? ValueB). When fetching data for series A, I fill Date and ValueA, whereas ValueB is set to null (not 0). I do the same for series B (and set ValueA as null there). After that, I do a linq union on both collections and order them by date. Now I have both series in a (Date, ValueA, ValueB) model with a common DateTime-basis, where missing values in ValueA or ValueB are set to null, which can be interpolated in the chart. The problem is: the values do not get interpolated but are set to zero, which gives an awful lot of spikes, as there's almost no (Date, ValueA, ValueB) tripel where both values are set. Please see the attached images for clarification.

How can I manage to get this done? Is there a better way to do it?

Below is my JavaScript:

<script>

    function onSelectEnd(e) {
        var stockchart = $("#chart").data("kendoStockChart");
        var navigatorFrom = stockchart._navigator.options.select.from;
        var navigatorTo = stockchart._navigator.options.select.to;
        $("#txtFrom").text(navigatorFrom);
        $("#txtTo").text(navigatorTo);
    }

    function createChart() {
        $('#chart').kendoStockChart({
            dataSource: {
                transport: {
                    read: {
                        url: '/Archive/GetChartData?StationId=@ViewBag.StationId&DataPointId=@ViewBag.DataPointId',
                        dataType: 'json'
                    }
                }
            },
            selectEnd: onSelectEnd,
            title: {
                text: '@ViewBag.ChartTitle'
            },
            dateField: 'date',
            panes: [{
                title: 'Werte'
            }
            ],
            chartArea: {
                background: 'transparent'
            },
            valueAxes: [{
                name: 'T',
                visible: true,
                line: {
                    visible: true
                },
                labels: {
                    format: '{0} @ViewBag.Unit'
                }
                //,plotBands:
                //    [
                //         { from: -100, to: 0, color: "#C9D8FF" },
                //         //{ from: 0, to: 100, color: "#FFB8B8" }
                //    ]
            }],
            categoryAxis: {
                labels:
                    {
                        format: "HH:mm",
                        step: 2,
                        rotation: -90
                    },
                baseUnit: "fit",
                maxDateGroups: $("#chart").width() / 10,
                type: "date"
            },
            series: [
                {
                    axis: 'T',
                    type: 'line',
                    field: 'value',
                    missingValues: 'interpolate'
                },
                {
                    axis: 'T',
                    type: 'line',
                    field: 'value2',
                    missingValues: 'interpolate'
                }
            ],
            navigator: {
                series: {
                    type: 'area',
                    field: 'value',
                    missingValues: 'interpolate'
                },
                select: {
                    to: '@DateTime.Now.ToString("yyyy")/@DateTime.Now.ToString("MM")/@DateTime.Now.ToString("dd") @DateTime.Now.ToString("HH:mm")',
                    from: '@DateTime.Now.AddDays(-1).ToString("yyyy")/@DateTime.Now.AddDays(-1).ToString("MM")/@DateTime.Now.AddDays(-1).ToString("dd") @DateTime.Now.AddDays(-1).ToString("HH:mm")'
                },
                categoryAxis: {
                    labels: {
                        format: 'd. MMMM yyyy',
                        padding: { top: 10 }
                    }
                }

            }
        });
    }

    $(document).ready(function () {
        kendo.culture('@culture');
        setTimeout(function () {
            createChart();
            $('#chart').bind('kendo:skinChange', function (e) {
                createChart();
            });
        }, 1);
    });
</script>

[T. Tsonev]

Hello,

You did a great job with the server-side processing of the data. On a side-note, we're looking forward to remove the requirement for matching categories across series.

I did a quick test and null values seem to be interpolated correctly. My guess is that they get converted to 0 at some point, most likely during serialization.
Can you please check the network tab in Chrome, IE or FF to see if the JSON actually contains nulls where appropriate?

Another possibility is that the series aggregate returns 0. Although the default ("max") should ignore null values.

Regards,
Tsvetomir Tsonev
Telerik

[Robert]

Hi Tsvetomir,

thanks for your reply. It's good to hear that you're planning to support individual time bases for each series in the future. Meanwhile I checked the actual Json data in IE 10 + FF 22.0, both show real "null" values rather than "0", so the problem probably occurs somewhere else.

The interpolation of missing values usually worked well with a single series, that's why I tried the forementioned solution. With multiple series it does not seem to work properly.

Your JSbin sample unfortunately didn't work, so I rebuild it (here: http://jsfiddle.net/qpqjN/10/ ). It shows the chart area, but no lines.

Regards,
Rob

[T. Tsonev]

Hello,

The rebuilt sample appears to work correctly (both work for me, Chrome).

Have you tried binding it to some of the actual data? Does this replicate the problem?

Regards,
Tsvetomir Tsonev
Telerik