У меня есть это <ul></ul>, которое будет добавлено по умолчанию <li></li>, но как только дата выбрана в указателе даты, она должна быть перезаписана. Он просто добавил новый <li></li>
">
после того, как я выбрал дату в указателе даты:
Вот мой javascript код:
// // Data Picker Initialization
$(document).ready(() => {
$('#daterange').daterangepicker({
opens: 'center',
showDropdowns: true,
startDate: "2020/04/16",
endDate: "2020/04/16",
locale: {
format: 'YYYY/MM/DD'
}
}, function (start, end, label) {
var startDate = start.format('YYYY-MM-DD');
var endDate = end.format('YYYY-MM-DD');
window.alert("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
var staticUrlDowntime = "/topdowntime/" + startDate + "/" + endDate;
console.log(staticUrlDowntime);
$(document).ready(() => {
$.ajax({
url: (staticUrlDowntime),
method: "GET",
dataType: "json",
success: (data) => {
$.each(data, (key, val) => {
$("#top5Downtime").append("<li>" + val.event_description + " - " + val.error_count + "</li>");
});
}
})
});
})
//var dta = moment().subtract(1, 'day').format("YYYY-MM-DD"); //code to get the yesterdate
var dta = "2020-04-16"
console.log(dta);
var staticUrlTop5Downtime = "/topdowntime/" + dta;
console.log(staticUrlTop5Downtime);
$(document).ready(() => {
$.ajax({
url: (staticUrlTop5Downtime),
method: "GET",
dataType: "json",
success: (data) => {
$.each(data, (key, val) => {
$("#top5Downtime").append("<li>" + val.event_description + " - " + val.error_count + "</li>");
});
}
})
});
/** CODE FOR BAR CHART */
const svgContainer = d3.select('#bar-chart')
.append("svg");
const margin = 80;
const svgWidth = 50;
const width = 1100 - 2 * margin;
const height = 600 - 2 * margin;
const chart = svgContainer.append('g')
.attr('transform', "translate(" + svgWidth + "," + margin + ")");
const xScale = d3.scaleBand()
.range([0, width])
.domain(sample.map((s) => s.language))
.padding(0.4)
const yScale = d3.scaleLinear()
.range([height, 0])
.domain([0, 100]);
// vertical grid lines
// const makeXLines = () => d3.axisBottom()
// .scale(xScale)
const makeYLines = () => d3.axisLeft()
.scale(yScale)
chart.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xScale));
chart.append('g')
.call(d3.axisLeft(yScale));
chart.append('g')
.attr('class', 'grid')
.call(makeYLines()
.tickSize(-width, 0, 0)
.tickFormat('')
)
const barGroups = chart.selectAll()
.data(sample)
.enter()
.append('g')
barGroups
.append('rect')
.attr('class', 'bar')
.attr('x', (g) => xScale(g.language))
.attr('y', (g) => yScale(g.value))
.attr('height', (g) => height - yScale(g.value))
.attr('width', xScale.bandwidth())
barGroups
.append('text')
.attr('class', 'value')
.attr('x', (a) => xScale(a.language) + xScale.bandwidth() / 2)
.attr('y', (a) => yScale(a.value) + 30)
.attr('text-anchor', 'middle')
.text((a) => `${a.value}%`)
svgContainer
.append('text')
.attr('class', 'label')
.attr('x', -(height / 2) - margin)
.attr('y', svgWidth / 3.5)
.attr('transform', 'rotate(-90)')
.attr('text-anchor', 'middle')
.text('Percentage (%)')
svgContainer.append('text')
.attr('class', 'label')
.attr('x', width / 2 + margin)
.attr('y', height + margin * 1.7)
.attr('text-anchor', 'middle')
.text('Languages')
svgContainer.append('text')
.attr('class', 'title')
.attr('x', width / 2 + margin)
.attr('y', 40)
.attr('text-anchor', 'middle')
.text('Top availability CAMs for date: ' + dta);
$('#daterange').on('apply.daterangepicker', function (ev, picker) {
var startDate = picker.startDate.format('YYYY-MM-DD');
var endDate = picker.endDate.format('YYYY-MM-DD');
console.log(startDate);
console.log(endDate);
// var sampUrl = "/sampleURL/" + startDate;
// console.log(sampUrl);
// const svgContainer = d3.select('#bar-chart')
// .append("svg");
// const margin = 80;
// const svgWidth = 50;
// const width = 1100 - 2 * margin;
// const height = 600 - 2 * margin;
// const chart = svgContainer.append('g')
// .attr('transform', "translate(" + svgWidth + "," + margin + ")");
// const xScale = d3.scaleBand()
// .range([0, width])
// .domain(sample.map((s) => s.language))
// .padding(0.4)
// const yScale = d3.scaleLinear()
// .range([height, 0])
// .domain([0, 100]);
// const makeYLines = () => d3.axisLeft()
// .scale(yScale)
// chart.append('g')
// .attr('transform', `translate(0, ${height})`)
// .call(d3.axisBottom(xScale));
// chart.append('g')
// .call(d3.axisLeft(yScale));
// chart.append('g')
// .attr('class', 'grid')
// .call(makeYLines()
// .tickSize(-width, 0, 0)
// .tickFormat('')
// )
// const barGroups = chart.selectAll()
// .data(sample)
// .enter()
// .append('g')
// barGroups
// .append('rect')
// .attr('class', 'bar')
// .attr('x', (g) => xScale(g.language))
// .attr('y', (g) => yScale(g.value))
// .attr('height', (g) => height - yScale(g.value))
// .attr('width', xScale.bandwidth())
// barGroups
// .append('text')
// .attr('class', 'value')
// .attr('x', (a) => xScale(a.language) + xScale.bandwidth() / 2)
// .attr('y', (a) => yScale(a.value) + 30)
// .attr('text-anchor', 'middle')
// .text((a) => `${a.value}%`)
// svgContainer
// .append('text')
// .attr('class', 'label')
// .attr('x', -(height / 2) - margin)
// .attr('y', svgWidth / 3.5)
// .attr('transform', 'rotate(-90)')
// .attr('text-anchor', 'middle')
// .text('Love meter (%)')
// svgContainer.append('text')
// .attr('class', 'label')
// .attr('x', width / 2 + margin)
// .attr('y', height + margin * 1.7)
// .attr('text-anchor', 'middle')
// .text('Languages')
// svgContainer.append('text')
// .attr('class', 'title')
// .attr('x', width / 2 + margin)
// .attr('y', 40)
// .attr('text-anchor', 'middle')
// .text('Top availability CAMs for date: ' + startDate);
});
});
Извините за грязный код. Уберу это после того, как я закончу экспериментировать. Кроме того, у меня та же проблема с графиком, он просто добавляет график внизу и не перезаписывает старый график по умолчанию. Все еще новичок в javascript и обучении. Любая помощь будет принята с благодарностью.