This is a migrated thread and some comments may be shown as answers.

Maximize dataViz chart in mobile view

4 Answers 164 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Per Lindsø
Top achievements
Rank 2
Per Lindsø asked on 15 Jun 2012, 10:14 AM
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?



4 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 18 Jun 2012, 04:00 PM
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!
0
Don
Top achievements
Rank 2
answered on 26 Jun 2012, 07:58 PM
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
0
Per Lindsø
Top achievements
Rank 2
answered on 27 Jun 2012, 12:01 PM
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>
0
Don
Top achievements
Rank 2
answered on 02 Jul 2012, 09:49 PM
awesome.
great example for a newbie.

Thanks-
Tags
General Discussions
Asked by
Per Lindsø
Top achievements
Rank 2
Answers by
Iliana Dyankova
Telerik team
Don
Top achievements
Rank 2
Per Lindsø
Top achievements
Rank 2
Share this question
or