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
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?
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) *
Line + Bar
Scatter + Candlestick
Pie + Radar
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.
complete example for echarts pushing data from Ajax call
data.importPorts -> Array of strings
data.importBD -> Array of Objects { clientanem : [4,5,6,7,3]}
$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
.done(function (data) {
var option = {
tooltip: {
show: true
},
legend: {
data: (function () {
var res = [];
for (var name in data.importBD) {
res.push(name);
};
return res;
})()
},
xAxis: [
{
type: 'category',
data: (function () {
var res = [];
data.importPorts.forEach(function (i) {
res.push(i);
});
return res;
})()
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
}
]
};
for (var name in data.importBD) {
var obj = {
name: name,
type: "bar",
data: data.importBD[name]
};
option.series.push(obj);
}
// Load data into the ECharts instance
imprtChart.setOption(option);
});
Related
So I am making a COVID-19 tracker(For Indian region) web Application using Node.js Express.js and EJS. So the issue i am getting is while creating Chart using library chart.js And I am using this API to fetch data https://api.covid19india.org/data.json .And the chart is for Total Confirmed cases on Y-axis and on X-axis Date (date from the starting of this pandemic till now)
these Informations are fetched from the api .I'm using a for loop to iterate through the array and get the specific data and pusshing it into an empty array dailyDateChnage=[], dailyCnf=[];
and later passing this data into the EJS file analytics.ejs <%=dailyDateChnage%> <%=dailyCnf%>
const dailyDateChange=[],dailyCnf=[];
const url = "https://api.covid19india.org/data.json";
const covidDataApi = axios.get(url).then(function(response) {
covidData = response.data;
for (var i = 0; i < covidData.cases_time_series.length; i++) {
let day = covidData.cases_time_series[i].date;
let cnf = covidData.cases_time_series[i].totalconfirmed;
dailyDateChange.push(day);
dailyCnf.push(cnf);
}
app.get("/analytics", function(req, res) {
res.render("analytics", {
dailyDateChange: dailyDateChange,
dailyCnf: dailyCnf,
});
});
my code for creating a chart using chart.js in file analytics.ejs
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data:{
labels:[<%=dailyDateChange%>],
datasets: [{
label: 'Daily Confirmed Cases',
data: [<%=dailyCnf%>],
fill:false,
backgroundColor: [
"red"
],
borderColor: [
"red"
],
borderWidth: 2,
pointBorderColor:"red",
pointBackgroundColor:"red",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
labels:<%=dailyDateChange%> using this label the chart is not rendering [here is an image of the source page the data is being sent but not being rendered2 and an image of the output
but when replacing the labels as labels:<%=dailyCnf%>, the chart is getting rendered. image after replacing the labels
And I have tried converting the date data to string and Converting the date data to millisecond the again converting it to string
nothing has worked for me.
I don't even understand what is this issue
Can someone Explain and provide a solution for this.
When printing dailyDateChange using <%= %> it simply "prints" it as output. Consider this: You use console.log with a string element - you don't get double quotes around it in the output.
But in your code, you want the double quotes around the values of label.
Currently you might be getting something like this:
labels: [10 April, 11 April]
While you need this:
labels: ["10 April", "11 April"]
The simplest method to do so is convert it via JSON.stringify and use <%- %>` instead. The - tag (instead of =) does not escapes the string.
This code should work for you:
labels: <%- JSON.stringify(dailyDateChange) %>
Note that I also removed [] from around label as Stringify does that for us.
Below is the code to generate barchart using C3 js library
var chart = c3.generate({
bindto: '#barchart',
data: {
url: './API/get_bar_chart_data.php',
mimeType: 'json',
type: 'bar',
keys: {
x: 'category', // it's possible to specify 'x' when category axis
value: [ 'number']
},
onclick: function (d, i) {
console.log(chart.categories()[d.index]);
onclick_barchart();
}
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'category' // this needed to load string x value
}
}
});
In the above code I am getting data from URL in json format.
Now on click I want to pass this complete json received to onclick_barchart() function.
C3.js converts data received in internal format, so there's no way to get data as received.
IMO, there're 2 ways to handle this.
If you need to handle data keeping as received, maybe you need to call separately. Not in context of C3.js.
// call api and assign the result in separate variable
var data = call_ajax("./API/get_bar_chart_data.php");
var chart = c3.generate({
data: {
columns: data
onclick: function() {
onclick_barchart(data);
}
},
...
}
Or, access transformed data via internal data variable
In this case, you need to handle the format as your necessity.
var chart = c3.generate({
data: {
columns: data
onclick: function() {
// You can access in outside via 'chart.internal.data.targets'
// They're same result from .data() API
// https://naver.github.io/billboard.js/release/latest/doc/Chart.html#data
onclick_barchart(this.data.targets);
}
},
...
}
Let me start off by saying I am fairly new to this.
So what I'm currently doing is I'm playing around with the live feed chart using a js function that produces and stringifies random numbers.
window.feed = function(callback) {
var tick = {};
tick.plot0 = parseInt(10+900*Math.random(), 10);
callback(JSON.stringify(tick));
};
The first issue I'm trying to tackle is being able to switch charts with the click of a button without the feed restarting, essentially having the feed function running in the back and (I'd assume) storing the data into an array? Would that be the correct approach? But currently, when I click the button it just restarts the feed. Here's the code:
$('#chartButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'bar',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
//[11,26,7,44,11]
},
{
'values':[]
//[42,13,21,15,33]
}
]
}
});
});
$('#lineButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'line',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
// [11,26,7,44,11]
},
{
'values':[]
// [42,13,21,15,33]
}
]
}
});
});
$('#areaButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'area',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
// [11,26,7,44,11]
},
{
'values':[]
// [42,13,21,15,33]
}
]
}
});
});
And lastly, I'm trying to make it so it has two different "values" being displayed on the chart, but I can't seem to figure out how I would do that. The tutorial says if you're going to use two values inputs create the objects, but doesn't extrapolate on how to get the different values transmuted.
My hunch is that I create the feed function, but store all the values being created into an array, one for each function. Then assign those arrays to be the values of the chart, but I've been having trouble figuring out exactly how to increment through an array in javascript so you can keep adding more and more data to it as it is created. Any help would be much appreciated.
I have hit upon a problem where by I have an IEnumerable<string> of labels and an IEnumerable<double[]> of data in my MVC model object, and I would like to plot these values using Chartjs.
I pass both of in to my javascript function, which I trying to make plot the chart.
The Chartjs syntax is such that I want, in effect:
var data = {
... chart info e.g. colors, etc.
datasets: [
{
label: labels[0], // My first label
data: datas[0] // My first double[]
},
// Repeat for each data/label combo
{
label: labels[n], // My n-th label
data: datas[n] // My n-th double[]
}
]
};
Given my two collections, how can I extract the information within them appropriately? Clearly the lengths of these collections need to be the same, as there is a one-to-one association. I did try combing them in to a Tuple but I think that will make it more complicated on the js side.
Or does anyone know an easier way to achieve the same end result with ChartJS?
I'm comfortable with C# but Javascript is new to me.
You can certainly send a tuple to the client side and split it up easily with java-script. You could do a simple ajax call to get your tuple as a Json object and then split it up into two arrays. Those arrays could then be used in the chart.js label and data spots.
$.ajax({
url: 'AjaxCall/getChartObjects',
dataType: 'json',
data: {},
success: function (data) { //data here being the tuple recieved from server
//receive the tuple as a single Json object and split it up easily with some seperate arrays
dblArray= []
$.each(data.Item1, function (index, value) {
dblArray.push(value.text); //label array
}
descArray= []
$.each(data.Item2, function (index, value) {
descArray.push(value.dblTxt); //data array
}
},
error: function (xhr, status, error) {
console.log('Error: ' + error.message);
}
});
Sending the tuple from the controller would be something like:
//tuple sends two objects together- both job arrays will be seperated
//and used in observables on client side
var chartObjects = Tuple.Create(chartData, chartLabel);
return Json(chartObjects, JsonRequestBehavior.AllowGet);
You would then have the arrays that you need to place in the chart properties:
var barChartData = {
labels: descArray, //array labels
datasets: [
{
type: "Bar",
strokeColor: "black",
pointColor: "rgba(220,220,220,1)",
pointstrokeColor: "white",
data: dblArray,
}
]
}
I guess I'm not entirely sure if this is what you were looking for. Let me know if you have questions.
I started playing with highcharts for a project I am doing. Highcharts was displaying properly when I dumped a massive array of data into it, but now that I am trying to parse through groups of data that I retrieved through MongoDB I can't get it to display.
Here is my angular
$scope.retrieveData = function(){
$http.get('/calldata').then(function(response){
$scope.toneDatas = response.data
var idArray = []
angular.forEach($scope.toneDatas, function(value, key) {
idArray.push({id: value._id, social_tone_data: value.social_tone_data})
for (var i = 0; i < idArray.length; i++) {
if (idArray[i].id === value._id) {
console.log(idArray[i].id)
var socialToneName = []
var socialToneScore = []
angular.forEach(value.social_tone_data, function(value, key) {
socialToneScore.push(value.tone_score)
socialToneName.push(value.tone_type)
})
$("#" + value._id).highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: socialToneName
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
data: socialToneScore
}]
});
};
};
})
});
};
When the page loads a get request calls the database and gets the data to be served to the web page, and I am trying for now to get the data group social_tone_data to display on a chart. I have 19 documents in my mongo database and want it so that each time the loop completes, one chart is generated and served to my webpage. I should have 19 charts. I am still playing around with the code but any help is appreciated.
UPDATE
I refactored my code through an angular directive and used the element argument to display on the page.
Some good info using NG-Highcharts.
as others have said, use a directive to modify dom elements, not controller & def not jQuery as updates fall outside of angulars digest loop.
Your example needs the supplemental template/html code to be relevant.