Why chart in chart.js be broken like this image? - javascript

I made some charts using chart js and the chart shown is broken like this
my code is like below
var configPBU = configKurvaPBU();
var ctxPBU = document.getElementById('canvasPBU').getContext('2d');
window.myLine = new Chart(ctxPBU, configPBU);
var configBBU = configKurvaBBU();
var ctxBBU = document.getElementById('canvasBBU').getContext('2d');
window.myLine = new Chart(ctxBBU, configBBU);
//SHOW BBPB CHART
let ctxBBPB = document.getElementById('canvasBBPB').getContext('2d');
if (ddlBBPB.includes("CDC")) {
document.getElementById("logoChartBBPB").src = "<%= Page.ResolveClientUrl("~/Images/Icon/logo-cdc.svg") %>";
document.getElementById("SPScoreBBPB").style.display = "none";
let configBBPB = configKurvaCDCBBPB();
window.myLine = new Chart(ctxBBPB, configBBPB);
} else {
document.getElementById("logoChartBBPB").src = "<%= Page.ResolveClientUrl("~/Images/Icon/logo-who.svg") %>";
document.getElementById("SPScoreBBPB").style.display = "inline";
let configBBPB = configKurvaBBPB();
window.myLine = new Chart(ctxBBPB, configBBPB);
}
//END SHOW BBPB CHART
var configLKU = configKurvaLKU();
var ctxLKU = document.getElementById('canvasLKU').getContext('2d');
window.myLine = new Chart(ctxLKU, configLKU);
var configBMI = configKurvaBMI();
var ctxBMI = document.getElementById('canvasBMI').getContext('2d');
window.myLine = new Chart(ctxBMI, configBMI);
why is this happening, and how to solve it??
i have tried to use .destroy()
but it's not working
thanks in advance and sorry for my bad english

Related

My clearScreen function doesn't clear the screen

I'm trying to make a game in CodeHS, but the clearScreen function doesn't clear the title screen, instead, it says that the "Sky" variable isn't defined, I assume it does the same for the rest of the variables. The title screen prints fine, I just can't clear it.
Any advice for shrinking the code is also appreciated, I tried making a function for making the windows but I have no idea how to.
Code:
var brown = new Color(140,74,47);
//The start function makes the title screen.
function start() {
titleScreen();
mouseClickMethod(clearScreen);
}
function titleScreen() {
//Landscape
var Sky = new Rectangle(400,500);
Sky.setPosition(0,0);
Sky.setColor(Color.blue);
add(Sky);
var Sun = new Circle(50);
Sun.setPosition(155,96);
Sun.setColor(Color.yellow);
add(Sun);
var Ground = new Rectangle(400,200);
Ground.setPosition(0,300);
Ground.setColor(Color.green);
add(Ground);
//Bulding
/*Windows go in order from left to right, top to bottom.
*1 is the top left window.
*/
var Building = new Rectangle(100,300);
Building.setPosition(50,100);
Building.setColor(Color.grey);
add(Building);
var Window1 = new Rectangle(35,35);
Window1.setPosition(60,110);
Window1.setColor(Color.white);
add(Window1);
var Window2 = new Rectangle(35,35);
Window2.setPosition(105,110);
Window2.setColor(Color.white);
add(Window2);
var Window3 = new Rectangle(35,35);
Window3.setPosition(60, 155);
Window3.setColor(Color.white);
add(Window3);
var Window4 = new Rectangle(35,35);
Window4.setPosition(105,155);
Window4.setColor(Color.white);
add(Window4);
var Window5 = new Rectangle(35,35);
Window5.setPosition(60,200);
Window5.setColor(Color.white);
add(Window5);
var Window6 = new Rectangle(35,35);
Window6.setPosition(105,200);
Window6.setColor(Color.white);
add(Window6);
var Window7 = new Rectangle(35,35);
Window7.setPosition(60,245);
Window7.setColor(Color.white);
add(Window7);
var Window8 = new Rectangle(35,35);
Window8.setPosition(105,245);
Window8.setColor(Color.white);
add(Window8);
var Window9 = new Rectangle(35,35);
Window9.setPosition(60,290);
Window9.setColor(Color.white);
add(Window9);
var Window10 = new Rectangle(35,35);
Window10.setPosition(105,290);
Window10.setColor(Color.white);
add(Window10);
var Door = new Rectangle(35,50);
Door.setPosition(83,350);
Door.setColor(brown);
add(Door);
var Title = new Text("Title", "100pt Aleo");
Title.setPosition(60,150);
Title.setColor(Color.black);
add(Title);
var Devs = new Text("By Terra", "40pt Aleo");
Devs.setPosition(75,200);
Devs.setColor(Color.black);
add(Devs);
var Play_Button_Background = new Rectangle(200,100);
Play_Button_Background.setPosition(90,350);
Play_Button_Background.setColor(Color.black);
add(Play_Button_Background);
var Play_Button_Text = new Text("Start", "40pt Aleo");
Play_Button_Text.setPosition(135,415);
Play_Button_Text.setColor(Color.white);
add(Play_Button_Text);
}
function clearScreen() {
titleScreen();
remove(Sky);
remove(Sun);
remove(Ground);
remove(Building);
remove(Window1);
remove(Window2);
remove(Window3);
remove(Window4);
remove(Window5);
remove(Window6);
remove(Window7);
remove(Window8);
remove(Window9);
remove(Window10);
remove(Door);
remove(Title);
remove(Devs);
remove(Play_Button_Background);
remove(Play_Button_Text);
}
function level1() {
//Adds level 1.
var test = new Circle(100);
test.setPosition(100,100);
add(test);
}

Reoccurring Event Series: Sheets to Calendar

I'm a newbie when it comes to coding, so lots to learn from my end. I created the following script which would integrate reoccurring Office Hours from data pulled from Sheets to Calendar. I'm wondering if there is an easier way to do this? How would I be able to include a For Loop for this, since most of them reoccur on different days of the week?
Any help would be appreciated. Thanks!
function officeHoursEventSeries() {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lr = spreadsheet.getLastRow();
var calendarId = spreadsheet.getRange("d2").getValue();
var cal = CalendarApp.getCalendarById(calendarId);
//for 1
var title1 = spreadsheet.getRange("a4").getValue();
var start1 = spreadsheet.getRange("b4").getValue();
var end1 = spreadsheet.getRange("c4").getValue();
var descrip1 = spreadsheet.getRange("d4").getValue();
var reccurence1 = CalendarApp.newRecurrence().addWeeklyRule().onlyOnWeekday(CalendarApp.Weekday.TUESDAY).until(new Date('December 21,2021'));
cal.createEventSeries(title1,start1,end1,reccurence1,{description: descrip1})
//for 2
var title2 = spreadsheet.getRange("a5").getValue();
var start2 = spreadsheet.getRange("b5").getValue();
var end2 = spreadsheet.getRange("c5").getValue();
var descrip2 = spreadsheet.getRange("d5").getValue();
var reccurence2 = CalendarApp.newRecurrence().addWeeklyRule().onlyOnWeekday(CalendarApp.Weekday.FRIDAY).until(new Date('December 21,2021'));
cal.createEventSeries(title2,start2,end2,reccurence2,{description: descrip2})
//for 3
var title3 = spreadsheet.getRange("a6").getValue();
var start3 = spreadsheet.getRange("b6").getValue();
var end3 = spreadsheet.getRange("c6").getValue();
var descrip3 = spreadsheet.getRange("d6").getValue();
var reccurence3 = CalendarApp.newRecurrence().addWeeklyRule().onlyOnWeekdays([CalendarApp.Weekday.MONDAY,CalendarApp.Weekday.WEDNESDAY]).until(new Date('December 21,2021'));
cal.createEventSeries(title3,start3,end3,reccurence3,{description: descrip3})
//for 4
var title4 = spreadsheet.getRange("a7").getValue();
var start4 = spreadsheet.getRange("b7").getValue();
var end4 = spreadsheet.getRange("c7").getValue();
var descrip4 = spreadsheet.getRange("d7").getValue();
var reccurence4 = CalendarApp.newRecurrence().addWeeklyRule().onlyOnWeekday(CalendarApp.Weekday.TUESDAY).until(new Date('December 21,2021'));
cal.createEventSeries(title4,start4,end4,reccurence4,{description: descrip4})
//for 5
var title5 = spreadsheet.getRange("a8").getValue();
var start5 = spreadsheet.getRange("b8").getValue();
var end5 = spreadsheet.getRange("c8").getValue();
var descrip5 = spreadsheet.getRange("d8").getValue();
var reccurence5 = CalendarApp.newRecurrence().addWeeklyRule().onlyOnWeekdays([CalendarApp.Weekday.TUESDAY,CalendarApp.Weekday.THURSDAY]).until(new Date('December 21,2021'));
cal.createEventSeries(title5,start5,end5,reccurence5,{description: descrip5})
}
SpreadsheetApp.getActiveSheet().getRange('a4:d8').getValues().forEach(r => {
let title = r[0];
let start = r[1];
let end = r[2];
let descrip = r[4];
//I'll leave recurrence up to you to figure out
cal.createEventSeries(title, start, end, reccurence, { description: descrip });
})

Remove bank holidays from X Axis by amchart

I have data by date like this there is no 2017/07/17,2017/07/16,2017/07/15
because they are bank holidays.
chartData = new Array();
chartData[0] = new Array();
chartData[0].closePrice = 1207;
chartData[0].date = new Date("2017/07/12");
chartData[1] = new Array();
chartData[1].closePrice = 1227;
chartData[1].date = new Date("2017/07/13");
chartData[2] = new Array();
chartData[2].closePrice = 1216;
chartData[2].date = new Date("2017/07/14");
chartData[3] = new Array();
chartData[3].closePrice = 1234;
chartData[3].date = new Date("2017/07/18");
I use this chartData as dataProvider for making graph.
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = chartData;
dataSet.categoryField = "date";
chart.dataSets = [dataSet];
var stockPanel = new AmCharts.StockPanel();
stockPanel.title = "Stock Main";
stockPanel.id = "stockPanel";
stockPanel.showCategoryAxis = false;
stockPanel.recalculateToPercents = "never";
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
stockPanel.addValueAxis(valueAxis);
stockPanel.categoryAxis.dashLength = 5;
stockPanel.categoryAxis.equalSpacing = true; // it doesn't work ....
var graph = new AmCharts.StockGraph();
graph.type = "line";
graph.valueField = "closePrice";
stockPanel.addStockGraph(graph);
however 2017/07/15,2017/07/16 2017/07/16 are drawn on X axis , even there are no data.
Even .equalSpacing looks in vain.
How can I remove this???
You have to set equalSpacing in the categoryAxesSettings property in the stock chart for it to work.
//object-based setup
chart.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
chart.categoryAxesSettings.equalSpacing = true;
//makeChart version
AmCharts.makeChart("chartdiv", {
// ...
"categoryAxesSettings": {
"equalSpacing": true
},
// ...
});
Demo

Mathquill how to write formula into pdf file

I'm trying to create a webpage where users are able to write formulas (rendered by mathquill).
This is the code:
createButton(document.body,
function()
{
var para1 = parent.frame1.document.createElement("p");
para1.setAttribute("id","Line"+i.toString());
var t1 = parent.frame1.document.createTextNode("Line "+i.toString()+":");
para1.appendChild(t1);
parent.frame1.document.body.appendChild(para1);
var para = parent.frame1.document.createElement("p");
para.setAttribute("id","math"+i.toString());
para.setAttribute("class", "mq-math-mode");
var t = parent.frame1.document.createTextNode("");
para.appendChild(t);
parent.frame1.document.body.appendChild(para);
latex = $('#basic-latex').on('keydown keypress', function() {
var prev = latex.val();
setTimeout(function() {
var now = latex.val();
if (now !== prev) mq.latex(now);
});
});
mq = MQ.MathField(para, {
autoSubscriptNumerals: true,
handlers: { edit: function() {
if (!latex.is(':focus')) latex.val(mq.latex());
} }
});
//latex.val(mq.latex());
//mathField = MQ.MathField(para, {spaceBehavesLikeTab: true});
i = i+1;
}
, "Create new line");
Then, I would like to save formulas in a pdf file.
I'm using the package jsPDF, but I'm not able to write the rendered formulas in the pdf. Is anybody able to help me?
Thanks a lot in advance
I add the code to create the PDF.
var doc = new jsPDF();
var str = mq.latex();
var src = 'http://latex.codecogs.com/png.latex?'+str
var som = new Image();
som.src = src;
var imgData = 'data:image/png;base64,'+ Base64.encode(som);
doc.addImage(imgData, 'png', 10, 50);
doc.save('Test.pdf');

ESRI JS API Querytask multiple results

Query looks like query.where = Abbrev = 'BLOC' OR Abbrev = 'ZACH' OR Abbrev = 'MSC'
function getLocRes(results) {
console.log("getLocRes",results);
var geom;
//geom = results.features[0].geometry;
//console.log("geom",geom);
//console.log("extent0",extent);
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([80, 0, 0]), 2), new dojo.Color([80, 0, 0, 0.5]));
var res = results.features;
console.log("symbol",symbol);
console.log("res.length",res.length);
//map.graphics.clear();
for (var i = 0;i < res.length; i++) {
console.log("i=",i);
console.log("res[i].geometry=",res[i].geometry);
var reGeo = res[i].geometry;
var graphic = new Graphic(reGeo,symbol);
var graphic = reGeo;
console.log("graphic=",graphic);
graphic.setSymbol(symbol);
map.graphics.add(graphic);
console.log(map.graphics.length);
}
//var extent = geom.getExtent();
alert(map.graphics.graphics.length);
//map.setExtent(extent, true);
console.log("extent1",extent);
}
http://www.dexconor.com/map/img/esri3.png
the image is result in chrome console
so it seems like something wrong with var graphic = new Graphic(reGeo,symbol);
even 'for' doesn't work.
Can anyone give me some ideas?
It might be a namespace issue, does this work?
new esri.Graphic(reGeo,symbol);
also, make sure the "esri/graphic" module is loaded through require.js

Categories