Hello all!
I want to access data and labels from google charts to use them on my own
HTML legend.
Here is my code: (Do not worry about PHP, its just data values. The part I
commented on is the code for my legend. It doesn't show it because I don't
know how to access the values for data and labels.)
<!-- Chart 5 Line Chart -->
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Annee', '0 à 14 ans', '15 à 34 ans', '35 à 64 ans', '65 ans
et plus'],
['2001', <?php echo $v1003_0_4 + $v1004_5_9 + $v1005_10_14 ?>,
<?php echo $v1003_0_4_06 + $v1004_5_9_06 + $v1005_10_14_06
?>,
<?php echo $v1003_0_4_11 + $v1004_5_9_11 + $v1005_10_14_11
?>,
<?php echo $v1003_0_4_16 + $v1004_5_9_16 + $v1005_10_14_16
?>
],
['2006',
<?php echo $v1007_15_19 + $v1008_20_24 + $v1009_25_29 +
$v1010_30_34 ?>,
<?php echo $v1007_15_19_06 + $v1008_20_24_06 +
$v1009_25_29_06 + $v1010_30_34_06 ?>,
<?php echo $v1007_15_19_11 + $v1008_20_24_11 +
$v1009_25_29_11 + $v1010_30_34_11 ?>,
<?php echo $v1007_15_19_16 + $v1008_20_24_16 +
$v1009_25_29_16 + $v1010_30_34_16 ?>
],
['2011',
<?php echo $v1011+$v1012+$v1013+$v1014+$v1015+$v1016 ?>,
<?php echo
$v1011_06+$v1012_06+$v1013_06+$v1014_06+$v1015_06+$v1016_06 ?>,
<?php echo
$v1011_11+$v1012_11+$v1013_11+$v1014_11+$v1015_11+$v1016_11 ?>,
<?php echo
$v1011_16+$v1012_16+$v1013_16+$v1014_16+$v1015_16+$v1016_16 ?>
],
['2016',
<?php echo $v1017_65plus ?>,
<?php echo $v1017_65plus_06 ?>,
<?php echo $v1017_65plus_11 ?>,
<?php echo $v1017_65plus_16 ?>
]
]);
var options = {
title: "Population totale de 2001 à 2016 par groupes d âge",
curveType: 'function',
vAxis: {
title: "Population par groupes d'age",
titleTextStyle: {
italic: false,
}
},
hAxis: {
title: 'Annee',
titleTextStyle: {
italic: false,
}
},
};
var chart = new
google.visualization.LineChart(document.getElementById('curve_chart'));
// //Making legend
// legend = document.getElementById('legend5');
// datasets = data; //dataset objects
// agelabels = data[0]; //age category labels
// const cardGroup5 = document.createElement('DIV');
// cardGroup5.classList.add('card-group');
// legend
// .appendChild(cardGroup5);
// console.log(datasets.length);
// console.log(agelabels);
// //first loop
// for (let i = 0; i < 4; i++) {
// //creating the color circles
// let legendbg = 'blue';
// let legendborder = 'blue';
// const lp = document.createElement('P');
// const lcircle = document.createElement('SPAN');
// const card = document.createElement('DIV');
// const cardBody = document.createElement('DIV');
// card.classList.add('card');
// cardBody.classList.add('card-body');
// lcircle.classList.add('lcircle');
// lcircle.style.backgroundColor = legendbg;
// lcircle.style.borderColor = legendborder;
// //creating the text which is applied to the circle
//
legend.getElementsByClassName("card-group")[0].appendChild(card);
// card.appendChild(cardBody);
// cardBody.appendChild(lp);
// let datasetLabel = datasets[0][i];
// const ltext = document.createElement('SPAN');
// ltextnode = document.createTextNode(datasetLabel);
// ltext.classList.add('ltext');
// //appending elements to legend
// lp.appendChild(lcircle);
// lp.appendChild(ltext);
// ltext.appendChild(ltextnode);
// for (let y = 0; y < 4; y++) {
// const lp = document.createElement('P');
// const ltext = document.createElement('SPAN');
// ltextnode = document.createTextNode(`${agelabels[y]} :
${data[i+1][y]}`);
// ltext.classList.add('ltext');
// cardBody.appendChild(lp);
// lp.appendChild(ltext);
// ltext.appendChild(ltextnode);
// }
// }
chart.draw(data, options);
}
</script>
<div class="float-container">
<div id="curve_chart" style="height: 500px"></div>
</div>
<div class="float-container" style="height: max-content">
<div id="legend5" class="legendBox"></div>
</div>
Thank you for your answer in advance!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/281aa1ac-d8a2-4131-ad4a-17f25e7e6367n%40googlegroups.com.
