Man(ual) page for WebAssembly

Blazor Charts

Elegantly Simple WebAssembly Blazor Charts

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

  • Simple
    The components or charts are simple and useful enough for most people.
  • Minimal Dependencies
    The components or charts are developed with minimal dependencies to external libraries or frameworks. Wherever possible, they utilize the underlying programming language in a plain vanilla manner.
  • Adaptable
    Being simple and with minimal dependencies make these charts adaptable and flexible. Whenever the platform or framework changes, it will be easy to adjust each 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

Standard Charts

Data Intense Blazor Sparklines

  • Sparklines
  • Column Bars
  • Bullet Bars
  • Win Lose Draw
  • Mini Pie
  • Bar Graphs

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 the 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 within our project. <DonutChart> is the tag where we declare our use of the 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 have used, reused, 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 built upon our past experiences, put in our best efforts and invest quality time to develop them to their very best.

      Page Source | Issues | Content Date - 2/10/2020 | Language Vetting - "Feb 28,2020"

    WebAssembly
    Blazor Topics
    Blazor Syntax