Man(ual) page for WebAssembly

Blazor Charts

Elegantly Simple WebAssembly Blazor Charts

This is a collection of Blazor Charts that are Elegantly Simple with the following key design principles:

  • Simple as in Less is More
    The components or charts aim to be good enough for most people, and is simple and easy to use.
  • Vanilla and Minimal Dependencies
    The components or charts are developed with minimal dependencies to external libraries or frameworks. Wherever possible, it utilizes the underlying programming language in a plain vanilla manner.
  • Adaptable
    The component or chart being simple, vanilla and with minimal dependencies makes it adaptable. Whenever the platform or framework changes, it is easy to adapt the chart to keep it current and up to date.
  • Elegant as in easy to understand and change
    The source code is structured to be easy to understand, compile, change, extend or port.

Type of Charts

Source Code

  • GitHub - Blazor Charts

      • How to build and use the charts?

      Using the dotnet CLI, create a new Blazor project

      dotnet new blazorwasm -o BlazorProject

      Clone the Blazor Charts Library

      git clone https://github.com/Misfits-Rebels-Outcasts/Blazor-Charts.git

      Add a reference from the BlazorProject to specific Blazor Charts Library. Go to the BlazorProject folder, edit the BlazorProject.csproj and add in the following: 

      

<Project...> 
.
.
.
<ItemGroup>
    <ProjectReference Include="../Blazor-Charts/DonutChart/DonutChart.csproj" />

</ItemGroup>
</Project>

      If you are using other charts such as the Pie Chart, change the above to "../Blazor-Charts/PieChart/PieChart.csproj".

      Edit Index.razor in the Pages folder of the BlazorProject 

      
@using WebAssemblyMan

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<DonutChart InputData="10,30,20,10,10,10,5,5" 
                   InputLabels="App Store,Website,Partners,
                   Direct,Channels,Retail,Distributors,Affiliates">
</DonutChart>
  
<SurveyPrompt Title="How is Blazor working for you?" />

      @using enables us to use the Blazor Charts library. <DonutChart> is the tag where we declare to use our chart component. If you are using other charts such as the Pie Chart, change the above to "<PieChart InputData="50,30,20" ...><PieChart>".

      Edit index.html to include the Chart Stylesheet. 

      
<!DOCTYPE html>
<html>

<head>
    .
    .
    .
    <link href="_content/DonutChart/styles.css" rel="stylesheet" />
<head>

<body>
.
.
.
</body>

</html>

      If you are using other charts such as the Pie Chart, change the above to "<link href="_content/PieChart/styles.css" rel="stylesheet" />".

      Run the BlazorProject

      dotnet run

      You should see a web page with the Blazor chart.

      Our Philosophy

      Have you thought about how many times you use, reuse, written or rewritten your components and charts? Everyday, day after day, components after components and charts after charts. We definitely have. That is why we build own components and charts to be adaptable, vanilla with minimal dependencies and elegantly simple. The Elegantly Simple design ensures our components and charts are build to last. As new frameworks and libraries are released, you will be able to easily adapt the components charts to the new version. When you hire new people to maintain a project utilizing these components and charts, they will have no problems understanding how the components and charts work.

      We provide good documentation on the components and charts so that you do not need to guess or figure out how we have designed and implemented them.

      We also test our components and charts with different scenarios vigorously, so that you know you can be assured of its quality, robustness and reliability.

      Whether you are a project manager, software developer or business executive from a Fortune 500 company, or a free-lancer, a consultant or an entrepreneur joining the business world, we hope that you will find our WebAssembly components and charts useful as we have put together our best experience, invest our best effort and time to develop them.

    WebAssembly
    Blazor Topics
    Blazor Syntax