Sharepoint, Chart.JS and multiple charts not working

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>