I am loading data from the file that contain the time stamp and temperature reading.
Difference between two data can be same or some time it can be a month or so.
Can we update the x axis scale so it min and max value matches the data received.
call back function of the zoom plug in is
let timer;
function update_chart({ chart }) {
clearTimeout(timer);
timer = setTimeout(() => {
var { min, max } = chart.scales.x;
// console.log(min);
// console.log(max);
console.log("Min Location: ", chart.scales.x2.min);
console.log("Max Location: ", chart.scales.x2.max);
var file_min = chart.scales.x2.min;
var file_max = chart.scales.x2.max;
file_min = makeCorrection(file_min);
file_max = makeCorrection(file_max);
console.log("Zoom level", chart.getZoomLevel());
var total_sample = (file_max - file_min) / 116;
console.log("Totoal samples: ", total_sample);
var offset = (total_sample / 50) * 116;
offset = makeCorrection(offset);
console.log("Offfset: ", offset);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = [], y1 = [], y2 = [], y3 = [], y4 = [], y5 = [], y6 = [], y7 = [], y8 = [], y9 = [], y10 = [];
var tex = this.responseText;
if (tex[0] == ">") {
window.alert(tex);
}
else {
dataray = tex.split('\n');
//console.log(dataray);
dataray.forEach(element => {
dat = element.split(';');
if (dat.length > 5) {
x.push(dat[0]);
y1.push(dat[1]);
y2.push(dat[2]);
y3.push(dat[3]);
y4.push(dat[4]);
y5.push(dat[5]);
y6.push(dat[6]);
y7.push(dat[7]);
y8.push(dat[8]);
y9.push(dat[9]);
y10.push(dat[10]);
}
});
if (x.length > 10)
{
myLineChart.data.labels = x;
myLineChart.data.datasets[0].data = y1;
myLineChart.data.datasets[1].data = y2;
myLineChart.data.datasets[2].data = y3;
myLineChart.data.datasets[3].data = y4;
myLineChart.data.datasets[4].data = y5;
myLineChart.data.datasets[5].data = y6;
myLineChart.data.datasets[6].data = y7;
myLineChart.data.datasets[7].data = y8;
myLineChart.data.datasets[8].data = y9;
myLineChart.data.datasets[9].data = y10;
myLineChart.stop();
myLineChart.update('none');
}
else
{
console.log("Not enoguh data to plot.....");
}
}
}
};
xhttp.open("GET", "/getfile?s=" + file_min + "&e=" + file_max + "&ge=" + offset, true);
xhttp.send();
}, 100);
}
when chart load it looks like this
enter image description here
after zooming in it looks like this
enter image description here
I am getting the error 'Error: Argument given to addRows must be either a number or an array' when using the code below. However, when I copy the code that is being exported and hard code it, the data displays correctly. Anyone have any ideas?
The hardcoded version is this:
dataTable.addRows([
[ 'DTR V', null, 'Approval Audience Generation Invitation and Confirmation', new Date(2021, 3, 13), new Date(2021, 5, 15) ],
]);
for(var i = 2; i < countRow; i++) {
for(var ii = 0; ii < countColumn; ii++) {
if (ii == 0) {
theData += "[ '" + a.getDataTable().getValue(i, 0) + "', null, '<div class=\"ggl-tooltip\">" + a.getDataTable().getValue(i, 2) + "</div>', new Date("+ a.getDataTable().getFormattedValue(i, 3) +"), new Date("+ a.getDataTable().getFormattedValue(i, 4) +") ], ";
}
}
dataTable.addRows(theData);
}
I found that if I created variables first, I didn't have the error:
for(var i = 0; i < countRow; i++) {
for(var ii = 0; ii < countColumn; ii++) {
if (ii == 0) {
$project = a.getDataTable().getValue(i, 0);
$toolTip = '<div class="ggl-tooltip">' + a.getDataTable().getValue(i, 2) + '</div>';
$dteStrt = a.getDataTable().getFormattedValue(i, 3);
$dteStrtSplt = $dteStrt.split(",");
$yrS = $dteStrtSplt[0];
$moS = $dteStrtSplt[1];
$daS = $dteStrtSplt[2];
$dteEnd = a.getDataTable().getFormattedValue(i, 4);
$dteEndSplt = $dteEnd.split(",");
$yrS = $dteEndSplt[0];
$moS = $dteEndSplt[1];
$daS = $dteEndSplt[2];
}
}
dataTable.addRows([ [ $project, null, $toolTip, new Date($yrS, $moS, $daS), new Date($yrE, $moE, $daE) ] ]);
}
(I am a new developer)I have a list that I put in a viewBag to make a dropwdown in my view and I would like to add 3 elements to this list so that we can see them at the end of my dropdown. I make a timesheet for the employees and I have a dropdown of the projects that the person worked during the week and I would like to add at the end of the dropdown the 3 options "Vacancy", "Unplanned Absence", "Planned Absence" if the person has been on leave instead of working.
This is my request for the projects :
var projectAssignment = (from pa in db.ProjectAssignment
join p in db.Projects on pa.ProjectId equals p.ID
where pa.EmployeeId == EmployeeId && pa.StartDate !=null && (pa.EndDate == null || pa.EndDate >= DateTime.Now)
select new ProjectTimesheetList
{
ProjectName = p.ProjectName,
ProjectId = pa.ProjectId
});
ViewBag.ProjectTimeSHeet = projectAssignment;
This is a the modal to add my timehseet and i want to put the 3 daysoff type at the end of dropdown, so in this case after "NatureBooker"
And this is my code of my dropdown:
<select name="' + row + '_' + col + '" class="custom-select" id="tsCell_' + row + '_' + col + '" data-row="' + row + '" data-col="' + col + '">' +
'<option value="">----Select----</option>#Html.Raw(projsStr)</select>';
SOLUTION:
var projectAssignment = (from pa in db.ProjectAssignment
join p in db.Projects on pa.ProjectId equals p.ID
where pa.EmployeeId == EmployeeId && pa.StartDate !=null && (pa.EndDate == null || pa.EndDate >= DateTime.Now)
select new ProjectTimesheetList
{
ProjectName = p.ProjectName,
ProjectId = pa.ProjectId
});
List<ProjectTimesheetList> projectAssignments = projectAssignment.ToList();
projectAssignments.Add(new ProjectTimesheetList
{
ProjectName = "Vacancy",
ProjectId = -1,
});
projectAssignments.Add(new ProjectTimesheetList
{
ProjectName = "Unplanned Absence",
ProjectId = -2,
});
projectAssignments.Add(new ProjectTimesheetList
{
ProjectName = "Planned Absence",
ProjectId = -3,
});
ViewBag.ProjectTimeSHeet = projectAssignments;
And the result:
Still not clear what exactly you want, but if my guess is right you probably want to add "fake" projects to the enumerable you're binding to (not a list, by the way).
As long as you understand that this is absolutely wrong and grounds for being fired on the spot, here you go:
ViewBag.ProjectTimeSHeet = projectAssignment
.Concat(new[]
{
new ProjectTimesheetList
{
ProjectName = "Vacancy",
ProjectId = -1,
},
new ProjectTimesheetList
{
ProjectName = "Unplanned Absence",
ProjectId = -2,
},
new ProjectTimesheetList
{
ProjectName = "Planned Absence",
ProjectId = -3,
},
});
var myOptions = {
val1 : 'Vacancy',
val2 : 'Unplanned Absence',
val3 : 'Planned Absence',
};
var mySelect = $('#dropdownID');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
through Javascript
var ddl = document.getElementById("dropdownID");
for ( let key in myOptions )
{
var option = document.createElement("OPTION");
option.innerHTML = key
option.value = myOptions[key]
ddl.options.add(option);
}
I'm working on a project using Angular 5 and Chart.js.
I needed to create custom legends into my charts so I follow this git issue to help me a bit: Github Issue Chart.js.
It was very helpful and It worked as expected only with pure javascript, but trying to reply the example into Angular 5 App just doesn't work, it throws me this.updateDataset() is not a function.
Here is a snippet of what I'm currently doing into the options object of Chart.js library:
legendCallback: (chart) => {
const legendHtml = [];
legendHtml.push('<table>');
legendHtml.push('<tr>');
for (let i=0; i<chart.data.datasets.length; i++) {
const color = chart.data.datasets[i].borderColor;
const legendId = 'linear-d'+i;
legendHtml.push(
'<td onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')">' +
'<div id="'+legendId+'-square" style="background-color:' + color +'; border: 2px solid ' + color +'; width: 15px; height: 15px;"></div>' +
'</td>'
);
if (chart.data.datasets[i].label) {
legendHtml.push('<td id="'+legendId+'-text" style="cursor: default; font-size: 12px;" onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')">' + chart.data.datasets[i].label + '</td>');
}
}
legendHtml.push('</tr>');
legendHtml.push('</table>');
return legendHtml.join("");
},
So the important part is this one '<td onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')">' where the onclick is trying to call this.updateDataset().
How should I call the function updateDataset() into the onclick event of the element or how should I declare the function so I could access to it from the onclick event.
It's not a neat solution but it's the only one I found so far.
Instead of using the onclick event I added an eventListener after adding the new legend. Then you need to do minor changes to the updateDataset() function.
The legendCallback should look something like this:
legendCallback: (chart) => {
var legendHtml = [];
legendHtml.push('<table>');
legendHtml.push('<tr>');
for (var i=0; i<chart.data.datasets.length; i++) {
legendHtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></div></td>');
if (chart.data.datasets[i].label) {
legendHtml.push('<td class="chart-legend-label-text" id="' + chart.id + '_' + chart.legend.legendItems[i].datasetIndex + '">' + chart.data.datasets[i].label + '</td>');
}
}
legendHtml.push('</tr>');
legendHtml.push('</table>');
return legendHtml.join("");
},
And then add the listener and the updateDataset() function after the declaration of the Chart:
document.getElementById("customLegend" + this.chartId).innerHTML = myChart.generateLegend();
var legenTags = document.getElementsByClassName("chart-legend-label-text");
var updateDataset = function(e) {
var id = e.currentTarget.id;
var index = id.split('_')[1];
var chartId= id.split('_')[0];
if (myChart.id == chartId) {
var meta = myChart.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !myChart.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
myChart.update();
}
}
for (var i = 0; i < legenTags.length; i++) {
legenTags[i].addEventListener('click', updateDataset, false);
}
I hope it helps.
If anyone has a better solution please share.
I am trying to implement a drill in or drill down in a pie chart. I actually have a working drill down pie chart, however, when I changed the values of the collection, it did not work. I am wondering what went wrong as I completely followed the working code and just replaced its values. The chart simply does not show up and has an error: Uncaught Error: Unknown header type: 17format+en,default+en,ui+en,controls+en,corechart+en.I.js:191. I am not sure though whether this error is related to the problem.
Javascript:
google.load('visualization', '1', {packages: ['corechart', 'controls']});
google.setOnLoadCallback(drawChart1);
var index = 0;
function drawChart1() {
<%
int aku = 0, cdu = 0, ls = 0, ptr = 0, rad = 0, oper = 0;
int aku1 = 0, aku2 = 0, aku3 = 0, aku4 = 0, aku5 = 0;
int cdu1 = 0, cdu2 = 0, cdu3 = 0, cdu4 = 0, cdu5 = 0, cdu6 = 0;
int ls1 = 0, ls2 = 0, ls3 = 0, ls4 = 0, ls5 = 0, ls6 = 0, ls7 = 0, ls8 = 0, ls9 = 0, ls10 = 0;
int ptr1 = 0, ptr2 = 0, ptr3 = 0, ptr4 = 0;
int rad1 = 0, rad2 = 0, rad3 = 0;
int oper1 = 0;
%> //Dummy values
//Main
var main = [
['Artificial Kidney Unit', <%=aku%>],
['Cardiac Diagnostic Unit', <%=cdu%>],
['Laboratory Services', <%=ls%>],
['Physical Therapy and Rehabilitation', <%=ptr%>],
['Radiology', <%=rad%>],
['Operations', <%=oper%>]
];
//Aku
var akuu = [
['Hemodialysis', <%=aku1%>],
['Peritoneal Dialysis', <%=aku2%>],
['Continuous Renal Replacement Therapy', <%=aku3%>],
['Sustained Low Efficient Dialysis', <%=aku4%>],
['Private Dialysis Suite', <%=aku5%>]
];
//Cdu
var cduu = [
['Electrocardiography', <%=cdu1%>],
['Ambulatory Electrocardiography', <%=cdu2%>],
['Exercise Stress Test', <%=cdu3%>],
['2D Echo', <%=cdu4%>],
['Lower Extremity Arterial & Venous Color Duplex Scan', <%=cdu5%>],
['Carotid Artery Duplex Scan', <%=cdu6%>]
];
//Ls
var lss = [
['Hematology', <%=ls1%>],
['Blood Chemistry', <%=ls2%>],
['Immunology and Serology', <%=ls3%>],
['Clinical Microscopy', <%=ls4%>],
['Microbiology', <%=ls5%>],
['Blood Bank and Transfusion Services', <%=ls6%>],
['Drug Testing', <%=ls7%>],
['Parasitology', <%=ls8%>],
['Surgical Pathology', <%=ls9%>],
['Cytopathology', <%=ls10%>]
];
//Ptr
var ptrr = [
['Physical Therapy', <%=ptr1%>],
['Occupational Therapy', <%=ptr2%>],
['Ultrasound Diagnostic Therapy', <%=ptr3%>],
['Orthotics and Prosthetic Evaluation', <%=ptr4%>]
];
//rad
var radd = [
['X-ray', <%=rad1%>],
['Ultrasound', <%=rad2%>],
['CT Scan', <%=rad3%>]
];
//oper
var operr = [
['Surgery', <%=oper1%>]
];
var collection = [];
collection[0] = google.visualization.arrayToDataTable(main);
collection[1] = google.visualization.arrayToDataTable(akuu);
collection[2] = google.visualization.arrayToDataTable(cduu);
collection[3] = google.visualization.arrayToDataTable(lss);
collection[4] = google.visualization.arrayToDataTable(ptrr);
collection[5] = google.visualization.arrayToDataTable(radd);
collection[6] = google.visualization.arrayToDataTable(operr);
var options1 = {
title: 'Departments',
animation: {'duration': 500,
'easing': 'in'},
action: function() {
button.onclick = function() {
recreateDashboard(0);
};
}
};
var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
google.visualization.events.addListener(chart1, 'select', drillIn);
google.visualization.events.addListener(chart1, 'click', drillOut);
chart1.draw(collection[0], options1);
function drillIn() {
var sel = chart1.getSelection();
var row = chart1.getSelection()[0].row;
options1['title'] = collection[index].getValue(sel[0].row, 0);
if(index === 0) {
if(row === 0) {
index = 1;
}
if(row === 1) {
index = 2;
}
if(row === 2) {
index = 3;
}
if(row === 3) {
index = 4;
}
if(row === 4) {
index = 5;
}
if(row === 5) {
index = 6;
}
}
else if(index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 6) {
options1['title'] = '# of services rendered in <%=year%>';
index = 0;
}
chart1.draw(collection[index], options1);
}
function drillOut(e) {
if(e.targetID === "title") {
if(index !== 0)
index--;
else if(index === 4 || index === 6 || index === 8)
index -= 2;
chart1.draw(collection[index], options1);
}
}
Html:
<div id="chart1">
</div>
I have figured out the mistake. All of these need a title before inputting the values.
Revised code:
//Main
var main = [
['Department', 'Value'],
['Cardiac Diagnostic Unit', <%=cdu%>],
['Laboratory Services', <%=ls%>],
['Physical Therapy and Rehabilitation', <%=ptr%>],
['Radiology', <%=rad%>],
['Operations', <%=oper%>]
];
//Aku
var akuu = [
['Service', 'Value'],
['Hemodialysis', <%=aku1%>],
['Peritoneal Dialysis', <%=aku2%>],
['Continuous Renal Replacement Therapy', <%=aku3%>],
['Sustained Low Efficient Dialysis', <%=aku4%>],
['Private Dialysis Suite', <%=aku5%>]
];
//Cdu
var cduu = [
['Service', 'Value'],
['Electrocardiography', <%=cdu1%>],
['Ambulatory Electrocardiography', <%=cdu2%>],
['Exercise Stress Test', <%=cdu3%>],
['2D Echo', <%=cdu4%>],
['Lower Extremity Arterial & Venous Color Duplex Scan', <%=cdu5%>],
['Carotid Artery Duplex Scan', <%=cdu6%>]
];
//Ls
var lss = [
['Service', 'Value'],
['Hematology', <%=ls1%>],
['Blood Chemistry', <%=ls2%>],
['Immunology and Serology', <%=ls3%>],
['Clinical Microscopy', <%=ls4%>],
['Microbiology', <%=ls5%>],
['Blood Bank and Transfusion Services', <%=ls6%>],
['Drug Testing', <%=ls7%>],
['Parasitology', <%=ls8%>],
['Surgical Pathology', <%=ls9%>],
['Cytopathology', <%=ls10%>]
];
//Ptr
var ptrr = [
['Service', 'Value'],
['Physical Therapy', <%=ptr1%>],
['Occupational Therapy', <%=ptr2%>],
['Ultrasound Diagnostic Therapy', <%=ptr3%>],
['Orthotics and Prosthetic Evaluation', <%=ptr4%>]
];
//rad
var radd = [
['Service', 'Value'],
['X-ray', <%=rad1%>],
['Ultrasound', <%=rad2%>],
['CT Scan', <%=rad3%>]
];
//oper
var operr = [
['Service', 'Value'],
['Surgery', <%=oper1%>]
];