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?
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
0
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
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
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:
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-
great example for a newbie.
Thanks-