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

IanVinkIanVink CAInsider, University ✭✭✭

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>

Posts

  • IanVinkIanVink CAInsider, University ✭✭✭

    Note: Some Android devices don't like this line, so remove it for Android, keep for iOS:

      html { height:100%; }
    
  • nbevansnbevans USMember ✭✭✭
    edited January 2015

    Seems an awful hack and in this implementation it won't work offline. Also, I'm yet to see a decent Telerik product.

  • IanVinkIanVink CAInsider, University ✭✭✭

    On the contrary. Simply embed the js and css in the project, set the BaseUrl or the WebView and you got yourself an elegant solution at no cost.

  • SteeveLeDreauSteeveLeDreau FRMember ✭✭

    Is this way better than using xamarin.forms xlab chart which is free and native (even if those chart aren't the most beautifull... ^^)

  • VincentPoirierVincentPoirier CAMember ✭✭

    I think that in the long run, if the community continues to collaborate like it does, Xamarin.Forms.Labs will be way more evolutive (and remain "free").

  • SteeveLeDreauSteeveLeDreau FRMember ✭✭
    edited January 2015

    Hi, i ended up with @IanVink 's solution. Why ? Because i found the pieChart not working well on iOs & WP if your items source isn't hard coded : the chart looks great only if i set source in the constructor of the page. Else it doesn't look to a pie chart at all.

    Plus, i don't use xlabs controls except the chart. So by removing the xlab dll, i remove dependencies and my app's size will be lighter.

    But i won't take telerik's chart because i use their controls for about 3 years and as @nbevans‌ said, "I'm yet to see a decent Telerik product"

  • VincentPoirierVincentPoirier CAMember ✭✭

    I'm gonna give this a shot today or tomorrow. I think the Web approach is the best until components are more stable.

  • SteeveLeDreauSteeveLeDreau FRMember ✭✭
    edited January 2015

    Let me help you. If you search for the light-weighter solution, draw the chart yourself using html 5 canvas and some basic javascript. Works on iOs and Android.

    Add an embeded resources in your core project.

    //note : to access a resource, bind your webview source to a property :
    public string Html
    {
    get
    {
        var assembly = typeof(MyViewModel).Assembly;
        Stream stream = assembly.GetManifestResourceStream("MyAssemblyName.MyHtmlFileNameAndNotTheFullPath.html");
        string text = "";
        using (var reader = new StreamReader(stream))
        {
            text = reader.ReadToEnd();
        }
        return text;
    }
    }
    
    // the html file
    
    <html>
    <body>
    <canvas id="canvas"
        width="250"
        height="250" />
    
    <script>
    
    //initialize data set
    var data = [100, 68, 20, 30, 100];
    var colors = ["orange", "green", "blue", "yellow", "teal"];
    
    var canvas = document.getElementById('canvas');
    var c = canvas.getContext('2d');
    c.fillStyle = "rgba(255, 255, 255, 1.0)";
    c.fillRect(0, 0, 250, 250);
    
    //calculate total of all data
    var total = 0;
    for (var i = 0; i < data.length; i++) {
        total += data[i];
    }
    
    //draw pie data
    var prevAngle = 0;
    for (var i = 0; i < data.length; i++) {
        //fraction that this pieslice represents
        var fraction = data[i] / total;
        //calc starting angle
        var angle = prevAngle + fraction * Math.PI * 2;
    
        //draw the pie slice
        c.fillStyle = colors[i];
    
        //create a path
        c.beginPath();
        c.moveTo(125, 125);
        c.arc(125, 125, 50, prevAngle, angle, false);
        c.lineTo(125, 125);
    
        //fill it
        c.fill();
    
        //stroke it
        c.strokeStyle = "black";
        c.stroke();
    
        //update for next time through the loop
        prevAngle = angle;
    }
    
    </script>
    </body>
    </html> 
    

    This is the code i started with. No need to import any library and fully supported in any webview.
    You still have to adapt it to fit your needs (calculated size, dynamic data source etc.)

Sign In or Register to comment.