1

Following this Article

Scenario: To create charts. Using chart.js + jquery + Demochart.js file I have modified using the one given in article. I have two list view webparts in same page. So I apply these JS links to first List view webpart it works but the second list view does not show. I use first list view webpart's View ID (taken from SPdesigner) to distinguish between webparts...so JSlinks affect only the first one.

Am I using Demochart.js the right way?

Code of Demochart.js:

// 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 (ctx) {
    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();

        //Using Webpart view id to distinguish between webparts 
        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 '';
}


sitesChart.CustomHeader = function (ctx) {
    return "<canvas id='lineChart' width='700' height='400' style='float:left;margin-right:20px;'></canvas>";
}

// Override the footer.
sitesChart.CustomFooter = function () {

    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 '';
}

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

Before applying:

enter image description here

After applying:

enter image description here

1 Answer 1

1

If you want to show chart in second webpart also, then remove if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}") condition from sitesChart.CustomItem

If you want to show default list view for the second webpart then do as below

//In CustomItem function
if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}"){
//Your code
}
return RenderItemTemplate(ctx); //write this line instead return ''

//In CustomHeader function
if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}"){
//Your code
}
return RenderHeaderTemplate(ctx);

//In CustomFooter function
if(ctx.view === "{3FE32257-65DA-467F-919B-16B742BA932E}"){
//Your code
}
return RenderFooterTemplate(ctx);
10
  • As you said i've applied these changes see -> pastebin.com/PhKtn7vC
    – akg1421
    Apr 19, 2018 at 10:50
  • You have not added 'return RenderHeaderTemplate(ctx);' in CustomHeader
    – Nafe
    Apr 19, 2018 at 11:41
  • there is a canvas being returned in that line... The chart may not show if I don't return it?!? ... im not sure. Let me see!
    – akg1421
    Apr 19, 2018 at 12:08
  • It gives error TypeError: Cannot read property 'getContext' of undefined See->imgur.com/a/Dm4O2 Code->pastebin.com/fVzYb1Gh
    – akg1421
    Apr 19, 2018 at 12:14
  • uncomment "return <canvas id='lineChart' ..>" in CustomHeader and try again
    – Nafe
    Apr 20, 2018 at 6:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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