Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

Cross Platform Charts and Graphs, Free & Easy - Here's How

$
0
0

Create WebView and add it to a Xamarin Forms app. Have your app create the following Kendo UI chart HTML.

Works in Android and iOS and WinPhone. Supports a million charts: eg http://demos.telerik.com/kendo-ui/pie-charts/index

Done!

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
    }
    .k-chart { overflow: hidden; }
    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; }
  </style>
  <title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>

<!-- NOTE: Leave the styles here as Kendo will do funny things with a css class -->
<div class="chart-wrapper" style="height: 100%; min-height: 100%; width: 100%;">
     <div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>

<script>
$(function() { $("#chart").kendoChart({ legend: { visible: false }, seriesDefaults: { type: "column", opacity: .7 }, series: [{ data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000], color: "#005984" }], valueAxis: { labels: { format: "{0:C0}" }, line: { visible: false } }, categoryAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], majorGridLines: { visible: false } }, tooltip: { visible: true, format: "{0:C0}", template: " #= value #" } }); });

 $(window).on("resize", function() {    kendo.resize($(".chart-wrapper"));  });
</script>
</body>
</html>

Viewing all articles
Browse latest Browse all 58056

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>