Unable to get property 'initElement' of undefined or null reference

Isaac
Isaac used Ask the Experts™
on
I have a jqplot pie chart that works great in Chrome and firefox but not in IE.  Any ideas why or how to resolve?
THanks

// JavaScript source code
//Create name space so their will be no collisions if application grows
var schoolApp = window.schoolApp || {};
schoolApp.itemType = new Array();

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(retrieveData, "sp.js");
});

function retrieveData() {
    var allItems = new getItems();

    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "SchoolITems",
        CAMLViewFields: "<ViewFields>" +
                              "<FieldRef Name='Item' />" +
                              "<FieldRef Name='orderDate' />" +
                              "<FieldRef Name='Region' />" +
                              "<FieldRef Name='Title' />" +
                              "<FieldRef Name='Total' />" +
                           "</ViewFields>",       
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                allItems.addItems($(this).attr("ows_Item"), $(this).attr("ows_Total"));
            });
        }
    });

    chartArray = allItems.getChartData();
    console.log(chartArray);
    plotChart(chartArray);
}

function getItems() {
    this.inputs = {};
    this.items = [];

    this.addItems = function (unqItem, amount1) {
        if (!this.inputs[unqItem]) {
            this.items.push(unqItem);
            this.inputs[unqItem] = 0;
        }
        //this.inputs[unqItem] += amount1;
        this.inputs[unqItem] = parseInt(this.inputs[unqItem]) + parseInt(amount1);


    };

    this.getChartData = function () {
        var chartAry = [];
        for (i = 0; i < this.items.length; ++i) {
            chartAry.push([this.items[i], this.inputs[this.items[i]]]);
        }
        return chartAry;
    }

} // end of function truck2pie


function plotChart(data) {
    var plot1 = jQuery.jqplot('pieChart', [data],
    {
        seriesDefaults: {
            // Make this a pie chart.
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                fill: true,
                sliceMargin: 7,
                dataLabels: 'value',  //Show data instead of label
                showDataLabels: true,
                linewidth: 5,
                shadowOffset: 2,
                shadowDepth: 5, //Number of strokes to make when drawing shadow. Each stroke offset by shadowOfset from the last.
                shadowAlpha: 0.07
            }
        },
        legend: { show: true, location: 'e' }
    }
  );

}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
what about :
// JavaScript source code
//Create name space so their will be no collisions if application grows
var schoolApp = window.schoolApp || {};
schoolApp.itemType = new Array();

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(retrieveData, "sp.js");
});

function retrieveData() {
    var allItems = new getItems();

    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "SchoolITems",
        CAMLViewFields: "<ViewFields>" +
                              "<FieldRef Name='Item' />" +
                              "<FieldRef Name='orderDate' />" +
                              "<FieldRef Name='Region' />" +
                              "<FieldRef Name='Title' />" +
                              "<FieldRef Name='Total' />" +
                           "</ViewFields>",       
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                allItems.addItems($(this).attr("ows_Item"), $(this).attr("ows_Total"));
                chartArray = allItems.getChartData();
                console.log(chartArray);
                plotChart(chartArray);
            });
        }
    });

}

function getItems() {
    this.inputs = {};
    this.items = [];

    this.addItems = function (unqItem, amount1) {
        if (!this.inputs[unqItem]) {
            this.items.push(unqItem);
            this.inputs[unqItem] = 0;
        }
        //this.inputs[unqItem] += amount1;
        this.inputs[unqItem] = parseInt(this.inputs[unqItem]) + parseInt(amount1);


    };

    this.getChartData = function () {
        var chartAry = [];
        for (i = 0; i < this.items.length; ++i) {
            chartAry.push([this.items[i], this.inputs[this.items[i]]]);
        }
        return chartAry;
    }

} // end of function truck2pie


function plotChart(data) {
    var plot1 = jQuery.jqplot('pieChart', [data],
    {
        seriesDefaults: {
            // Make this a pie chart.
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                fill: true,
                sliceMargin: 7,
                dataLabels: 'value',  //Show data instead of label
                showDataLabels: true,
                linewidth: 5,
                shadowOffset: 2,
                shadowDepth: 5, //Number of strokes to make when drawing shadow. Each stroke offset by shadowOfset from the last.
                shadowAlpha: 0.07
            }
        },
        legend: { show: true, location: 'e' }
    }
  );

}

Open in new window

IsaacSharePoint Client Side Developer

Author

Commented:
That did not work.  Also, my apologies for not stating the error I was getting initially.

jQplot Error
IsaacSharePoint Client Side Developer

Author

Commented:
It's actually an error pointing to a line in the jquery.jqplot.js file.
I'm thinking that maybe some of the fields in SharePoint is blank and IE does not like that.  I guess.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
replace :
console.log(chartArray);
by :
console.log(JSON.stringify(chartArray));

and from Chrome or FF, paste here what you got in the console, check also what you get in IE
Principal Solutions Architect
Top Expert 2006
Commented:
This really depends on which version of IE you are executing this script on.

Note, excanvas is required only for IE versions below 9. IE 9 includes native support for the canvas element and does not require excanvas

You need to add excanvas for IE8 and below with a script tag like

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->

Open in new window


or

If IE 10 best to use direct
<script language="javascript" type="text/javascript" src="excanvas.js"></script>

Open in new window


Check documentation: http://www.jqplot.com/docs/files/usage-txt.html
IsaacSharePoint Client Side Developer

Author

Commented:
I'm using IE 11

console.log(JSON.stringify(chartArray)); produces [[null,11],["1",377175],["1",377175],["1",377175],["1",377175],["15",16162009]]
IsaacSharePoint Client Side Developer

Author

Commented:
After digging further, I added     <script src="http://iwebarea.com/SiteAssets/excanvas.js"></script>  to my file and the error was gone but the chart looked like this
color missing
IsaacSharePoint Client Side Developer

Author

Commented:
Here's the problem.  The charts don't work in IE8.  Though I am using IE 11, in SharePoint 2010, the xua-compatible meta tag is set to ie 8 in the masterpage which was causing my issue.
<meta http-equiv="X-UA-Compatible" content="IE=8" />

I need to somehow force it to be EDGE or IE 10 on the page that uses the chart.

Thank you all for you help.
IsaacSharePoint Client Side Developer

Author

Commented:
Thank you!
IsaacSharePoint Client Side Developer

Author

Commented:
My solution actually came from a colleague who saw my page and pointed out that SharePoint 2010 is forced into IE 8 mode.
But  I do appreciate Siva's comment.

Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial