We Keep Coding

Chart.js Label Issue

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.

Highcharts SetData Only Works One Time

I am using a button to change the series on a High Charts graph using the series[0].setData() function. It does change the data and update the graph, but when I try to use a second button to reset my back data, nothing seems to happen. Why can the Series only be updated once?
$('#button').click(function() {
chart.series[0].setData(mydata1);
});
http://jsfiddle.net/9ypsm98a/
EDIT:
Still looking for an answer, but a easy work around is to have the button first use chart.destroy(); then recreate a completely new chart.

The problem is that the array/objects are being passed by reference on first creating the chart. After that, High Charts appears to be only updating the existing objects, overwriting the originals. Try the following jsfiddle. I first create the chart using empty objects. Then the buttons work as expected.
http://jsfiddle.net/308zr285/
var emptyData = [{},{},{}];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: null,
type: 'treemap'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
alternateStartingDirection: true
}],
title: {
text: 'Fruit consumption'
}
});
chart.series[0].setData(emptyData);
});

Highcharts not displaying charts through angular controller

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.

Y-Axis Highchart

i want to display a Stockchart with Highcharts. To fill the chart with content i receive a JSON data file which contains data like:
[["2013-10-14 02:30:07",18.62],
["2013-10-14 02:15:07",18.69],
["2013-10-14 02:00:07",18.81],
["2013-10-14 01:45:06",18.91]]
My Script looks like this:
$function() {
$.getJSON('paht/to/data.json', function(data) {
$('#Chart_Temp').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
series : [{
color: '#DF013A',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
The Problem with that is, that the x-axis don't show the time properly. I had a look at the documentation and dateFormat - but i just can't get Highchart using the time properly.
Does anybody can help me out? That would be awesome.

here is a exapmle for datetime xAxis with timestamps,
xAxis: {
type: 'datetime'
},
http://jsfiddle.net/3yg8b/

ExtJS: share store between grid and chart

I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:
{
"emitted": "2011-12-08 12:00:00",
"message": "This is message #666"
}
I have a model to describe these messages:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' }
]
});
I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.
Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:
var chart = {
xtype: 'chart',
...
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'emitted',
yField: {fieldName:'message', fieldGrabber: function(v) {
new RegExp("This is message #(\d+)$", "g").exec(v)[1]
}}
}]
};
Does this kind of thing is possible in ExtJS ?
I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.
Side note:
I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.
Any advices greatly appreciated!

You should extract the value inside you model to a separate field:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' },
{ name: 'nr', convert: function(v, r){
return r.get('message').replace(/^.*#/, '');
} }
]
});
Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".
Then you can use the 'nr' field directly in you chart.

I switched to Highcharts and threw ExtJS out to the trash :P