Highstock different time value interval

Question

I have a WebService that return a list of Chart. This is the structure of my class diagram:

public class Point
{
    public string Date { get; set; }
    public float Value { get; set; }
}

public class Serie
{
    public string Port { get; set; }
    public string Name { get; set; }
    public string Unit { get; set; }
    public List<Point> Data { get; set; }
}

public class Chart
{
    public string Unit { get; set; }

    public List<Serie> Series { get; set; }
}

public List<Chart> charts;

I use HighStock, in a js script to display all my charts from my list of chart. I want group my series by unit and for each unit a create a new yAxis to display the same unit series (see the images below).

This is the code from the js file:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/Channels",
            data: "{}",
            dataType: "json",
            success: function (Charts) {
                document.getElementById("debug").innerHTML = Charts.d;
                Charts = Charts.d;

                var margin = 40,
                top = 100,
                height = 160,
                count = 0;

                // Generals options for chart
                var options = {
                    credits: { enabled: false },
                    chart: {
                        renderTo: chart,
                        zoomType: 'x',
                        alignTicks: false
                    },
                    legend: {
                        enabled: true
                    },
                    title: {
                        text: 'Values'
                    },
                    tooltip: {
                        valueDecimals: 2,
                        shared: true
                    },
                    xAxis: {       
                        ordinal: false
                    },
                    yAxis: [],
                    series: []
                };

                // Go through Charts
                for (var i in Charts) {

                        // Infos for the yAxis of the serie
                        // -------------------
                        options.yAxis.push({
                            title: {
                                text: "[" + Charts[i].Unit + "]"
                            },
                            labels: {
                                x: 30,
                                y: 4,
                                align: "right",
                                format: '{value} ' + Charts[i].Unit
                            },
                            offset: 0,
                            top: top,
                            height: height,
                            opposite: true
                        });

                        // Go through Series in a Charts
                        for (var j in Charts[i].Series) {


                            // Infos for the serie
                            // -------------------
                            var data = [];

                            // Go through Data in Series of a Charts
                            for (var k in Charts[i].Series[j].Data) {
                                var point = new Array(new Date(Charts[i].Series[j].Data[k].Date).getTime(), Charts[i].Series[j].Data[k].Value);
                                data.push(point);
                            }// End: Go through Data in Series of a Charts

                            count = Number(i);

                            // Add a serie and these attributes
                            options.series.push({
                                name: Charts[i].Series[j].Name,
                                data: data,
                                tooltip: {
                                    valueSuffix: ' ' + Charts[i].Series[j].Unit,
                                    valueDecimals: 3
                                },
                                yAxis: count
                            });

                        }// End: Go through Series in a Charts

                        count++;
                        top += height + margin;

                }// End: Go through Charts

                options.chart.height = top + 190;

                Highcharts.StockChart(options);
            },
            error: function (xhr, thrownError) {
                //alert("Error : " + xhr.status + "\nMessage : \n" + xhr.responseText);
                document.getElementById("debug").innerHTML = "Error : " + xhr.status + "\nMessage : \n" + xhr.responseText;
            }
        });
    });
</script>

If I run the code:

Blank page no chart

The error that I have is:

Uncaught TypeError: Cannot read property 'clientX' of undefined -> highstock.js:177

and also (sometime) this error:

Uncaught TypeError: Cannot read property 'info' of undefined -> highstock.js:342 (not sur about the #line)

If I remove the serie with the different interval or if a unselect the Vbatt serie (the serie with the different interval) it works:

All my charts are displayed

I spent a lot of time on internet and StackOverflow to find an issue for my problem but... nothing...

Edit:

-> What is the max serie that we can plot on the same chart?
-> What is the max point that we can plot on the same chart?

Thank you in advance for your feedback.

Best regards,

Steeve

Problem solved!

The problem was that the epoch data send by my webservice was in secondes and HighStock need to have millisecondes.

Answer 1

Problem solved!

The problem was that the epoch data send by my webservice was in secondes and HighStock need to have millisecondes.