Create chart using highchart in MVC | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Create chart using highchart in MVC

In this article I am going to explain how to create chart using Highchart in MVC

Create chart using highchart in MVC


Description:
I want to show state wise population in chart using Highchart.

 Implementation:
I have created a table Tb_Population and insert some dummy record into it.

Create a new mvc project. First of all install Highcharts using package manager console. Run the below given command:
Install-Package DotNet.Highcharts

Model
    public partial class Tb_Population
    {
        public int Id { get; set; }
        public string StateName { get; set; }
        public Nullable<long> TotalPopulation { get; set; }
    }


Add controller
Add empty controller to project. Import the Highchart namespaces.

using DotNet.Highcharts;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Attributes;


Complete code of controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DotNet.Highcharts;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Attributes;
using MVC_Project.Models;

namespace MVC_Project.Controllers
{
    public class ChartController : Controller
    {
        DemoEntities1 db = new DemoEntities1();
        //
        // GET: /Chart/
public ActionResult Index()
        {
            var statepopulation = db.Tb_Population.ToList();
            var statename = statepopulation.Select(i => i.StateName).ToArray();
            var population = statepopulation.Select(i => new object[] { i.TotalPopulation }).ToArray();
            var chart = new Highcharts("Chart")  
            //set credit to hide highchart wtaremark
                .SetCredits(new Credits{Enabled = false})
            //legend
             .SetLegend(new Legend
             {
                 Align = HorizontalAligns.Right,
                 VerticalAlign = VerticalAligns.Top,
                 Y = 20,
                 Floating = true,
                 BorderWidth = 0
             })
            //Chart title
            .SetTitle(new Title {Text="State wise Population"})
            //Chart type
            .InitChart(new Chart {DefaultSeriesType = ChartTypes.Bar})
                .SetXAxis(new XAxis { Categories = statename })
                .SetSeries(new Series {Data = new Data(population)});
            return View(chart);
        }  
}
}



Add view
Add view for index action.  After that link CDN of Jquery and highchart js. Add the chart to display:

@model DotNet.Highcharts.Highcharts
@(Model)

Complete code of view
@{
    ViewBag.Title = "chart tutorial in mvc";
}

<h2>Chart tutorial</h2>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

@model DotNet.Highcharts.Highcharts
@(Model)

  


Post a Comment

how to edit array of images in mvc which are stored in folder and path in sql database i m stuck on this...and if you make a tutorial it will be so good for others also

Thanks in Advance

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget