Plugin.MAUI.GoogleChartsView 0.0.1.1

Plugin.MAUI.GoogleChartsView

MAUI.GoogleChartsView is a user-friendly charting control designed for .NET MAUI applications. By harnessing the capabilities of Google Charts, it offers customizable data visualizations to suit a wide range of data types. This library is an ideal choice for developers who aim to create visually engaging and informative charts in their .NET MAUI applications while avoiding the complexities associated with building charting solutions from the ground up.

Latest Release

In this latest release we have added the ZoomEnabled property to the control this allows the control to be able to zoom on all platforms.

Features

• Supports various chart types, including Line, Bar, Pie, and more
• Customizable chart options to fit your design needs
• Seamless integration with .NET MAUI
• Interactive features like tooltips and animations
• Export charts as images (PNG format) on Android and iOS platforms
• Responsive chart rendering for different screen sizes

Getting Started

Installation

Install the Plugin.MAUI.GoogleChartsView NuGet package in your .NET MAUI project.

Usage/Examples

1. Add the GoogleChartsView control to your page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:charts="clr-namespace:MAUI.GoogleChartsView;assembly=MAUI.GoogleChartsView"
             x:Class="MyApp.MainPage">

         <StackLayout>
           <HorizontalStackLayout>
            <charts:GoogleChartsView x:Name="MyGoogleChartLine" WidthRequest="300"  HeightRequest="200" />
            
            <charts:GoogleChartsView x:Name="MyGoogleChartPie" WidthRequest="300"  HeightRequest="200" />
           </HorizontalStackLayout>

           <charts:GoogleChartsView x:Name="MyGoogleChartBar" WidthRequest="300"  HeightRequest="200" />
         </StackLayout>

</ContentPage>

2. Set the chart data, options, and type in your page's code-behind:

using System.Collections.Generic;
using Microsoft.Maui.Controls;
using MyApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

          var data = new
        {
            cols = new List<object>
                {
                    new { id = "", label = "Year", pattern = "", type = "string" },
                    new { id = "", label = "Sales", pattern = "", type = "number" },
                    new { id = "", label = "Expenses", pattern = "", type = "number" }
                },
            rows = new List<object>
                {
                    new { c = new List<object> { new { v = "2017" }, new { v = 1000 }, new { v = 400 } } },
                    new { c = new List<object> { new { v = "2018" }, new { v = 1170 }, new { v = 460 } } },
                    new { c = new List<object> { new { v = "2019" }, new { v = 660 }, new { v = 1120 } } },
                    new { c = new List<object> { new { v = "2020" }, new { v = 1030 }, new { v = 540 } } }
                }
        };

        var options = new
        {
            title = "Company Performance",
            curveType = "function",
            legend = new { position = "bottom" },
            backgroundColor = "#f5f5f5",
            colors = new[] { "#2196F3", "#FF5722" },
            fontSize = 12,
            fontName = "Arial",
            lineWidth = 3,
            pointSize = 5,
            hAxis = new
            {
                title = "Year",
                minValue = 0,
                textStyle = new { fontSize = 10, color = "#333" },
                titleTextStyle = new { fontSize = 12, color = "#666" }
            },
            vAxis = new
            {
                title = "Amount",
                minValue = 0,
                maxValue = 1500,
                textStyle = new { fontSize = 10, color = "#333" },
                titleTextStyle = new { fontSize = 12, color = "#666" },
                gridlines = new { count = 6 }
            },
            chartArea = new
            {
                width = "80%",
                height = "70%"
            },
            tooltip = new
            {
                isHtml = true,
                showColorCode = true
            },
            animation = new
            {
                duration = 1000,
                easing = "out",
                startup = true
            }
        };


        MyGoogleChartLine.Data = data;
        MyGoogleChartLine.ChartType = "LineChart";
        MyGoogleChartLine.Options = options;

        var data2 = new
        {
            cols = new List<object>
            {
                new { id = "", label = "Task", pattern = "", type = "string" },
                new { id = "", label = "Hours per Day", pattern = "", type = "number" }
            },
            rows = new List<object>
            {
                new { c = new List<object> { new { v = "Work" }, new { v = 11 } } },
                new { c = new List<object> { new { v = "Eat" }, new { v = 2 } } },
                new { c = new List<object> { new { v = "Commute" }, new { v = 2 } } },
                new { c = new List<object> { new { v = "Watch TV" }, new { v = 2 } } },
                new { c = new List<object> { new { v = "Sleep" }, new { v = 7 } } }
            }
        };

        var options2 = new
        {
            title = "My Daily Activities"
        };

        MyGoogleChartPie.Data = data2;
        MyGoogleChartPie.ChartType = "PieChart";
        MyGoogleChartPie.Options = options2;
        var options3 = new
        {
            title = "My Daily Activities",
            orientation = "vertical"
        };

        MyGoogleChartBar.Data = data2;
        MyGoogleChartBar.ChartType = "BarChart";
        MyGoogleChartBar.Options = options3;
    }
}

Properties that can be used in your options object

Properties that can be used in your options object like in the above sampes

Contributing

Contributions are always welcome!

Support

For any issues please contact us at : websiterztech@gmail.com

License

Plugin.MAUI.GoogleChartsView is licensed under the MIT