83137

How to make the Kendo chart on mobile responsive?

Question:

I have created some charts in Kendo, <a href="http://m.biotracker.me/view/dashboard.aspx" rel="nofollow">Link Here</a>

My problem is that I cant pinch and zoom the charts and also, if I change the orientation, the charts are not scaling to the available width.

Is there a solution for this?

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div data-role="page" id="page11" data-theme='b'> <div data-role="view"> <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'> <a href="index.html" data-ajax="false"><i class='icon-angle-left'></i></a>

Dashboard

</div> <div data-role="content"> <div style="padding: 10px;"> <h3>Steps</h3> <div id="steps" style="height: 100px; width: 100%;"></div> </div> <hr /> <div style="padding: 10px;"> <h3>Distance</h3> <div id="distances" style="height: 100px; width: 100%;"></div> </div> <hr /> <div style="padding: 10px;"> <h3>Calories</h3> <div id="caloriesOut" style="height: 100px; width: 100%;"></div> </div> </div> </div> </div> <script> $(document).ready(function () { var dSource = getJsonData("ActivitySummary", "week", "", "2Q8LM7"); $("#steps").kendoSparkline({ dataSource: dSource, chartArea: { background: "" }, type: "area", seriesColors: ["green"], series: [{ name: "steps", field: "steps", categoryField: "createddate" }] }); $("#distances").kendoSparkline({ dataSource: dSource, chartArea: { background: "" }, type: "area", seriesColors: ["orangered"], series: [{ name: "distances", field: "distances", categoryField: "createddate" }] }); $("#caloriesOut").kendoSparkline({ dataSource: dSource, chartArea: { background: "" }, type: "area", seriesColors: ["blue"], series: [{ name: "caloriesOut", field: "caloriesOut", categoryField: "createddate" }] }); }); </script> <script> var app = new kendo.mobile.Application($("#page11")); </script>

Answer1:

For zooming and pan attach a event and handle it example

Take a look at <a href="http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom" rel="nofollow">http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom</a>

to resize the chat and take the full space use as below

$(window).on("resize", function () { $("#chart").data("kendoChart").refresh(); });

Answer2:

kendo directives useful

$(window).resize(function () { kendo.resize($("div.k-chart[data-role='chart']")); });

Recommend

  • Wordpress Create Category AJAX Response
  • How to create a fast loading wrapping ListBox?
  • ActionBar three-dot dropdown opens at the wrong place
  • Styling text for textarea Wicket
  • Android error - Failed to find style 'toolbarStyle' in current theme
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to modify the HTML tag in Drupal 6?
  • CSS: How to fix overlapping divs
  • Change navbar in bootstrap if user login
  • UIBarButtonItem's action is not called when in a view with a UIGestureRecognizer
  • Android Chronometer starts and stops but carries on counting when stopped
  • Reading space separated values file in c++ error
  • Android distinguish between tap and double tap
  • Simulate click Geckofx vb,net
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • $wpdb not working in file of WordPress plugin
  • Meteor helpers not available in Angular template
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • RectangularRangeIndicator format like triangular using dojo
  • HTML download movie download link
  • Incrementing object id automatically JS constructor (static method and variable)
  • How to check if every primary key value is being referenced as foreign key in another table
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • jquery mobile loadPage not working
  • Rearranging Cells in UITableView Bug & Saving Changes
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How to stop GridView from loading again when I press back button?
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Conditional In-Line CSS for IE and Others?