Stockchart: Line and Volume in same pane

11 posts, 2 answers
  1. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 29 Jul Link to this post

    Hi,

    the example http://demos.telerik.com/aspnet-mvc/financial/panes show how to plot the volume in a second pane.

    How can I plot Line + Volume in one pane? Similar: http://finance.yahoo.com/chart/aapl

    Peter

  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 02 Aug Link to this post

    Hi Peter,

    You can simply remove the panes - http://dojo.telerik.com/UBaNe

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 05 Aug Link to this post

    Hi Danail,

    Thank you, it works in a pane.

    But the Volume Bar Chart should only in the lower partt (~30%). I can set the maximum of the axis to a value.

    But how can I set it  automatic to 30%  of Max of Volme data?

    Also the navigator time frame is set static to

    select: {
                            from: "2009/02/05",
                            to: "2011/10/07"
                        }

    Can I set it

    to: Maximum Date of Data

    from: to -- 2 Months

    ?

     

    Regards,

    Peter

     

  5. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 05 Aug in reply to Peter Link to this post

    For the volumeAxis I modified a forum solution from Kendo Charts Minimum value for a Max of ValueAxis

    <script type="text/javascript">
    var initDefaults = kendo.dataviz.NumericAxis.fn.initDefaults;
    kendo.dataviz.NumericAxis.fn.initDefaults = function () {
         var defaults = initDefaults.apply(this, arguments);
         if (defaults.name == "volumeAxis ") {
             defaults.max = Math.ceil(defaults.max * 3 / 500) * 500; //30% of max & rund up to 500
             defaults.min=0
             defaults.majorUnit = defaults.max / 5; //5 ticks
         }
          return defaults;
     };
    </script>

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 08 Aug Link to this post

    Hi Peter,

    You can use the select method of the navigator in order to set the to/from values.

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 08 Aug in reply to Danail Vasilev Link to this post

    Yes I know,

    but how can I get the maximum date maxdate of the stock dataset, so I can write to set the navigator to the last month of data

    select: {
                           from: maxdate.setMonth(maxdate.getMonth() - 1),
                           to: lastdate
                        }

  8. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 08 Aug in reply to Peter Link to this post

    would be nice  the forum has an edit option. The code:

    select: {
        from: maxdate.setMonth(maxdate.getMonth() - 1),
        to:   maxdate
        }

  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 10 Aug Link to this post

    Hello Peter,

    To select all the data you can try to set a very small and very large values for the from/to properties. If you want, however, to get the min/max dates you can try the following:
         - Sort the data source by the date field:
    $("#stock-chart").data("kendoStockChart").dataSource.sort({ field: "Date", dir: "asc" })
         - Get the min/max values for the date:
    var min = $("#stock-chart").data("kendoStockChart").dataSource.view()[0].Date;
    var max = $("#stock-chart").data("kendoStockChart").dataSource.view()[$("#stock-chart").data("kendoStockChart").dataSource.view().length-1].Date;


    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 10 Aug in reply to Danail Vasilev Link to this post

    Hello Danail,

    thank you. I  tested also dataSource.view() but the values are not sorted.
    And I didn't found in the Kendo API documentaion dataSource the  method sort({ field: "Date", dir: "asc" })

    The docu is every poor:
    dataSource - Object
    DataSource configuration or instance.

    Which object? With google I found kendo.data.DataSource . A link would be very useful.

    Regards,

    Peter

     

  11. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 11 Aug Link to this post

    Hi Peter,

    Did you try the provided sample because it works properly on my side For example by executing it over this demo - http://demos.telerik.com/kendo-ui/financial/index

    Regarding the sort method I had already provided a link to it in my previous post - http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sort

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 11 Aug in reply to Danail Vasilev Link to this post

    Yes, I found it. It would be helpfull if there is a link from

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/stock-chart#configuration-dataSource

    dataSource Object
    DataSource configuration or instance.

    to docs.telerik.com/kendo-ui/api/javascript/data/datasource

    Peter

     

     

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready