-1
I’m creating a page with a grid that should have 3 charts, one at each grid position. But all the graphs are in the same position of the grid and end up replacing the previous graphs (Graph 2 replaces Graph 1, and Graph 3 replaces Graphs 1 and 2). How do I fix this? Follow the codes below:
fieldset{
border: 1px solid #6f3658;
}
#fieldG {
font-family: 'Century Gothic';
border-radius: 5px;
text-align: center;
width: 900px;
margin: auto;
}
.titGraf {
font-family: 'Bahnschrift Condensed';
text-align: center;
padding: auto;
}
.row {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: auto auto auto;
grid-template-areas: "." "." ".";
}
#g1.highcharts-figure, #G1.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#G1#container1 {
height: 400px;
}
#G1.highcharts-data-table table {
font-family: 'Bahnschrift';
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
#G1.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
#G1.highcharts-data-table td, #G1.highcharts-data-table th, #G1.highcharts-data-table caption {
padding: 0.5em;
}
#G1.highcharts-data-table thead tr, #G1.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
#G1.highcharts-data-table tr:hover {
background: #f1f7ff;
}
#G2.highcharts-figure, #G2.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
#G2.highcharts-data-table table {
font-family: 'Bahnschrift';
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
#G2.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
#G2.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
#G2.highcharts-data-table td, #G2.highcharts-data-table th, #G2.highcharts-data-table caption {
padding: 0.5em;
}
#G2.highcharts-data-table thead tr, #G2.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
#G2.highcharts-data-table tr:hover {
background: #f1f7ff;
}
#G3.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#G3#container {
height: 400px;
}
#G3.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
#G3.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
#G3.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
#G3.highcharts-data-table td, #G3.highcharts-data-table th, #G3.highcharts-data-table caption {
padding: 0.5em;
}
#G3.highcharts-data-table thead tr, #G3.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
#G3.highcharts-data-table tr:hover {
background: #f1f7ff;
}<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="Teste2.css" />
</head>
<body>
<fieldset id="fieldG">
<legend>Bem vindo</legend>
<div class="container">
<div class="row">
<div class="col" id="G1">
<fieldset class="graf" id="graf1">
<legend class="titGraf" id="grafico1">Gráfico 1</legend>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Gráfico 1'
},
xAxis: {
categories: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
'Item 7',
'Item 8',
'Item 9',
'Item 10',
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Gráfico 1'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Quantidade',
data: [13, 10, 7, 5, 5, 3, 2, 2, 2, 1,]
}]
});
</script>
</fieldset>
</div>
<div class="col" id="G2">
<fieldset class="graf" id="graf2">
<legend class="titGraf" id="grafico2">Gráfico 2</legend>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container2"></div>
</figure>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Gráfico 2'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Status',
colorByPoint: true,
data: [{
name: 'Item 1',
y: 35,
}, {
name: 'Item 2',
y: 10
}, {
name: 'Item 3',
y: 15
}, {
name: 'Item 4',
y: 20
}, {
name: 'Item 5',
y: 15
}, {
name: 'Item 6',
y: 5
}]
}]
});
</script>
</fieldset>
</div>
<div class="col" id="G3">
<fieldset class="graf" id="graf3">
<legend class="titGraf" id="grafico3">Gráfico 3</legend>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Preventivas'
},
xAxis: {
categories: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
'Item 7',
'Item 8',
'Item 9',
'Item 10',
'Item 11',
'Item 12'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Gráfico 3'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Antes',
data: [17, 0, 5, 53, 117, 101, 56, 0, 0, 0, 0, 0]
}, {
name: 'Depois',
data: [17, 0, 5, 54, 109, 74, 0, 0, 0, 0, 0, 0]
}]
});
</script>
</fieldset>
</div>
</div>
</div>
</fieldset>
</body>
</html>
You don’t need to put "solved" in the title. I know it’s common in many forums, but here it works different. You have already marked a reply as accepted (when you clicked ) and this is enough to indicate that it has been solved.
– hkotsubo