// Declare the variables.
var sitesChart = sitesChart || {};

sitesChart.Colors = ['#1BA1E2', '#E51400', '#339933','#56348E'];

sitesChart.ChartTitle =[];
sitesChart.ChartT1 = [];
sitesChart.ChartT2 = [];
sitesChart.ChartT3= [];


sitesChart.Desc = '';

// Override the rendering.
sitesChart.FieldRenderSetup = function () {
    var override = {};
    override.Templates = {};
    override.Templates.Header = sitesChart.CustomHeader;
    override.Templates.Item = sitesChart.CustomItem;
    override.Templates.Footer = sitesChart.CustomFooter;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(override);
};


sitesChart.CustomItem = function (ctx) {
        var str = ctx.view.toString();
        if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}"){
            sitesChart.ChartTitle.push(ctx.CurrentItem.Title);//columns names
            sitesChart.ChartT1.push(parseInt(ctx.CurrentItem.Team1));//columns names
            sitesChart.ChartT2.push(parseInt(ctx.CurrentItem.Team2));//columns names
            sitesChart.ChartT3.push(parseInt(ctx.CurrentItem.Team3));//columns names
            return '';
        }

        if(ctx.view === "{31BD318D-04D3-4B78-8F50-30855F8D5B75}"){
            sitesChart.ChartTitle.push(ctx.CurrentItem.Title);//columns names
            sitesChart.ChartT1.push(parseInt(ctx.CurrentItem.Team1));//columns names
            sitesChart.ChartT2.push(parseInt(ctx.CurrentItem.Team2));//columns names
            sitesChart.ChartT3.push(parseInt(ctx.CurrentItem.Team3));//columns names
            return '';
        }

        return RenderItemTemplate(ctx);
}


sitesChart.CustomHeader = function (ctx) {
    if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}"){
        return "<canvas id='lineChart' width='700' height='400' style='float:left;margin-right:20px;'></canvas>";
    }

    if(ctx.view === "{31BD318D-04D3-4B78-8F50-30855F8D5B75}"){
        return "<canvas id='lineChart2' width='700' height='400' style='float:left;margin-right:20px;'></canvas>";
    }
   return RenderHeaderTemplate(ctx);
}

// Override the footer.
sitesChart.CustomFooter = function () {
    if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}"){
    var data = {
        labels: sitesChart.ChartTitle,
        datasets: [
        {
            label: "Team1",
            fill: false,
            borderColor: sitesChart.Colors[0],
            pointBorderColor: sitesChart.Colors[0],
            pointBackgroundColor: "#fff",
            data: sitesChart.ChartT1
        },
        {
            label: "Team2",
            fill: false,
            borderColor: sitesChart.Colors[1],
            pointBorderColor: sitesChart.Colors[1],
            pointBackgroundColor: "#fff",
            data: sitesChart.ChartT2
        },
        {
            label: "Team3",
            fill: false,
            borderColor: sitesChart.Colors[2],
            pointBorderColor: sitesChart.Colors[2],
            pointBackgroundColor: "#fff",
            data: sitesChart.ChartT3
        }
        ]
    }

    // Line chart options.
    var options = {
        responsive: false,
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 10,
        scaleStartValue: 0,
        pointDotRadius: 7,
        datasetFill: false
    };


    var chart = $('#lineChart').get(0).getContext("2d");

    new Chart(chart, {
        type: 'line',
        data: data,
        options: options
    });

    return '';
    }

    if(ctx.view === "{31BD318D-04D3-4B78-8F50-30855F8D5B75}"){
    var data = {
        labels: sitesChart.ChartTitle,
        datasets: [
        {
            label: "Team1",
            fill: false,
            borderColor: sitesChart.Colors[0],
            pointBorderColor: sitesChart.Colors[0],
            pointBackgroundColor: "#fff",
            data: sitesChart.ChartT1
        },
        {
            label: "Team2",
            fill: false,
            borderColor: sitesChart.Colors[1],
            pointBorderColor: sitesChart.Colors[1],
            pointBackgroundColor: "#fff",
            data: sitesChart.ChartT2
        },
        {
            label: "Team3",
            fill: false,
            borderColor: sitesChart.Colors[2],
            pointBorderColor: sitesChart.Colors[2],
            pointBackgroundColor: "#fff",
            data: sitesChart.ChartT3
        }
        ]
    }

    // Line chart options.
    var options = {
        responsive: false,
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 10,
        scaleStartValue: 0,
        pointDotRadius: 7,
        datasetFill: false
    };


    var chart = $('#lineChart2').get(0).getContext("2d");

    new Chart(chart, {
        type: 'bar',
        data: data,
        options: options
    });

    return '';
    }
    return RenderFooterTemplate(ctx);
}

$(document).ready(sitesChart.FieldRenderSetup());// JavaScript source code