1

I'm trying to build a javascript function to build some graphs using google charts on my webpage.

This is what I have done.

<script type="text/javascript">


            google.load("visualization", "1.1", {packages: ["bar"]});
            google.setOnLoadCallback(drawStuff);
            function drawStuff() {

                var data2 = <?php echo json_encode($final_array); ?>;

                for(i=0;i<data2.length-1;i++) {

                    console.log(data2[i]);

                    var name = 'data'+i;
                    name = new google.visualization.arrayToDataTable([
                        ['', ''],
                        ["$50", data2[i]['calc']['savings']],
                        ["$54", 31],
                        ["$10", 12],
                        ["$11", 10],
                        ['$31', 3]
                    ]);

                    var optionsname = 'options'+i;
                    optionsname = {
                        width: 150,
                        legend: {position: 'none'},
//                chart:
                        axes: {
                            x: {
                                0: {side: 'top'}
                                // Top x-axis.
                            }
                        },
                        bar: {groupWidth: "90%"}
                    };

                    var chartname = 'chart'+i;

                    chartname = new google.charts.Bar(document.getElementById('columnchart_material.'+i));
                    // Convert the Classic options to Material options.
                    chartname.draw(name, google.charts.Bar.convertOptions(optionsname));
                }

        };
    </script>

Since the data is in an array and I need to display it on multiple places within the same page, I've used for loop. All the variable names are generated properly and as per the guidelines. But at any point I'm able to see only one instance of the graph on the page. How do I overcome this?

pixelscreen
  • 1,945
  • 2
  • 18
  • 40
  • There's a bug with multiple material charts, see answer [here](http://stackoverflow.com/questions/32884121/google-charts-drawing-multiple-bar-charts-with-dual-axis-in-ie/32907208#32907208), and maybe is better to define array: `chart[i] = new ...` and then use `chart[i].draw(...` and one options for all charts. – Milan Rakos Nov 30 '15 at 13:07
  • Possible duplicate of [How to add multiple material google charts to one page?](http://stackoverflow.com/questions/33712452/how-to-add-multiple-material-google-charts-to-one-page) – Charles Clayton Nov 30 '15 at 16:38

0 Answers0