Create chart using highchart in MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework 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)

  


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+

1 comments:

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


EmoticonEmoticon