1

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>

`enter image description here

2

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.

  • I tried this still did not work. Am i messing the path address to the script ? – Karen Apr 26 '16 at 13:42
  • 1
    I'm not sure if you are messing up the path, only you know where you put the script. ;) But, it certainly is something I would look at closely. Can you check in your browser's developer tools window to see if the script got loaded? Also, you can see if there are any Javascript errors reported. – Dylan Cristy Apr 26 '16 at 13:49
  • I have edited question with the error screenshot – Karen Apr 26 '16 at 15:47
  • 1
    Updated my answer. – Dylan Cristy Apr 26 '16 at 16:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.