Maximize dataViz chart in mobile view

5 posts, 0 answers
  1. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 15 Jun 2012 Link to this post

    Hi, 
    it's probably very easy, but I can't get it working: How can I maximize a Dataviz chart inside a mobile view, so it is also responsive to change from  vertical to horizontal look?



  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 18 Jun 2012 Link to this post

    Hello Per,

    Indeed, this is not a trivial behavior and its implementation is quite complex. It would be best if you could send us your project or a similar one - this way I would be able to edit it and demonstrate how to achieve the desired behavior. Thank you in advance.  

    Regards,
    Iliana Nikolova
    the Telerik team
    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. Don
    Don avatar
    38 posts
    Member since:
    Oct 2006

    Posted 26 Jun 2012 Link to this post

    I am hoping then that this thread presumes it is possible to run a DataViz (chart) inside the mobile view?

    I have a chart working in a standard html page, and I have a mobile site working as well.
    But I can not integrate the two; I can not even paint the chart using an empty initializer: $("#chart").kendoChart();

    I assume I may have conflicting core .js  files, but I have been over them a few times now.

    anyway - this post gives me hope.
    maybe a sample is available somewhere?

    Thanks
    Don
  5. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 27 Jun 2012 Link to this post

    Hi Don,

    the following works for me:

    <div data-role="view" id="graph"  data-init="graphInit"  >
          <div id="chart" > </div>
    </div>
     
     
    <script>
    var app =  new kendo.mobile.Application($(document.body), {
        hideAddressBar:true}
        );
     
     
    $(window).resize(function() {
        resizeGraph();
    });
     
     
    function resizeGraph()
    {
        $("#chart").height($(window).height());
        $("#chart").width($(window).width());  
        $("#chart").data("kendoChart").redraw();
    }
     
     
    function graphInit()
    {
        setTimeout(function() {
            $("#chart").kendoChart({
                title: {
                     text: "Kendo Chart Example"
                },
                        legend: { visible: false },
             
                series: [
                     { data: [200, 450, 300, 125] }
                ],
                categoryAxis:{
                             categories: [ 2000, 2001, 2002, 2003 ]
                }
            });
        },400);
    resizeGraph();
    }
    </script>
  6. Don
    Don avatar
    38 posts
    Member since:
    Oct 2006

    Posted 02 Jul 2012 Link to this post

    awesome.
    great example for a newbie.

    Thanks-
Back to Top
Kendo UI is VS 2017 Ready