How to display Graph/Chart in MVC 4 using database?

Question

I am new in ASP.Net MVC and i am doing a project in which i have to display a chart using database. Let say there is a field in database "Average". If we find 4 records against some specific user id, then the graph should be like 4 bars and each bars on x-axis represents the number like 1 2 3 4 and on y-axis, there should be the average. I have tried many things like high-charts but its not working, it gives error "DotNet could not be found(are you missing assemble references)". I have searched it and got that there is a problem of .net framework. but honestly i am failed to build a graph. I tried web helper, through this i just created an image of graph but don't know hot connect with database.

I tried but still not working with highcharts This is my action method

 public ActionResult Index()
        {
            Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
           .SetXAxis(new XAxis
                       {
                           Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                       })
           .SetSeries(new Series
                       {
                           Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                       });

            return View(chart);

        }

and this is my view.cshtml

@model DotNet.Highcharts.Highcharts
@{
    ViewBag.Title = "Index";
}
<header>
    <script src="~/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/highcharts.js" type="text/javascript"></script>
</header>



@(Model)

So please someone give example with code. I will appreciated.

hdoghmen · Accepted Answer · 2015-05-26 22:06:02Z

You can follow this simple tutorial DotNet.Hightcharts.

There are examples here DotNet.Highcharts 4.0 with Examples.

Here is a working example :

Controller's action

public virtual ActionResult GetWorkloadChart()
{          
    var chart = ConstructChart();
    return View("WorkloadChart", chart);
}

Construct the chart

    private static Highcharts ConstructChart()
    {
        var title = new Title() {Text = "Workload"};

        var subtitle = new Subtitle() {Text = "workload per day"};
        //You can get these values from database
        var XData = new[]        { "25", "26", "27", "28", "29", "30", "31", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"};
        var YData = new object[] {  195,  150,    0,  270,    0,   90,  245,  215,  350,  355,  190,   95,    0,  100,  225};

        var xaxisTitle = new XAxisTitle { Text = "Wokload in minutes" };
        var yaxisTitle = new YAxisTitle { Text = "Time in days" };

        string serieName = "Workload per day";

        Highcharts chart = new Highcharts("chart")
            .SetTitle(title)
            .SetSubtitle(subtitle)
            .SetXAxis(new XAxis
                {
                    Categories = XData,
                    Title = xaxisTitle               
                })
            .SetYAxis(new YAxis
                {
                    Title = yaxisTitle
                })
            .SetSeries(new Series
                {
                    Data = new Data(YData),
                    Name = serieName               
                });

        return chart;
    }

View

@model DotNet.Highcharts.Highcharts

    @{
        ViewBag.Title = "WorkloadChart";
    }

    <script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="~/Scripts/Highcharts-2.2.1/js/highcharts.js" type="text/javascript"></script>


    <h2>Workload Chart</h2>

    @Model

Remember to add : hightcharts.js

which should render to something like this :

Chart

Collectives™ on Stack Overflow

How to display Graph/Chart in MVC 4 using database?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related