John John - 9 days ago 5
Javascript Question

ECharts - Set options to externally loaded arrays

So I am using the library ECharts to create some charts and graphs for various data that I have on a website. This is my first time using the library and I am fairly new to Javascript/jQuery. What I am trying to do is set the xAxis data to the results from a local page which will return a JSON Object with an array containing the days of the week. After I can do this, I then plan to load the Series data in the same way.

The jSON that is returned is this

enter image description here

When I am trying to set the data for xAxis, I am doing it as shown

xAxis: [{
type: 'category',
boundaryGap: false,
data: function(){
$.ajax({
type: "POST",
url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
cache: false,
success: function(result){
return result.data;
//console.log(result.data);
}
});
}

}],


However, I keep getting the error Uncaught TypeError: o.slice is not a function and this error is only being outputted when I try and use this method of setting the data. In addition to this, if I try and make a function to return the data from the external page and set a variable to that, whenever I try and print it to the console it says undefined

If I do not use my method of trying to load the external data and I predefine the data like so

xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}]


Then there are no errors and it works just fine

Can anyone see the problem?

Answer

Seems that after speaking with some people, the only example usage or documentation available is this example they have which is closely related to my question here.

If anyone else wants some examples related to ajax or dynamic data loading with ECharts then here are some (in English) *


Helpful tip

If you do not speak Chinese and you are using some sort of translator for their code examples; be aware that it's common for websites such as Google Translate and Bing Translator to incorrectly translate the punctuation used in JS by doing things such as,

  • Translating arrays with single quotes into arrays with single quotes and double quotes: thus causing syntax errors.
  • Removing commas (,) from objects.
  • Changing Semi-colon's (;) into Colon's (:) or even removing them.