Choose an item

Create a chart using Razor Page

ASP.NET core Razor page is a page-focused framework for building data-driven, dynamic web applications. Razor pages are mostly used for cross-platform development. FusionCharts.NET allows you to render charts using the razor page.

Now, let's create a Column 2D chart showing the Most popular programming language.

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the column chart.

Now, let's see how to render the chart using Razor page.

Render the Chart

To render the chart using razor page, following the steps given below:

  • In the ASP.NET core web application, add a razor page named index.cshtml.

  • Add the following code to the above create razor page:

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model FusionChartsRazorSamples.Pages.IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

    <script src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <title>ColumnChart</title>
</head>

<body>
    <form method="post">
        <div>@Html.Raw(Model.ChartJson)</div>
        <br />
    </form>
</body>
</html>
  • Now, add the following code to index.cshtml.cs file:

Each .cshtml file has its index.cshtml.cs file.

using System.Data;
using FusionCharts.DataEngine;
using FusionCharts.Visualization;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace FusionChartsRazorSamples.Pages
{
    public class IndexModel : PageModel
    {
        // create a public property. OnGet method() set the chart configuration json in this property.
        // When the page is being loaded, OnGet method will be  invoked
        public string ChartJson { get; internal set; }
        public void OnGet()
        {

            // create data table to store data
            DataTable ChartData = new DataTable();
            // Add columns to data table
            ChartData.Columns.Add("Programming Language", typeof(System.String));
            ChartData.Columns.Add("Users", typeof(System.Double));
            // Add rows to data table

            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(700);
            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";
            // Set chart sub title
            column.SubCaption.Text = "2017-2018";
            // hide chart Legend
            column.Legend.Show = false;
            // set XAxis Text
            column.XAxis.Text = "Programming Language";
            // Set YAxis title
            column.YAxis.Text = "User";
            // set chart theme
            column.ThemeName = FusionChartsTheme.ThemeName.FUSION;
            // set chart rendering json
            ChartJson = column.Render();
        }
    }
}