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.

Combine Bar and Line Chart in Javascript

First: Please Be Gentle, I am a newb with JS
I have a dashboard and I'm creating a chart with JS. I'm working from a template which already had some examples, so I am making things work by following what was already there.
I have a bar chart but I would like to add a line chart over top of it.
Is this possible? And if so, how?
I believe I'm using Chart.min.js (imported earlier in doc)
Here is my js (minus the data) to generate the chart.
<script>
window.onload = function(){
// Bar Chart from barChartData
var ctx = document.getElementById("chart-bar").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
</script>
Hoping someone can help me out with this... I'm good with the HTML, Python, Flask, MySql, etc..... but js is still brand new, but I'm learning :-).

Yes it is possible.
Chart.js lets you create charts with multiple datasets. The datasets don't have to be of the same type so you can create one dataset with lines and another one with bars like this:
datasets: [{
// set one for your bars
type: 'bar',
data: [1, 2, 3, ... ] // your data for the bar chart
}, {
// set two for your lines
type: 'line',
data: [4, 5, 6, ... ] // your data for the line chart
}]
and then create the chart with those datasets
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
responsive : true,
// other settings ...
});
You can take some inspiration from my working example here

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/

Highcharts column Point Click

Hello I have already asked a question on Highcharts Point Click not working. Further to that what I have found is my click function works in google chrome but not in IE 8. Can you please help me with this? I am not getting any responses on my earlier question hence I am posting this again -
Below is my code -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Exposure Details - Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
and below is the function which draws column chart -
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'chart',
data: [],
};
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
Is it because the way I am dynamically creating this chart? Please guide me regarding this. I am getting error - Object doesnt support this property or method. Highcharts.js line 25. Code 0. Char 55. I wish to implement chart drill down. Hence need to get this working. And IE is standard browser in the company. Please help me.

Object doesnt support this property or method
This is the Javascript error generated mostly in IE.
Always check for extra comma,single quote in your code when you encounter such JS error.
I can see such one in your code snippet.
var seriesOptions = {
name: 'chart',
data: [],
};
This should be
var seriesOptions = {
name: 'chart',
data: []
};
Firefox ignores such error but IE does not let you go. :)

I just used latest highcharts files 2.2.5 and that solved it. Works in IE8. And I feel overall performance is also improved..smooth. Thanks. :)

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