Create Line Basic Chart using Highcharts.js SharePoint 2013

Question

I'm trying to create a graph from an external list. Since the web part doesn't available in SP 2013, I try to create a Line Basic chart using Highcharts.js

In my external list, there are only two columns available, which are Date (in DATETIME format) and Amount (in Decimal format). The external list always will be only consisting of 7 row of data.

After create the code, I save the javascript code at script editor webpart and html code in content editor webpart. After saving the changes, I can't find something displayed on the page.

You can find the code below. Could someone let me know where I am missing something ?
Thank you :)

<script src="/Style%20Library/highcharts.js"></script>
<script src="/Style%20Library/series-label.js"></script>
<script src="/Style%20Library/exporting.js"></script>
<script type="text/javascript" src="/Style%20Library/jquery-1.9.1.min.js">


<script type="text/javascript">
var splistitems;
var seriesarray = new Array();

ExecuteOrDelayUntilScriptLoaded(GetChartData, "sp.js");

function GetChartData() {
 seriesarray = [];
 var currentcontext = new SP.ClientContext.get_current();
 var splist = currentcontext.get_web().get_lists().getByTitle('Production');
 var splistquery = new SP.CamlQuery();
 splistitems = splist.getItems(splistquery);
 currentcontext.load(splistitems);
 currentcontext.executeQueryAsync(Function.createDelegate(this, 
 GetChartDataSuccess), Function.createDelegate(this, GetChartDataFail));
}

function GetChartDataSuccess(sender, args) {
var splistitemcount = splistitems.get_count();
if (splistitemcount != 0) {
   var splistitemenumerator = splistitems.getEnumerator();
   while (splistitemenumerator.moveNext()) {
   var currentlistitem = splistitemenumerator.get_current();
   var itemdate = currentlistitem.get_item("Date");
   var itemamount = currentlistitem.get_item("Amount");
   var seriesitem = {
                       name: itemdate,
                       data: itemamount
                   };
    seriesarray.push(seriesitem);
  }
     DrawChart();
    }
  }

function GetChartDataFail(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' 
    +args.get_stackTrace());
}

 function DrawChart() {
    prodChart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart-container',
            type: 'line'
        },
        title: {
            text: 'Weekly Production'
        },
        xAxis: {
            categories: itemdate
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount'
            },
        },
         legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
            label: {
                connectorAllowed: false
            },
                pointStart: itemdate
    }
},
        series: [{
            name: itemdate,
            data: itemamount
        }, 
        ],

        responsive: {
        rules: [{
        condition: {
            maxWidth: 500
        },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
        }]
        }          
    });
}
</script>

For the HTML code :

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> 
  <head>
    <link rel="stylesheet" href="/css/highcharts.css"/><style type="text/css">
  </head>
  <body>
     <div id="chart-container">No Production Data Found.</div>
  </body>
  </html>

score 1 · Answer 1 · answered Apr 07 '18 at 09:41

In your example DrawChart function contains a few issues:

series: [{
        name: itemdate, //<- itemdate undeclared
        data: itemamount  //<-itemamount undeclared and it is expected to be a data array
},

series.data attribute expects the array of data to be provided, see series section documentation for a more details

The same goes to

xAxis: {
        categories: itemdate  //itemdate undeclared
}

According to documentation:

categories: Array.<String>
If categories are present for the xAxis, names are used instead of numbers for that axis

Given the input format of data the GetChartData function returns, you might want something like this:

function drawChart(data) {

    var values = data.map(function(item){
       return item.value; 
    });

    var categories = data.map(function(item){
       return item.name.getFullYear(); 
    });

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart-container',
            type: 'line'
        },
        title: {
            text: 'Weekly Production'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount'
            },
        },
         legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
            label: {
                connectorAllowed: false
            },
            //pointStart: itemdate
    }
},
        series: [{
            name: 'Amount',
            data: values
        }, 
        ],

        responsive: {
        rules: [{
        condition: {
            maxWidth: 500
        },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
        }]
        }          
    });
}

where

function getChartData(success,error) {
   var ctx = SP.ClientContext.get_current();
   var list = ctx.get_web().get_lists().getByTitle('Production');
   var qry = new SP.CamlQuery();
   var items = list.getItems(qry);
   ctx.load(items);
   ctx.executeQueryAsync(function(){
       var data = items.get_data().map(function(item){
            return {
                  name: item.get_item("Date"),
                  value: item.get_item("Amount")
            };
       });
       success(data);
   },error);
}


function logError(sender, args) {
    console.log(args.get_message());
}

Usage

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function(){
    getChartData(function(data){
       drawChart(data);
    },logError);
});

Key points:

Prefer SP.SOD.executeFunc over ExecuteOrDelayUntilScriptLoaded, refer this post on why
getChartData function has been refactored

Results

Create Line Basic Chart using Highcharts.js SharePoint 2013

1 Answers1