JScript Runtime Error a.cssHooks.Opacity

Dec 15, 2014 at 1:22 AM
I'm converting from fusion charts to Highcharts and it hasn't been without some challenges. My JavaScript experience is fairly week which is why I'm probably having this issue. I'm retrieving data from a database and placing it onto a column chart. The chart renders fine when I don't reference the highchart.js file within the .aspx page but when it's referenced, a message box appears indicating "Microsoft JScript runtime error: 'a.cssHooks:opacity' is null or not an object. I can't understand how to instantiate that object if that is what's missing. Attached is a screen shot of the error. By the way, I am using the following for a development environment, noting that I am simply a hobbyist...
  • Microsoft Windows XP (need to switch over)
  • Microsoft Visual Web Developer 2010 Express
  • .Net 3.5
    My aspx page code is as follows:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="DailyCarCount.aspx.cs" Inherits="HighChartExperiment2._DailyCarCount" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/highcharts.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<highchart:LineChart runat="server" ID="DailyChart" Width="568" Height="320" />
</div>
<br />
<br />
<div>
<highchart:ColumnChart runat="server" ID="HourlyChart" Width="568" Height="320" />
</div>
</asp:Content>
My aspx code behind is as follows:
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.ObjectModel;
using Highchart.Core.Data.Chart;
using Highchart.Core;
using Highchart;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;


namespace HighChartExperiment2
{
    public partial class _DailyCarCount : System.Web.UI.Page
    {

        DataSet dsSeries = new DataSet();
        ArrayList dayValues = new ArrayList();
        ArrayList hourValues = new ArrayList();
        ArrayList dayXCategories = new ArrayList();
        ArrayList hourXCategories = new ArrayList();

        object[] yDayValues, yHourValues;

        string DailySQLQuery = "SELECT a.ID_D, a.DayName, COUNT(*) AS Cars FROM CarCount b, Power_Day a WHERE a.ID_D=day(b.DateTime) AND DatePart(year,b.DateTime)=DatePart(year,GetDate()) AND DatePart(month,b.DateTime)=month(Getdate()) GROUP BY a.ID_D, a.DayName ORDER BY a.ID_D";
        string HourlySQLQuery = "SELECT a.ID_H, a.Name, COUNT(*) AS Cars FROM CarCount b, Power_Hour a WHERE a.ID_H=DATEPART(hour,b.DateTime) AND DatePart(day,b.DateTime)=DatePart(day,GetDate()) AND DatePart(month,b.DateTime)=DatePart(month,GetDate()) AND DatePart(year,b.DateTime)=DatePart(year,GetDate()) GROUP BY a.ID_H, a.Name ORDER BY a.ID_H";

        protected void Page_Load(object sender, EventArgs e)
        {
            BuildDailyChart();
            BuildHourlyChart();
        }

        public DataSet BindData(string sqlQuery)
        {
            string connString = ConfigurationManager.ConnectionStrings["HomeseerConnectionString"].ToString();
            SqlConnection con = new SqlConnection(connString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandText = sqlQuery;
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            try
            {
                DataSet ds = new DataSet();
                da.Fill(ds);
                return ds;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        private void BuildDailyChart()
        {
            dsSeries = BindData(DailySQLQuery);

            if (dsSeries == null) return;

            foreach (DataRow dr in dsSeries.Tables[0].Rows)
            {
                dayXCategories.Add(dr["DayName"]);
            }

            foreach (DataRow dr1 in dsSeries.Tables[0].Rows)
            {
                //hidValues11.Add(Convert.ToInt32(dr1["Cars"]));
                dayValues.Add(Convert.ToInt32(dr1["Cars"].ToString()));
                yDayValues = dayValues.ToArray(typeof(object)) as object[];

            }

            DailyChart.Title = new Title("Cars per Day");

            DailyChart.YAxis.Add(new YAxisItem { title = new Title("Cars Driving By") });
            DailyChart.XAxis.Add(new XAxisItem { categories = dayXCategories.ToArray(typeof(string)) as string[] });

            var series = new Collection<Serie>();
            series.Add(new Serie { name = "Total Number of Cars", data = yDayValues });
            DailyChart.PlotOptions = new Highchart.Core.PlotOptions.PlotOptionsLine { dataLabels = new Highchart.Core.PlotOptions.DataLabels { enabled = true } };
            //myChart.Tooltip = new ToolTip("this.x +': '+ this.y +' cars'");

            DailyChart.Legend = new Legend
            {
                layout = Layout.vertical,
                borderWidth = 3,
                align = Align.right,
                y = 400,
                x = 400,
                verticalAlign = Highchart.Core.VerticalAlign.top,
                shadow = true,
                backgroundColor = "#e3e6be"
            };

            DailyChart.DataSource = series;
            DailyChart.DataBind();
        }

        private void BuildHourlyChart()
        {
            dsSeries = BindData(HourlySQLQuery);

            if (dsSeries == null) return;

            foreach (DataRow dr in dsSeries.Tables[0].Rows)
            {
                hourXCategories.Add(dr["Name"]);
            }

            foreach (DataRow dr1 in dsSeries.Tables[0].Rows)
            {
                //hidValues11.Add(Convert.ToInt32(dr1["Cars"]));
                hourValues.Add(Convert.ToInt32(dr1["Cars"].ToString()));
                yHourValues = hourValues.ToArray(typeof(object)) as object[];

            }

            HourlyChart.Title = new Title("Cars per Hour");

            HourlyChart.YAxis.Add(new YAxisItem { title = new Title("Cars Driving By") });
            HourlyChart.XAxis.Add(new XAxisItem { categories = hourXCategories.ToArray(typeof(string)) as string[] });

            var series = new Collection<Serie>();
            series.Add(new Serie { name = "Total Number of Cars", data = yHourValues });
            HourlyChart.PlotOptions = new Highchart.Core.PlotOptions.PlotOptionsColumn { dataLabels = new Highchart.Core.PlotOptions.DataLabels { enabled = true } };
            //HourlyChart.Tooltip = new ToolTip("this.x +': '+ this.y +' cars'");

            HourlyChart.Legend = new Legend
            {
                layout = Layout.vertical,
                borderWidth = 3,
                align = Align.right,
                y = 400,
                x = 400,
                verticalAlign = Highchart.Core.VerticalAlign.top,
                shadow = true,
                backgroundColor = "#e3e6be"
                
            };



            HourlyChart.DataSource = series;
            HourlyChart.DataBind();

                     
        }
    }
}
Any support would be greatly appreciated. This issue has consumed a considerable amount of my time already.