Cumton list Chart not loaded

[nk.franklin]

Hello,

I am trying to make work a custom list chart with 2 list on same chart.
See attached:
1- The java script file,
2- The chart field configuration
3- The error log i have when trying to load the chart.

Can someone help me to see whts wrong on my configuration?

Thanx in advance

Attachments:

1. 

   CUSTOM-DATA-SOURCE-collum-config.png
   

2. 

   CUSTOM-DATA-SOURCE-Error-log.png
   

[nk.franklin]

My Java scrip file:

function getChartCustomDatasource(chartId) {
var deferred = jQuery.Deferred(), deferreds = [];
if (spjs.charts.customData === undefined) {
spjs.charts.customData = {};
}
spjs.charts.customData[chartId] = [];
deferreds.push(getDataList1(chartId));
deferreds.push(getDataList2(chartId));
jQuery.when.apply(jQuery, deferreds).then(function () {
deferred.resolve(spjs.charts.customData[chartId]);
});
return deferred.promise();
}

// Get data from list 1
function getDataList1(chartId) {
var d = jQuery.Deferred();
spjs.charts.getItemsREST({
“listId”: “{566BEAF5-742B-43CA-A2B7-74CA72B02067}”,
“listBaseUrl”: _spPageContextInfo.webServerRelativeUrl,
“select”: [
“ID”,
“Title”,
“NBMATCH”
],
“expand”: [],
“filter”: “”
}).done(function (data) {
jQuery.each(data, function (i, item) {
// A people picker is returned as an object and need to be changed to a string.
item.Equipe = item.Equipe.Title;
spjs.charts.customData[chartId].push(item);
});
d.resolve();
}).fail(function (err) {
// console.log(err);
});
return d.promise();
}

// Get data from list 2
function getDataList2(chartId) {
var d = jQuery.Deferred();
spjs.charts.getItemsREST({
“listId”: “{970B6E59-A6A2-42D6-81B2-9AC114AC4011}”,
“listBaseUrl”: _spPageContextInfo.webServerRelativeUrl,
“select”: [
“ID”,
“Title”,
“NBWIN”
],
“expand”: [],
“filter”: “”
}).done(function (data) {
jQuery.each(data, function (i, item) {
// A people picker is returned as an object and need to be changed to a string.
item.Equipe = item.Equipe.Title;
// If the fields are not the same in list 1 and 2 you must map the value to the correct field name like this:
// item.field_name_in_list_1 = item.field_name_in_list_2;
spjs.charts.customData[chartId].push(item);
});
d.resolve();
}).fail(function (err) {
// console.log(err);
});
return d.promise();
}

[Alexander Bautz]

It seems the “Uncaught TypeeError: $ is not a function” is from your qualimaster.js file and note related to the charts.

The “Uncaught TypeError: Cannot read property ‘Title’ of undefined comes from this line:

item.Equipe = item.Equipe.Title;

To be able to read the value of a field you must include this field in the select like this:

"select": [
"ID",
"Title",
"NBMATCH",
"Equipe"
],

If if is a people picker you must write it in a slightly different way – and also add it to the expand like this:

"select": [
"ID",
"Title",
"NBMATCH",
"Equipe/Title"
],
"expand": ["Equipe"]

Alexander

[nk.franklin]

Hello Alexander,

Thanx for the answer.

I choose to replace the text field “Equipe” by people picker.
it’s Look like the java script is working now.
But the chart still not loading.
See Error in the picture below

Java script files:
function getChartCustomDatasource(chartId) {
var deferred = jQuery.Deferred(), deferreds = [];
if (spjs.charts.customData === undefined) {
spjs.charts.customData = {};
}
spjs.charts.customData[chartId] = [];
deferreds.push(getDataList1(chartId));
deferreds.push(getDataList2(chartId));
jQuery.when.apply(jQuery, deferreds).then(function () {
deferred.resolve(spjs.charts.customData[chartId]);
});
return deferred.promise();
}

// Get data from list 1
function getDataList1(chartId) {
var d = jQuery.Deferred();
spjs.charts.getItemsREST({
“listId”: “{566BEAF5-742B-43CA-A2B7-74CA72B02067}”,
“listBaseUrl”: _spPageContextInfo.webServerRelativeUrl,
“select”: [
“ID”,
“Title”,
“NBMATCH”,
“Equipe/Title”
],
“expand”: [“Equipe”],
“filter”: “”
}).done(function (data) {
jQuery.each(data, function (i, item) {
// A people picker is returned as an object and need to be changed to a string.
item.Equipe = item.Equipe.Title;
spjs.charts.customData[chartId].push(item);
});
d.resolve();
}).fail(function (err) {
// console.log(err);
});
return d.promise();
}

// Get data from list 2
function getDataList2(chartId) {
var d = jQuery.Deferred();
spjs.charts.getItemsREST({
“listId”: “{970B6E59-A6A2-42D6-81B2-9AC114AC4011}”,
“listBaseUrl”: _spPageContextInfo.webServerRelativeUrl,
“select”: [
“ID”,
“Title”,
“NBWIN”,
“Equipe/Title”
],
“expand”: [“Equipe”],
“filter”: “”
}).done(function (data) {
jQuery.each(data, function (i, item) {
// A people picker is returned as an object and need to be changed to a string.
item.Equipe = item.Equipe.Title;
// If the fields are not the same in list 1 and 2 you must map the value to the correct field name like this:
// item.field_name_in_list_1 = item.field_name_in_list_2;
spjs.charts.customData[chartId].push(item);
});
d.resolve();
}).fail(function (err) {
// console.log(err);
});
return d.promise();
}

Attachments:

1. 

   CUSTOM-DATA-SOURCE-Error-log-1.png
   

[Alexander Bautz]

Your two lists does not have the same fields – this means when you push items into the spjs.charts.customData[chartId] array, the items will not have the same fields.

An item from your first list will for example have these values:

{
"ID": 1,
"Title": "Item 1 from first list",
"NBMATCH": "Value X",
"Equipe": "Value Y"
}

Now the items in from your second list will have these values.

{
"ID": 1,
"Title": "Item 1 from first list",
"NBWIN": "Value X",
"Equipe": "Value Y"
}

Now if you look at the screenshot from your first post you see that you are setting up the chart with three columns: Equipe, NBMATCH and NBWIN and the error you get is because your items don’t have a value for both NBMATCH and NBWIN.

If you want to add both values NBMATCH and NBWIN to the same field in your chart you must change it like this for your first function:

item.NBMATCH_NBWIN = item.NBMATCH

and like this for your second function:

item.NBMATCH_NBWIN = item.NBWIN

Now change the “columns” in your “Create chart from custom datasorce” like this:

{"fin": "Equipe".....
{"fin": "NBMATCH_NBWIN"....

Alexander

[nk.franklin]

Ok. I get it.
So i can’t get in one row 2 columns from different list(different structure).
The custom data is made to get data from duplicate list.
Per exemple i have one list who is full(limit 5000 rows)
i want to archive and duplicate it, to get a new list(same structure).
But i need to get data from the 2 list in one chart.
So i can use custom data joint the list.
Am i right?

[Alexander Bautz]

Yes, if you change it like I showed in my previous comment you can do that by merging the values from the two different fields into one common “field” in your data-array.

Alexander

[Author]

Posts