0

I am trying to use cs3 chart library but I get an error and not sure what it means.
I get this error MutationObserver not defined.

Here's my code:

HTML File

<script src="../SiteAssets/jquery.js"></script>
<script src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>

<link rel="stylesheet" href="../SiteAssets/c3.css">
<script src="../SiteAssets/d3v3.5.17.js"></script>
<script src="../SiteAssets/c3.js"></script>
<script src="../SiteAssets/Sample/c3_newSchoolItem.js"></script>


<table width="100%">
<tr>
    <td><div id="itemCntPieChart" style="width:300px; height:300px"></div>   </td>
    <td><div id="totallCostPieChart" style="width:300px; height:300px"> </div></td>
</tr>
</table>
<div id="dataDisplay" style="float:right;color:orange;font-size:15px"></div>
<div id="visnOverMil" style="width:300px; height:300px"></div>

JS Code file: c3_newSchool.js

// JavaScript source code

var projectApp = window.projectApp || {};
projectApp.winObjReference = null;
projectApp.url = _spPageContextInfo.webServerRelativeUrl;
console.log("url: " + projectApp.url);

projectApp.itemType = new Array();
  $(document).ready(function () {
     createCharts();
 });

 function createCharts() {
   retrieveStatusData();
  //retrieveData();
  // retrieveBarData();
}

 function retrieveStatusData() {
  var allItems = new countAnything();
  var statusCnt = 1;

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

chartArray = allItems.getChartData();
plotPieChart(chartArray, "itemCntPieChart", "Item Status Count", "Status");
}



function countAnything() {
   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

 function plotPieChart(data, divName, title, filter) {
    var chart = c3.generate({
    data: {
        columns: [
            data
        ],
        type: 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); }
    }
});
}

When I do further debugging, I notice that 'plotPieChart' does run but I'm not sure why the chart does not generate. In firefox, here's the data in an array. Could that be the problem? Am I passing it in correctly?

enter image description here

0

Looks like you are using IE 9 or IE 10 browser. For IE9 and IE10, polyfill is required because c3 uses MutationObserver, which is not supported in those versions. However, it's not required if charts always will be binded to the DOM specified by bindto because MutationObserver is not called in that case.

Reference - C3.js

So, you need to add a polyfill.

Try below code in your html file :

<script src="../SiteAssets/jquery.js"></script>
<script src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/MutationObserver.min.js"></script>

<link rel="stylesheet" href="../SiteAssets/c3.css">
<script src="../SiteAssets/d3v3.5.17.js"></script>
<script src="../SiteAssets/c3.js"></script>
<script src="../SiteAssets/Sample/c3_newSchoolItem.js"></script>


<table width="100%">
<tr>
    <td><div id="itemCntPieChart" style="width:300px; height:300px"></div>   </td>
    <td><div id="totallCostPieChart" style="width:300px; height:300px"> </div></td>
</tr>
</table>
<div id="dataDisplay" style="float:right;color:orange;font-size:15px"></div>
<div id="visnOverMil" style="width:300px; height:300px"></div>

Here, i have added the reference of mutationobserver.js which will remove the error.

Reference - Webcomponentsjs

  • That did not work. – JustMe Feb 10 '17 at 20:07
  • I think it may have something to do with my code. I added a c3 sample code into my sharepoint page and it showed. The sample code can be found here. jsfiddle.net/isogunro/617jagyo/1 – JustMe Feb 10 '17 at 21:35

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.