4

I'm relatively new to Sharepoint and am having a rather annoying issue. I am using Sharepoint 2013 and I am creating 3 donut charts all to be displayed on the same page, using chart.js.

I have three separate HTML pages each creating a single donut chart, they have different div and canvas names, variables, everything is different.

They are each in their own web part with a content editor link to the relevant html file. The three web parts are side by side on a single page.

For some reason, in edit mode I can see all three charts as expected, however, when I save the page only the last chart is drawn. The object data is all being overwritten by the last chart and I'm stumped as to why. Any help is much appreciated, it's driving me slightly mad! edit - only the last, yellow chart is displayed once saved

<div class ="HalfDonutTest">
<b> 
<h3>Half donut test</h3>  
</b>  
<canvas id="HalfDonutTest"></canvas>  
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
    <script type="text/javascript">

    function donutChart()
    {
        var clientContext = new SP.ClientContext('/sites/sitename/');

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)); 
    }
    SP.SOD.executeOrDelayUntilScriptLoaded(donutChart, 'sp.js'); 

    function onQuerySucceeded()
    {

    var data = {
        labels: [
            "Red",
            "Red",
            "Red"
        ],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#ff0000",
                    "#ff0000",
                    "#ff0000"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
    };


    var hdctx = document.getElementById("HalfDonutTest").getContext("2d");
    var hdchart = new Chart(hdctx , {type: "doughnut", data: data, options: {rotation: 1 * Math.PI,circumference: 1 * Math.PI}});

    hdchart.destroy();
    hdchart.clear();

    }

    function onQueryFailed()
    {
    alert("Context creation Failed");

    }

</script>

Chart 2

    <div class ="HalfDonutTest1">
    <b> 
    <h3>Half donut test 1</h3>  
    </b>  
    <canvas id="HalfDonutTest1"></canvas>  
    </div>


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
    <script type="text/javascript">

    function donutChart1()
        {
            var clientContext1 = new SP.ClientContext('/sites/sitename/');

            clientContext1.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)); 
        }
        SP.SOD.executeOrDelayUntilScriptLoaded(donutChart1, 'sp.js'); 

        function onQuerySucceeded()
        {

        var data1 = {
            labels: [
                "Blue",
                "Blue",
                "Blue"
            ],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#0000ff",
                        "#0000ff",
                        "#0000ff"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };


        var hd1ctx = document.getElementById("HalfDonutTest1").getContext("2d");
        var hd1chart = new Chart(hd1ctx , {type: "doughnut", data: data1, options: {rotation: 1 * Math.PI,circumference: 1 * Math.PI}});

        hd1chart.destroy();
        hd1chart.clear();

        }

        function onQueryFailed()
        {
        alert("Context creation Failed");

        }

    </script>

Chart 3

        <div class ="HalfDonutTest2">
        <b> 
        <h3>Half donut test 2</h3>  
        </b>  
        <canvas id="HalfDonutTest2"></canvas>  
        </div>


        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
        <script type="text/javascript">

        function donutChart2()
        {
            var clientContext2 = new SP.ClientContext('/sites/sitename/');

            clientContext2.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)); 
        }
        SP.SOD.executeOrDelayUntilScriptLoaded(donutChart2, 'sp.js'); 

        function onQuerySucceeded()
        {

        var data2 = {
            labels: [
                "Yellow",
                "Yellow",
                "Yellow"
            ],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#ffff00",
                        "#ffff00",
                        "#ffff00"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };


        var hd2ctx = document.getElementById("HalfDonutTest2").getContext("2d");
        var hd2chart = new Chart(hd2ctx , {type: "doughnut", data: data2, options: {rotation: 1 * Math.PI,circumference: 1 * Math.PI}});

        hdchart.destroy();
        hdchart.clear();

        }

        function onQueryFailed()
        {
        alert("Context creation Failed");

        }

    </script>
  • Could you post the code for all three charts? – James Grizzle Mar 13 '17 at 16:54
  • 1
    Start by reducing your code, there is only one ClientContext on the page, so no need to reference it 3 times. Then slim it down to only 1 executeOrDelay function .. which then in turn calls the 3 donut functions. And that Function.createDelegate can go to, that is old IE8 code, and you are not passing any variables to the succeed function – Danny '365CSI' Engelman Mar 14 '17 at 12:20
  • 1
    If you want to do this modular, you have 3 webParts on screen only containing HTML, and a 4th webpart with code that processes all existing Canvasses on screen. And in development cases like this it is easier to make it work in JSFiddle or CodePen, and once it works massage it into SharePoint – Danny '365CSI' Engelman Mar 14 '17 at 12:23
  • 1
    @Danny'365CSI'Engelman if you repost that as an answer I will mark it as the correct one, that sorted it out fine, thanks. – Fiona Mar 14 '17 at 14:11
  • 1
    Post your own code as new answer and mark it (your are allowed aftyer n days or so) as answered. My comment is no answer, you solved it yourself... with a little help. More reading on that createDelegate stuff: sharepoint.stackexchange.com/questions/164893/… – Danny '365CSI' Engelman Mar 14 '17 at 14:31

Your Answer

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

Browse other questions tagged or ask your own question.