Bar chart in Asp.net MVC using highcharts

October 29, 2020

 

Bar chart

step 1
Add the following code to your Controller
 public class ReportsController : Controller
    {
        // GET: Reports
        private registrationEntities db = new registrationEntities();
        public JsonResult GetCompaniesAndFreelancers()
        {
            var lst = db.Database.SqlQuery<DistrictWiseReport>("sp_district_wise_freelancers_and_companies").ToList();
            return Json(lst, JsonRequestBehavior.AllowGet);
        }
    }
step 2
Add the following code to your View
<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="ibox ">
            <div class="ibox-content">
                <div id="district-wise-report"></div>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script src="~/Awwwroot/hightCharts/highcharts.js"></script>
    <script src="~/Awwwroot/hightCharts/accessibility.js"></script>
    <script>
     $(function () {
        drawBarChart();
    });
 function drawBarChart() {
        $.ajax({
            url: '@Url.Action("GetCompaniesAndFreelancers","Reports")',
            type: "get",
            dataType: "json",
            contentType: "application/json",
            success: function (response) {
                console.log(response);

                var district=[], freelancers=[], companies = [];
                $.each(response, function (i, x) {
                        district.push(x.district);
                        freelancers.push(x.freelancers);
                        companies.push(x.companies);
                });
                barChart(district, freelancers, companies);
            }

        });
    }
 function barChart(district, freelancer, company) {
     Highcharts.chart('district-wise-report', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'District Wise Freelancers & Companies'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: district,
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ''
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Company',
        data: freelancer
    }, {
        name: 'Freelancer',
        data: company
    }]
});

 }
    </script>
}
Tags:

Post a Comment

0 Comments