none
Charts.js in SharePoint 2013 RRS feed

  • Question

  • Hello Techies,
    By referring this site, i tried creating line chart for custom list, refer below screenshot of list and its columns

    Here is my code:

    // Declare the variables.
    var sitesChart = sitesChart || {};
     
    sitesChart.Colors = ['#1BA1E2', '#E51400', '#339933','#56348E'];
     
    sitesChart.ChartTitle =[];
    sitesChart.ChartT1 = [];
    sitesChart.ChartT2 = [];
    sitesChart.ChartT3= [];
    sitesChart.ChartT4= [];
     
     
    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) {
        sitesChart.ChartTitle.push(ctx.CurrentItem.Title);//columns names
        sitesChart.ChartT1.push(parseInt(ctx.CurrentItem.RETL));//columns names
        sitesChart.ChartT2.push(parseInt(ctx.CurrentItem.MAJORS));//columns names
        sitesChart.ChartT3.push(parseInt(ctx.CurrentItem.DMR));//columns names
        sitesChart.ChartT4.push(parseInt(ctx.CurrentItem.CSP));//columns names
        return '';
    }
      
     
    sitesChart.CustomHeader = function (ctx) {
        return "<canvas id='lineChart' width='700' height='400' style='float:left;margin-right:20px;'></canvas><div id='chartDesc'></div>";
    }
      
    // Override the footer.
    sitesChart.CustomFooter = function () {
      
        debugger;
        var data = {
            labels: sitesChart.ChartTitle,
            datasets: [
            {
                strokeColor: sitesChart.Colors[0],
                pointColor: sitesChart.Colors[0],
                pointStrokeColor: "#fff",
                data: sitesChart.ChartT1
            },
            {
                strokeColor: sitesChart.Colors[1],
                pointColor: sitesChart.Colors[1],
                pointStrokeColor : "#fff",
                data: sitesChart.ChartT2
            },
            {
                strokeColor: sitesChart.Colors[2],
                pointColor: sitesChart.Colors[2],
                pointStrokeColor : "#fff",
                data: sitesChart.ChartT3
            },
            {
                strokeColor: sitesChart.Colors[3],
                pointColor: sitesChart.Colors[3],
                pointStrokeColor : "#fff",
                data: sitesChart.ChartT4
            }
            ]
        }
      
        // Line chart options.
        var options = {
            scaleOverride: true,
            scaleSteps: 10,
            scaleStepWidth: 10,
            scaleStartValue: 0,
            pointDotRadius: 7,
            datasetFill: false
        };
      
      
        svar chart = $('#lineChart').get(0).getContext("2d");
        //var chart = document.getElementById('lineChart').getContext('2d');
    
        new Chart(chart).Line(data, options);
      
     
        sitesChart.Desc += '&lt;h2&gt;&lt;span style="color:' + sitesChart.Colors[0] + ';font-weight:italic;"&gt;RETL&lt;/span&gt;&lt;h2&gt;';
        sitesChart.Desc += '&lt;h2&gt;&lt;span style="color:' + sitesChart.Colors[1] + ';font-weight:italic;"&gt;MAJORS&lt;/span&gt;&lt;/h2&gt;';
        sitesChart.Desc += '&lt;h2&gt;&lt;span style="color:' + sitesChart.Colors[2] + ';font-weight:italic;"&gt;DMR&lt;/span&gt;&lt;/h2&gt;';
        sitesChart.Desc += '&lt;h2&gt;&lt;span style="color:' + sitesChart.Colors[3] + ';font-weight:italic;"&gt;CSP&lt;/span&gt;&lt;/h2&gt;';
      
        $('#chartDesc').html(sitesChart.Desc);
      
        return '';
    }
      
     
    $(document).ready(sitesChart.FieldRenderSetup());// JavaScript source code
    

    I am getting this below error on page load after using this script as a jslink to a custom list.
    Cannot read property 'getContext' of undefined

    I tried debugging the code and i am able see the list data in dev tools screen.
    Please let me know anybody faced such similar issue while implementing charts in SharePoint 2013 or do let me know is there any other way to implement charts in SharePoint.



    Tuesday, April 4, 2017 3:15 PM

Answers

  • Hi,

    Please follow the steps below:

    1. Download the Chart.js from:

    https://github.com/chartjs/Chart.js/releases/download/v2.5.0/Chart.js

    2. Download the jQuery library from:

    http://code.jquery.com/jquery-3.1.0.min.js

    3. Save the code below as js file(Demochart.js).

    // Declare the variables.
    var sitesChart = sitesChart || {};
     
    sitesChart.Colors = ['#1BA1E2', '#E51400', '#339933','#56348E'];
     
    sitesChart.ChartTitle =[];
    sitesChart.ChartT1 = [];
    sitesChart.ChartT2 = [];
    sitesChart.ChartT3= [];
    sitesChart.ChartT4= [];
     
     
    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) {
        sitesChart.ChartTitle.push(ctx.CurrentItem.Title);//columns names
        sitesChart.ChartT1.push(parseInt(ctx.CurrentItem.RETL));//columns names
        sitesChart.ChartT2.push(parseInt(ctx.CurrentItem.MAJORS));//columns names
        sitesChart.ChartT3.push(parseInt(ctx.CurrentItem.DMR));//columns names
        sitesChart.ChartT4.push(parseInt(ctx.CurrentItem.CSP));//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 () {
      
        debugger;
        var data = {
            labels: sitesChart.ChartTitle,
            datasets: [
            {
                label: "RETL",
                fill: false,
                borderColor: sitesChart.Colors[0],
                pointBorderColor: sitesChart.Colors[0],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT1
            },
            {
                label: "MAJORS",
                fill: false,
                borderColor: sitesChart.Colors[1],
                pointBorderColor: sitesChart.Colors[1],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT2
            },
            {
                label: "DMR",
                fill: false,
                borderColor: sitesChart.Colors[2],
                pointBorderColor: sitesChart.Colors[2],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT3
            },
            {
                label: "CSP",
                fill: false,
                borderColor: sitesChart.Colors[3],
                pointBorderColor: sitesChart.Colors[3],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT4
            }
            ]
        }
      
        // Line chart options.
        var options = {
            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

    4. Upload the Chart.js, jquery-3.1.0.min.js and Demochart.js into Site Assets document library.

    5. Refer to the js files in JSLink.

    ~site/SiteAssets/jquery-3.1.0.min.js|~site/SiteAssets/Chart.js|~site/SiteAssets/Demochart.js

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Sachchin Friday, April 7, 2017 6:14 AM
    Wednesday, April 5, 2017 7:52 AM
    Moderator
  • Hi,

    Please set responsive:false, in options.

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

    If you want to use Chart.js, I suggest you see the documentation of the Chart.js, it will help you to built your charts.

    http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Friday, April 7, 2017 1:36 AM
    Moderator

All replies

  • Hi,

    Please follow the steps below:

    1. Download the Chart.js from:

    https://github.com/chartjs/Chart.js/releases/download/v2.5.0/Chart.js

    2. Download the jQuery library from:

    http://code.jquery.com/jquery-3.1.0.min.js

    3. Save the code below as js file(Demochart.js).

    // Declare the variables.
    var sitesChart = sitesChart || {};
     
    sitesChart.Colors = ['#1BA1E2', '#E51400', '#339933','#56348E'];
     
    sitesChart.ChartTitle =[];
    sitesChart.ChartT1 = [];
    sitesChart.ChartT2 = [];
    sitesChart.ChartT3= [];
    sitesChart.ChartT4= [];
     
     
    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) {
        sitesChart.ChartTitle.push(ctx.CurrentItem.Title);//columns names
        sitesChart.ChartT1.push(parseInt(ctx.CurrentItem.RETL));//columns names
        sitesChart.ChartT2.push(parseInt(ctx.CurrentItem.MAJORS));//columns names
        sitesChart.ChartT3.push(parseInt(ctx.CurrentItem.DMR));//columns names
        sitesChart.ChartT4.push(parseInt(ctx.CurrentItem.CSP));//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 () {
      
        debugger;
        var data = {
            labels: sitesChart.ChartTitle,
            datasets: [
            {
                label: "RETL",
                fill: false,
                borderColor: sitesChart.Colors[0],
                pointBorderColor: sitesChart.Colors[0],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT1
            },
            {
                label: "MAJORS",
                fill: false,
                borderColor: sitesChart.Colors[1],
                pointBorderColor: sitesChart.Colors[1],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT2
            },
            {
                label: "DMR",
                fill: false,
                borderColor: sitesChart.Colors[2],
                pointBorderColor: sitesChart.Colors[2],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT3
            },
            {
                label: "CSP",
                fill: false,
                borderColor: sitesChart.Colors[3],
                pointBorderColor: sitesChart.Colors[3],
                pointBackgroundColor: "#fff",
                data: sitesChart.ChartT4
            }
            ]
        }
      
        // Line chart options.
        var options = {
            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

    4. Upload the Chart.js, jquery-3.1.0.min.js and Demochart.js into Site Assets document library.

    5. Refer to the js files in JSLink.

    ~site/SiteAssets/jquery-3.1.0.min.js|~site/SiteAssets/Chart.js|~site/SiteAssets/Demochart.js

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Sachchin Friday, April 7, 2017 6:14 AM
    Wednesday, April 5, 2017 7:52 AM
    Moderator
  • Hello Dennis,
    Thanks for your response.
    I able to see the graph but the size of the canvas is increasing gradually after page load.
    Any idea.. what is the issue.

    I thought it's a custom master page issue but I tried with seatle master page but still the same issue.
    here is the screenshot:


    • Edited by Sachchin Thursday, April 6, 2017 1:27 PM
    Thursday, April 6, 2017 1:23 PM
  • Hi,

    Please set responsive:false, in options.

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

    If you want to use Chart.js, I suggest you see the documentation of the Chart.js, it will help you to built your charts.

    http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Friday, April 7, 2017 1:36 AM
    Moderator
  • Thanks dennis.. its working like charm :) :) 
    Friday, April 7, 2017 6:14 AM