Cumton list Chart not loaded

This topic has 6 replies, 2 voices, and was last updated 4 years ago by Alexander Bautz.

Viewing 6 reply threads

Author

Posts
- October 27, 2020 at 12:49 #31929
  nk.franklin
  Participant
  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:
  CUSTOM-DATA-SOURCE-collum-config.png
  CUSTOM-DATA-SOURCE-Error-log.png
- October 27, 2020 at 12:51 #31933
  nk.franklin
  Participant
  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();
  }
- October 27, 2020 at 16:43 #31934
  Alexander Bautz
  Keymaster
  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
- October 27, 2020 at 18:39 #31938
  nk.franklin
  Participant
  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:
  CUSTOM-DATA-SOURCE-Error-log-1.png
- October 27, 2020 at 23:07 #31943
  Alexander Bautz
  Keymaster
  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
- October 27, 2020 at 23:29 #31945
  nk.franklin
  Participant
  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?
- October 27, 2020 at 23:39 #31947
  Alexander Bautz
  Keymaster
  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