How to access data and labels from google chart.

[Alihan Djamankulov]

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!