Stock Chart Navigator showing no result when using JSON respone within

[Thomas Luck]

Hi Telerik-Team,

I want to implement a Stock chart in a Frontend(WebForm .aspx) like your "Virtualization"-Demo (http://demos.kendoui.com/dataviz/financial/virtualization.html).

In my implementation, the Navigator should give me the possibility to choose a from-to range, that should be displayed more detailed in the top chart.
--------------------------------------
1. By calling a handler(via Ajax), the Frontend  get a JSON response (Mulitdimension array). -->JSON.jpg
2. the JSON is displayed correct in the top chart.
3. BUT the navigator is not showing any graph! :-/--->StockchartScreenshot.jpg

Do you see any wrong coding by me or know what could be the cause?
P.s.: When I`m using the newst (.716) version of KendoUI, the top graph is not displayed too.
------------------------------------

Here is a Code snippet.

1. After onClick() the CallHandler funtion is called
2. when success-->OnComplete() the data are set to the stocks var and the chart is created.
3. the series is displayed but not the navigator series.

<script>
        $(document).ready(function () {
            createChart();
            // create DatePicker from input HTML element
            $("#datepicker").kendoDatePicker({
                culture: "en-GB",
                format: "MM/dd/yyyy"
            });
        });

        function CallHandler() {
            $.ajax({
                url: "Handler/Handler.ashx",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { 'date': document.getElementById("datepicker").value },
                responseType: "json",
                success: OnComplete,
                error: OnFail
            });
            return false;
        };
        var stocks = [[], [],[]];
        function OnComplete(result) {
            stocks = result;
            createChart();
            document.getElementById("testfeld").innerHTML = "";
        }

        function OnFail() {
            document.getElementById("testfeld").innerHTML = "Some error has occured";
        }

        function createChart() {
            $("#stock-chart").kendoStockChart({
                title: {
                    text: "Carna v 0.1"
                },
                legend: {
                    visible: true,
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                series: [{
                    name: "line1",
                    type: "line",
                    width: 1,
                    color: "Orange",
                    data: stocks[1],
                    markers: { visible: false }
                },
                    {
                        name: "line2",
                        type: "line",
                        width: 1,
                        color: "Green",
                        data: stocks[2],
                        markers: { visible: false }
                    }
                ],

                tooltip: {
                    visible: true,
                    format: "{0}",
                    template: "#= series.name #: #= value #"
                },
                valueAxis: {
                    labels: {
                        format: "{0}"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },

                dateField: stocks[0],
                categoryAxis: {
                    step: 1,
                    categories: stocks[0],
                    majorGridLines: {
                        visible: true
                    },
                    field: stocks[0],
                    type: "Category",
                    baseUnit: "minutes",
                    labels: {
                        step: 10,
                        font: "6.25pt Verdana",
                        rotation: -45
                    },
                    title: {
                        text: "Time",
                        font: "6.25pt Verdana"
                    }

                },
                navigator: {
                    series: [{
                        type: "line",
                        data: stocks[1],
                        color: "Orange",
                        name: "line1 overview",
                        visibleInLegend: true
                    },
                    {
                        type: "line",
                        data: stocks[2],
                        color: "green",
                        name: "line2 overview",
                        visibleInLegend: true
                    }]
                }
            });
        }
    </script>

Thank you.

Regards

[Iliana Dyankova]

Hello Thomas,

I believe setting null to navigator dateField should help to resolve the issue:

$("#stock-chart").kendoStockChart({
  //....
  navigator: {
     dateField: null,
     //....
  }
});

Regards,
Iliana Nikolova
Telerik

[Thomas Luck]

Hi Iliana,
thank you for answering that fast.
But I'm sorry.... I tried this ...

navigator: {
                   dateField: null,
                    series:
                        {
                        type: "line",
                        data: stocks[1],
                        color: "Orange",
                        name: "line1 overview",
                        visibleInLegend: true
                    }

...but nothing changes.
Is there any other trick I could try?

Thanks a lot
Regards

[Iliana Dyankova]

Hi Thomas,

I am sorry to hear the suggested approach does not help. As another option I can suggest you setting navigator.categoryAxis.categories:

//....
navigator: {
   categoryAxis: {
       categories: stocks[0]
   }
   //....
}

Regards,
Iliana Nikolova
Telerik

[Thomas Luck]

Hi Iliana,

thanks for that nice option.
But it also does not make the graphs in the navigator visible.

Please please let me know if you have some other ideas.

Thanks
&
Regards

[Iliana Dyankova]

Hi Thomas,

I tried to reproduce your scenario and after setting navigator.categoryAxis.categories navigator series are rendered as expected. For your convenience here is a test jsBin example - could you please check it (feel free to modify it) and let me know if I am missing something? Thank you in advance for you cooperation.

Regards,
Iliana Nikolova
Telerik

[Thomas Luck]

Hey Iliana ,

thank you!...this solution works fine!
IMO I do not set the

'type: "date",'

in the code, so it did not work.

Just another question:
- Is there a solution to display not only the data each minute?...e.g. maybe very 30 seconds?

Regards
&
Thank you very much!

[Iliana Dyankova]

Hello Thomas,

I am glad to hear the issue is already resolved. As for your new question, in order to achieve this you could set baseUnit "seconds" and baseUnitStep 30.

Regards,
Iliana Nikolova
Telerik

[Nikita]

Hello, 

I would like to create a stock chart binding json data, unfortunately no results are being shown. Please let me know where am I going wrong. I have attached a screen shot of the output I have right now.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../telerik.kendoui.professional.2015.3.1111.trial/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="../telerik.kendoui.professional.2015.3.1111.trial/styles/kendo.default.min.css" />

    <script src="../telerik.kendoui.professional.2015.3.1111.trial/js/jquery.min.js"></script>
    <script src="../telerik.kendoui.professional.2015.3.1111.trial/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="stock-chart"></div>
    </div>
    <script>
        function createChart() {
            $("#stock-chart").kendoStockChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "../Scripts/boeing-stock.json", 
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                Date: { type: "date" }
                            }
                        }
                    }
                },
                title: {
                    text: "The Boeing Company\nNYSE:BA"
                },
                dateField: "Date",
                series: [{
                    type: "candlestick",
                    openField: "Open",
                    highField: "High",
                    lowField: "Low",
                    closeField: "Close"
                }],
                categoryAxis: {
                    labels: {
                        rotation: "auto"
                    }
                },
                navigator: {
                    series: {
                        type: "area",
                        field: "Close"
                    },
                    select: {
                        from: "2009/02/05",
                        to: "2011/10/07"
                    },
                    categoryAxis: {
                        labels: {
                            rotation: "auto"
                        }
                    }
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

[Iliana Dyankova]

Hi Nikita,

It is accepted to post different questions in separate threads. As this question is not related to the initial one in this thread I would like to ask you to open a new conversation for the issue. Thank you in advance for your understanding and cooperation.

Regards,
Iliana Nikolova
Telerik