Visualize data from SQL to Bubble Chart

[Ahmad Fauzan]

I have a problem to use my data from db and visualize it as Bubble Chart. This is my code:

 <section id="main" class="wrapper">

        <div class="container">

            <header class="major">

                <h2>Visualization</h2>

                <p>Title here</p>

            </header>

            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

            <script type="text/javascript">

                google.charts.load('current', {

                    'packages': ['corechart']

                });

                google.charts.load('current', {packages:["motionchart"]});

                google.charts.setOnLoadCallback(drawSeriesChart);

                function drawSeriesChart() {

                    var data = google.visualization.arrayToDataTable([

                        ['Recovery', 'Coordinate X', 'Coordinate Y', 'Severity', 'DBH'],

                        ['Yes', 0.75, 0.20, 'Low', 20],

                        ['No', 2.00, 0.20, 'High', 12.5],

                        ['Yes', 2.30, 1.00, 'Medium', 9.1],

                        ['No', 1.20, 3.70, 'Low', 20.6],

                        ['No', 2.50, 6.60, 'High', 20],

                        ['Yes', 0.40, 4.00, 'Medium', 9.8],

                    ]);

                    var options = {

                        hAxis: {

                            title: 'Coordinate X'

                        },

                        vAxis: {

                            title: 'Coordinate Y'

                        },

                        legend: {

                            position: 'right',

                            labeledValueText: 'Legend'

                        },

                        bubble: {

                            textStyle: {

                                fontSize: 11

                            }

                        }

                    };

                    var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));                   

                    chart.draw(data, options);

                     //chart.bind(slider, bubbleChart);

                }

            </script>

            <center>

                <b>Severity level on trees based on post fire effects</b>

                <div id="series_chart_div" style="width: 1100px; height: 500px;">

                    

                </div>

            </center>

        </div>

    </section>

This data is hardcoded. I want to take data directly from db and visualize it as bubble chart. It is not suitable to hardcoded 200 data in coding.

    var data = google.visualization.arrayToDataTable([

                        ['Recovery', 'Coordinate X', 'Coordinate Y', 'Severity', 'DBH'],

                        ['Yes', 0.75, 0.20, 'Low', 20],

                        ['No', 2.00, 0.20, 'High', 12.5],

                        ['Yes', 2.30, 1.00, 'Medium', 9.1],

                        ['No', 1.20, 3.70, 'Low', 20.6],

                        ['No', 2.50, 6.60, 'High', 20],

                        ['Yes', 0.40, 4.00, 'Medium', 9.8],

                    ]);

Anyone can help me? Urgent.