HighChart not rendering on C# MVC

Question

I am trying to render a graph to a partial view of .net MVC cshtml page. I am setting all highchart properties in controller and returning to partial view where i want the graph - i have following in cshtml page

@((DotNet.Highcharts.Highcharts)ViewBag.highChart)

below is the script i am seeing on page but i dont see any html rendered to show the data.. i am not sure what i am missing - any help here would be greatly appreciated.

    var graphview;
$(document).ready(function() {
    graphview = new Highcharts.Chart({
        chart: { renderTo:'graphview_container', className: 'graphview', type: 'line' }, 
        credits: { enabled: false }, 
        legend: { enabled: false }, 
        title: { text: 'Events' }, 
        xAxis: { ceiling: 24, floor: 0, tickInterval: 1, title: { text: 'Hourly' } }, 
        yAxis: { ceiling: 5, floor: 0, tickInterval: 1, title: { text: 'Time Elapsed' } }, 
        series: [{ data: [{ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 2, y: 0 }, { x: 3, y: 0 }, { x: 4, y: 0 }, { x: 5, y: 0 }, { x: 6, y: 0 }, { x: 7.32, y: 3 }, { x: 7.37, y: 1 }, { x: 7.37, y: 2 }, { x: 7.37, y: 1 }, { x: 7.37, y: 1 }, { x: 7.4, y: 1 }, { x: 7.4, y: 1 }, { x: 7.4, y: 1 }, { x: 7.4, y: 1 }, { x: 7.45, y: 3 }, { x: 7.5, y: 2 }, { x: 7.53, y: 1 }, { x: 7.53, y: 3 }, { x: 7.58, y: 3 }, { x: 8.13, y: 3 }, { x: 8.15, y: 1 }, { x: 8.15, y: 3 }, { x: 8.18, y: 2 }, { x: 8.25, y: 2 }, { x: 8.26, y: 1 }, { x: 8.26, y: 2 }, { x: 8.38, y: 1 }, { x: 8.38, y: 2 }, { x: 8.43, y: 1 }, { x: 8.43, y: 3 }, { x: 8.44, y: 1 }, { x: 8.44, y: 1 }, { x: 8.47, y: 1 }, { x: 8.47, y: 1 }, { x: 8.48, y: 1 }, { x: 8.48, y: 1 }, { x: 8.5, y: 1 }, { x: 8.5, y: 1 }, { x: 8.54, y: 2 }, { x: 8.58, y: 1 }, { x: 8.58, y: 2 }, { x: 9.02, y: 1 }, { x: 9.03, y: 3 }, { x: 9.03, y: 1 }, { x: 9.03, y: 1 }, { x: 9.06, y: 2 }, { x: 9.52, y: 3 }, { x: 9.55, y: 1 }, { x: 9.55, y: 2 }, { x: 9.57, y: 1 }, { x: 9.57, y: 3 }, { x: 10.55, y: 2 }, { x: 10.04, y: 3 }, { x: 10.21, y: 1 }, { x: 10.21, y: 3 }, { x: 10.28, y: 3 }, { x: 11.12, y: 3 }, { x: 11.44, y: 1 }, { x: 11.44, y: 2 }, { x: 11.49, y: 1 }, { x: 11.49, y: 2 }, { x: 11.51, y: 1 }, { x: 11.51, y: 2 }, { x: 12, y: 0 }, { x: 13, y: 0 }, { x: 14, y: 0 }, { x: 15, y: 0 }, { x: 16, y: 0 }, { x: 17, y: 0 }, { x: 18, y: 0 }, { x: 19, y: 0 }, { x: 20, y: 0 }, { x: 21, y: 0 }, { x: 22, y: 0 }, { x: 23, y: 0 }], name: 'Time Taken to Load: ' }]
    });
});

BTW- i have scripts render tag in _layout.cshtml in following order.

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui",
            "~/bundles/bootstrap", "~/bundles/modernizr", 
            "~/bundles/highCharts")

am i missing anything here ???

UPDATE Here is my controller code :

public ActionResult GetChart()
{
    AllTransactionsByEvent = *get data from model* in list<obj>
    Highcharts highChart = new Highcharts("graphview");

    if (AllTransactionsByEvent.Count > 0)
    {
        Legend aLegend = new Legend { Enabled = false };
        highChart.SetLegend(aLegend);
        highChart.SetCredits(new Credits { Enabled = false });

        YAxis yAxis = new YAxis();
        yAxis.Floor = 0;
        yAxis.Title = new YAxisTitle() { Text = "Time Elapsed" };
        yAxis.TickInterval = 1;
        yAxis.Ceiling = 5;

        XAxis xAxis = new XAxis { Title = new XAxisTitle { Text = "Hourly" } };

        xAxis.Floor = 0;
        xAxis.Ceiling = 24;
        xAxis.TickInterval = 1;
        //Init list of DataPoints and DataSeries will hold an array of points
        List<Point> dataPoints = new List<Point>();
        Series dataSeries = new Series();

        dataSeries.Name = "Time Taken to Load: ";


        DateTime startdate = Convert.ToDateTime("2015-11-16 00:00:00.000");
        DateTime Enddate = Convert.ToDateTime("2015-11-16 23:59:59.000");
        for (int i = 0; i <= Enddate.Hour; i++)
        {
            List<TraceDetail> dataList = AllTransactionsByEvent.Where(x => (DateTime.ParseExact(x.ts_ky_end.Trim(), "yyyy-MM-dd-HH.mm.ss.fffff", null)).Hour.Equals(i)).ToList();
            if (dataList.Count > 0)
            {
                foreach (var item in dataList)
                {
                    string FormattedEndTime = DateTime.ParseExact(item.ts_ky_end.Trim(), "yyyy-MM-dd-HH.mm.ss.fffff", null).ToString("yyyy-MM-dd HH:mm:ss");
                    Point dataPoint = new Point();
                    //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#d9534f");
                    //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(Convert.ToDateTime(FormattedEndTime));
                    dataPoint.X = Convert.ToDouble(Convert.ToDateTime(FormattedEndTime).ToString("HH.mm"));
                    dataPoint.Y = (int)Math.Ceiling(Convert.ToDecimal(item.qy_elapse));
                    System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                    //add the data point
                    dataPoints.Add(dataPoint);
                }
            }
            else
            {
                Point dataPoint = new Point();
                //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(startdate.AddHours(i));
                dataPoint.X = i;
                dataPoint.Y = 0;
                //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#5cb85c");
                System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                dataPoints.Add(dataPoint);
            }
        }

        dataSeries.Data = new Data(dataPoints.ToArray());
        highChart.InitChart(new Chart() { Type = ChartTypes.Line, ClassName = "graphview" }).SetXAxis(xAxis).SetSeries(dataSeries).SetTitle(new Title() { Text = "Events" }).SetYAxis(yAxis);


    }

    ViewBag.highChart = highChart;

    return PartialView("~/views/shared/HighChart.cshtml");

share your code in controller where you are setting property values — coder771
– coder771, Commented Dec 10, 2015 at 11:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

You are not missing much. You need to return the actual Highchart object as the view argument like return View(highChart). I used my own data to satisfy the test case.

Controller:

public ActionResult GetChart()
    {

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
    SqlCommand com;
    SqlDataReader dr;
    List<SalesVsTarget> SalesList = new List<SalesVsTarget>();// SalesVsTarget is my Model

        using (con)
        {
            con.Open();

            com = new SqlCommand("select * from [SalesVsTarget]", con);
            dr = com.ExecuteReader();

            while (dr.Read())
            {
                SalesVsTarget Sales = new SalesVsTarget();
                Sales.Id = Convert.ToInt32(dr["Id"]);
                Sales.Date = Convert.ToDateTime(dr["Date"]);
                Sales.Inforce = Convert.ToInt32(dr["Inforce"]);
                Sales.Target = Convert.ToInt32(dr["Target"]);
                Sales.PolicyType = dr["PolicyType"].ToString();
                SalesList.Add(Sales);

            }
        }

        var AllTransactionsByEvent = from o in SalesList select o;
        Highcharts highChart = new Highcharts("graphview");

        //if (AllTransactionsByEvent.Count > 0)
        //{
        Legend aLegend = new Legend { Enabled = false };
        highChart.SetLegend(aLegend);
        highChart.SetCredits(new Credits { Enabled = false });

        YAxis yAxis = new YAxis();
        yAxis.Floor = 0;
        yAxis.Title = new YAxisTitle() { Text = "Time Elapsed" };
        yAxis.TickInterval = 1;
        yAxis.Ceiling = 5;

        XAxis xAxis = new XAxis { Title = new XAxisTitle { Text = "Hourly" } };

        xAxis.Floor = 0;
        xAxis.Ceiling = 24;
        xAxis.TickInterval = 1;
        //Init list of DataPoints and DataSeries will hold an array of points
        List<Point> dataPoints = new List<Point>();
        Series dataSeries = new Series();

        dataSeries.Name = "Time Taken to Load: ";


        DateTime startdate = Convert.ToDateTime("2015-11-16 00:00:00.000");
        DateTime Enddate = Convert.ToDateTime("2015-11-16 23:59:59.000");
        for (int i = 0; i <= Enddate.Hour; i++)
        {
          //  List<SalesVsTarget> dataList = AllTransactionsByEvent.Where(x => (DateTime.ParseExact(x.Date.ToString(), "yyyy-MM-dd-HH.mm.ss.fffff", null)).Hour.Equals(i)).ToList();
            if (SalesList.Count > 0)
            {
                foreach (var item in SalesList)
                {
                  //  string FormattedEndTime = DateTime.ParseExact(item.Date.ToString(), "yyyy-MM-dd-HH.mm.ss.fffff", null).ToString("yyyy-MM-dd HH:mm:ss");
                    Point dataPoint = new Point();
                    //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#d9534f");
                    //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(Convert.ToDateTime(FormattedEndTime));
                    dataPoint.X=item.Inforce;
                    dataPoint.Y = (int)Math.Ceiling(Convert.ToDecimal(item.Inforce));
                    System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                    //add the data point
                    dataPoints.Add(dataPoint);
                }
            }
            else
            {
                Point dataPoint = new Point();
                //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(startdate.AddHours(i));
                dataPoint.X = i;
                dataPoint.Y = 0;
                //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#5cb85c");
                System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                dataPoints.Add(dataPoint);
            }
        }

        dataSeries.Data = new Data(dataPoints.ToArray());
        highChart.InitChart(new Chart() { Type = ChartTypes.Line, ClassName = "graphview" }).SetXAxis(xAxis).SetSeries(dataSeries).SetTitle(new Title() { Text = "Events" }).SetYAxis(yAxis);


        //}

        ViewBag.highChart = highChart;

        return View(highChart);
    }

View:

@model DotNet.Highcharts.Highcharts

@{
    ViewBag.Title = "GetChartTest";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<div class="row">
    <div>

        <div class="col-md-12 col-md-6">
            @(Model)
        </div>
    </div>
</div>

Output

Collectives™ on Stack Overflow

HighChart not rendering on C# MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related