Stock Chart Navigator showing no result when using JSON respone within

10 posts, 0 answers
  1. Thomas Luck
    Thomas Luck avatar
    38 posts
    Member since:
    Jun 2006

    Posted 10 Sep 2013 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Sep 2013 Link to this post

    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
    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. Thomas Luck
    Thomas Luck avatar
    38 posts
    Member since:
    Jun 2006

    Posted 11 Sep 2013 Link to this post

    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
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 13 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Thomas Luck
    Thomas Luck avatar
    38 posts
    Member since:
    Jun 2006

    Posted 18 Sep 2013 Link to this post

    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
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 20 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Thomas Luck
    Thomas Luck avatar
    38 posts
    Member since:
    Jun 2006

    Posted 01 Oct 2013 Link to this post

    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!
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 02 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Nikita
    Nikita avatar
    5 posts
    Member since:
    Nov 2015

    Posted 10 Dec 2015 Link to this post

    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>

  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 12 Dec 2015 Link to this post

    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
     
    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