chart not displaying on web form

Question

Hello, am using having problem displaying chart from my web form. once i click on the button to display the chart , i am getting the error of " undefined".

kindly help.

below is my code behind .

 

using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Linq;
using System.Web;


public partial class Dashboard : System.Web.UI.Page
{

public ActionResult Index()
{
return View();
}

private ActionResult View()
{
return View();
}

// Using ADO.NET Code
public JsonResult ChartFunction()
{
string query = "select [Month],SalesCount from ProductSales";
string constring = @"Data Source=JOHN-PC;Initial Catalog=SmartCare_Melchizedek ;Integrated Security=True;";
List<ProductDetails> chartData = new List<ProductDetails>();
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
ProductDetails pd = new ProductDetails();
pd.Month = dr["Month"].ToString();
pd.SalesCount = Convert.ToInt32(dr["SalesCount"]);
chartData.Add(pd);
}
}
con.Close();
}
}
return Json(chartData, JsonRequestBehavior.AllowGet);
}

private JsonResult Json(List<ProductDetails> chartData, object allowGet)
{
return Json(chartData, JsonRequestBehavior.AllowGet);
}

class ProductDetails
{
public string Month { get; set; }
public Nullable<int> SalesCount { get; set; }
}

public class JsonRequestBehavior
{
public static object AllowGet { get; set; }
}
}