This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Privacy Policy. Click Preferences to customize your cookie settings.
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
help
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
a week ago - last edited a week ago
count in ERQL?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Chart</title>
<style>
#bubbleChart {
width: 800px;
height: 600px;
margin: auto;
border: 1px solid #ccc;
position: relative;
}
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
border-radius: 5px;
pointer-events: none;
display: none;
}
</style>
</head>
<body>
<div id="bubbleChart"></div>
<div class="tooltip" id="tooltip"></div>
<table id="dataTable">
<thead>
<tr>
<th>Nombre</th>
<th>Valor X</th>
<th>Valor Y</th>
<th>Obsolescencia</th>
</tr>
</thead>
<tr>
<td>01 App</td>
<td>Good</td>
<td>Good</td>
<td>Very High</td>
<td>02 App</td>
<td>Medium</td>
<td>Low</td>
<td>Very High</td>
<td>03 App</td>
<td>Medium</td>
<td>Good</td>
<td>Very High</td>
<td>04 App</td>
<td>Good</td>
<td>Medium</td>
<td>Very High</td>
<td>05 App</td>
<td>Low</td>
<td>Medium</td>
<td>Very High</td>
</tr>
</table>
<script>
document.addEventListener('DOMContentLoaded', function() {
drawBubbleChart();
});
function drawBubbleChart() {
const chartContainer = document.getElementById('bubbleChart');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
const data = [];
// Obtener la tabla
const table = document.getElementById('dataTable');
// Iterar sobre las filas de la tabla, omitiendo la primera fila (encabezados)
for (let i = 1; i < table.rows.length; i++) {
const cells = table.rows[i].cells;
// Iterar sobre las celdas de cada fila, agrupando cada 4 celdas como un conjunto de datos
for (let j = 0; j < cells.length; j += 4) {
const appName = cells[j].textContent.trim();
const xValue = cells[j + 1].textContent.trim();
const yValue = cells[j + 2].textContent.trim();
const obsolescence = cells[j + 3].textContent.trim();
// Almacenar el conjunto de datos en el arreglo
data.push({ appName, xValue, yValue, obsolescence });
}
}
// Colores para diferentes niveles de obsolescencia
const colors = {
'Very Low': 'green',
'Low': 'green',
'Medium': 'yellow',
'High': 'orange',
'Very High': 'red',
'Unknown': 'clay',
};
// Crear las burbujas
data.forEach(({ appName, xValue, yValue, obsolescence }) => {
// Asignar coordenadas X e Y según los valores extraÃdos de la tabla
let x, y;
switch (xValue) {
case 'Good':
x = 100;
break;
case 'Medium':
x = 300;
break;
case 'Low':
x = 500;
break;
case 'Poor':
x = 0;
break;
default:
x = 500;
}
switch (yValue) {
case 'Good':
y = 100;
break;
case 'Medium':
y = 300;
break;
case 'Low':
y = 500;
break;
case 'Poor':
x = 0;
break;
default:
y = 500;
}
let colores = '#ccc';
switch (obsolescence) {
case 'Very Low':
color = 'green';
break;
case 'Low':
color = 'yellow';
break;
case 'Medium':
color = 'yellow';
break;
case 'High':
color = 'orange';
break;
case 'Very High':
color = 'red';
break;
case 'Unknown':
color = '#ccc';
break;
}
// Crear el elemento de burbuja SVG
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
circle.setAttribute('r', 20); // Tamaño fijo de la burbuja
circle.setAttribute('fill', colores);
svg.appendChild(circle);
// Añadir evento de tooltip para mostrar el nombre de la aplicación
circle.addEventListener('mouseover', () => {
showTooltip(appName, x, y);
});
circle.addEventListener('mouseout', () => {
hideTooltip();
});
});
// Agregar el SVG al contenedor del gráfico
chartContainer.appendChild(svg);
}
// Función para mostrar el tooltip con el nombre de la aplicación
function showTooltip(appName, x, y) {
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = `Nombre: ${appName}`;
tooltip.style.left = x + 'px';
tooltip.style.top = (y - 20) + 'px';
tooltip.style.display = 'block';
}
// Función para ocultar el tooltip
function hideTooltip() {
const tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
}
</script>
</body>
</html>
1 Reply
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
a week ago
Hello @anai_barrera10, if you are talking about ERQL queries, then I'm afraid it is not possible to use "count".
ERQL queries can only return a set of objects. If you need to perform counts, you'll need to go via a macro.
MEGA International © 1994 - 2024. All rights reserved