CODEWITHSUNDEEP
xamarin.formsxamarin.androidfusioncharts
Sai Sunkari
Sai Sunkari

Reputation: 179

using fusion charts in xamarin forms

I'm trying to implement charts using fusion charts in my Xamarin forms project (first testing in android project).

I downloaded the trial version and added fusioncharts.js and fusioncharts.charts.js files in the asset folder.

private string GetChartScript()
    {
        var chartConfig = GetSpendingChartConfig();
        var script = $@"var config = {chartConfig};
        window.onload = function() {{
        var canvasContext = 
        document.getElementById(""chart"").getContext(""2d"");
        new Chart(canvasContext, config);
        }};";
        return script;
    }

private string GetHtmlWithChartConfig(string chartConfig)
    {
        var inlineStyle = "style=\"width:100%;height:100%;\"";
        var chartConfigJsScript = $"<script>{chartConfig}</script>";
        var chartContent = $@"<div id=""chart-container"" {inlineStyle}>
  <canvas id=""chart"" />
</div>";
        var document = $@"<html style=""width:97%;height:100%;"">
<head></head>
<body {inlineStyle}>
{chartContent}
{chartConfigJsScript}
</body>
</html>";
        return document;
    }

 var html = GetHtmlWithChartConfig(chartConfigScript);

And on my page:

source = new HtmlWebViewSource();
        string url = DependencyService.Get<IBaseUrl>().GetBaseUrl();
        source.BaseUrl = url;
        source.Html = html;
        ChartWebView.Source = source;

XAML:

<local:ChartWebView x:Name="ChartWebView" />

But the char is blank with no data and no bars and axis.

Thanks

Upvotes: 0

Views: 271

Answers (1)

Soumya sankar Dutta
Soumya sankar Dutta

Reputation: 291

FusionCharts supports FusionCharts.NET which is a charting library for ASP.NET MVC, ASP.NET WebForms, .NET Core and .NET Standard which uses FusionCharts JavaScript (HTML5) library to render interactive charts.

You could install FusionCharts.NET as NuGet package. To use NuGet package, please run the following command in the NuGet Package Manager Console:

Install-Package FusionCharts.Visualization -Version 1.0.7

You need to add a WebView in xaml and provide a name as follows.

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="FusionChartsDemoProject.MainPage">
    <StackLayout>
<WebView x:Name="web" HeightRequest="600" WidthRequest="100" />
        <Button Clicked="ChartClicked" Text="Render Chart"/>
    </StackLayout>
</ContentPage>

In source page include following namespaces 

 using FusionCharts.DataEngine;
 using FusionCharts.Visualization;

Declared an event handler for button click and write the following code within it.

    private void ChartClicked(object sender, EventArgs e)
        {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Programming Language", typeof(System.String));
            ChartData.Columns.Add("Users", typeof(System.Double));
            ChartData.Rows.Add("Java", 62000);
            ChartData.Rows.Add("Python", 46000);
            ChartData.Rows.Add("Javascript", 38000);
            ChartData.Rows.Add("C++", 31000);
            ChartData.Rows.Add("C#", 27000);
            ChartData.Rows.Add("PHP", 14000);
            ChartData.Rows.Add("Perl", 14000);

            // Create static source with this data table
            StaticSource source = new StaticSource(ChartData);
            // Create instance of DataModel class
            DataModel model = new DataModel();
            // Add DataSource to the DataModel
            model.DataSources.Add(source);
            // Instantiate Column Chart
            Charts.ColumnChart column = new Charts.ColumnChart("first_chart");
            // Set Chart's width and height
            column.Width.Pixel(300);
            column.Height.Pixel(400);
            // Set DataModel instance as the data source of the chart
            column.Data.Source = model;
            // Set Chart Title
            column.Caption.Text = "Most popular programming language";
            // Sset chart sub title
            column.SubCaption.Text = "2017-2018";

            // set XAxis Text
            column.XAxis.Text = "Programming Language";
            // Set YAxis title
            column.YAxis.Text = "User";
            column.ThemeName = FusionChartsTheme.ThemeName.FUSION;
            WebView browser =(WebView) Content.FindByName("web");

          var htmlSource = new HtmlWebViewSource();
           htmlSource.Html = @"<html><head><script src='https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js'><script src='https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js'></script></head><body>
 <h1>FusionCharts demo</h1><br/>" + column.Render()+

 "</body></html>";
          browser.Source = htmlSource;

        }

Finally, you would get the following visualization in the emulator Chart is getting rendered

Upvotes: 4

Related Questions