trying to add script to script editor, not working

Question

I am trying to add this script to create charts from my list, to script editor. I have added it, but it is not creating charts. Exampel taken from simego.com/blog/2013/09/charts-and-office-365-sharepoint-online

   <canvas id="myChart" width="600" height="400"></canvas>
     <script type="text/javascript">

    var collListItem; //ListItems
    var chartX = [];  //X-Axis Labels
    var chartY = [];  //Y-Axis Values

    var chartJs = "/Dashboard/Shared Documents/chart.js";
    var listName = "Clients"; //Data List Name
    var xAxisName = "Name";    //X-Axis Label Names from List
    var yAxisName = "Days to Next";    //Y-Axis Values from List
    var chartId = "myChart";    //Chart Canvas Div

    SP.SOD.executeOrDelayUntilScriptLoaded(function () {

        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle(listName);

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View></View>');
        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(collListItem);

        clientContext.executeQueryAsync(function () {

            var listItemEnumerator = collListItem.getEnumerator();

            //Create Points from ListData
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                chartX.push(oListItem.get_item(xAxisName));
                chartY.push(oListItem.get_item(yAxisName));
            }

            //Load Chart JS
            loadJS(chartJs, function () {

                //Generate Data
                var data = {
                    labels: this.chartX,
                    datasets: [
                        {
                            data: this.chartY
                        }
                    ]
                };

                //Display Chart
                var ctx = document.getElementById(chartId).getContext("2d");
                var myNewChart = new Chart(ctx).Bar(data);
            });

        }, null);

    }, 'SP.js');

    function loadJS(src, callback) {
        var s = document.createElement('script');
        s.src = src;
        s.async = true;
        s.onreadystatechange = s.onload = function () {
            var state = s.readyState;
            if (!callback.done && (!state || /loaded|complete/.test(state))) {
                callback.done = true;
                callback();
            }
        };
        document.getElementsByTagName('head')[0].appendChild(s);
    }
</script>

`

Answer 1

Not saying that this is necessarily the problem, but I have never liked dynamically loading scripts by writing a script tag into the head. So my first inclination would be to get rid of the loadJS function and just load the chart.js script normally:

<canvas id="myChart" width="600" height="400"></canvas>
<!-- just load the chart.js script normally -->
<!-- make sure to use the server relative URL to where the script is -->
<script type="text/javascript" src="/sites/My Site/Shared Documents/chart.js"></script>
<script type="text/javascript">

var collListItem; //ListItems
var chartX = [];  //X-Axis Labels
var chartY = [];  //Y-Axis Values

var listName = "Clients"; //Data List Name
var xAxisName = "Name";    //X-Axis Label Names from List
var yAxisName = "Days to Next";    //Y-Axis Values from List
var chartId = "myChart";    //Chart Canvas Div

SP.SOD.executeOrDelayUntilScriptLoaded(function () {

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(listName);

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(function () {

        var listItemEnumerator = collListItem.getEnumerator();

        //Create Points from ListData
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            chartX.push(oListItem.get_item(xAxisName));
            chartY.push(oListItem.get_item(yAxisName));
        }

        //Generate Data
        var data = {
            labels: this.chartX,
            datasets: [
                {
                    data: this.chartY
                }
            ]
        };

        //Display Chart
        var ctx = document.getElementById(chartId).getContext("2d");
        var myNewChart = new Chart(ctx).Bar(data);

    }, null);

}, 'SP.js');
</script>

---

Edit after question update with error messages:

There's quite a few errors going on there.

First, it seems like the chart.js script is not getting loaded properly. (The first error shown literally says "Failed to load resource", and if you look at the URL, it looks like for some reason it's trying to find the script inside the _layouts folder. There's also some other strange stuff going on with the URL there.)

But then the next two errors are thrown from chart.js, so it seems like it did get loaded somehow?

In any case, you then have some errors from sp.runtime.js and sp.js, which means the entire SharePoint Javascript client side framework is not getting loaded properly, so your attempts to load the list items is not going to work.

Also, some of the later error messages have URLs that look like they are from an App Web. Is this being done as an App or Add-In? If yes, you have to make sure you are loading the SP JSOM scripts correctly. Here is an article about that, and you may want to search for more.

Bottom line is - until you work out some of those other errors, chart.js is not going to work for you.