Loading multiple different charts at one page

[Shahid Majeed]

Hi,

I am trying to draw line and bar chart at my default page. I follow the example code but it through exception in the console.

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

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

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

        $(document).ready(function () {

            displayDashboard();

            setInterval(function () {

                displayDashboard();

            }, 60000);

        });

        function displayDashboard() {

            var dailyBookingChartData;

            var monthlyChartData;

            google.charts.setOnLoadCallback(getDailyBookingChartData);

            google.charts.setOnLoadCallback(getMonthlyChartData);

        }

        function getDailyBookingChartData() {

            $.ajax({

                type: "POST",

                url: "/services/dashboard.asmx/getBookedRoomsPerHour",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    dailyBookingChartData = data.d;

                },

                error: function () {

                    console.log("Error loading getDailyBookingChartData! Please try again.");

                }

            }).done(function () {

                drawDailyBookingChart();

            });

        }

        function drawDailyBookingChart() {

            var jsonChartData = $.parseJSON(dailyBookingChartData);

            var dataTable = new google.visualization.DataTable();

            dataTable.addColumn('datetime', 'Time of Day');

            dataTable.addColumn('number', 'Centralen');

            dataTable.addColumn('number', 'Odenplan');

            dataTable.addColumn('number', 'Strandvägen');

            for (var i = 0; i < jsonChartData.length; i++) {

                dataTable.addRow([new Date(jsonChartData[i].Tid), jsonChartData[i]["Centralen"], jsonChartData[i]["Odenplan"], jsonChartData[i]["Strandvägen"]]);

            }

            var options = {

                bars: 'vertical',

                hAxis: {

                    title: '',

                    format: 'H:mm',

                    minValue: 6,

                    maxValue: 23

                },

                vAxis: {

                    title: '# Mötesrum Bokningar',

                    format: 'decimal'

                }

            };

            var columnChart = new google.charts.Bar(document.getElementById('dailyBookingChart'));

            columnChart.draw(dataTable, google.charts.Bar.convertOptions(options));

        }

        function getMonthlyChartData() {

            $.ajax({

                type: "POST",

                url: "/services/dashboard.asmx/getEstimatedAndDebitedStatisticsPerDay",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    monthlyChartData = data.d;

                },

                error: function () {

                    console.log("Error loading getMonthlyChartData! Please try again.");

                }

            }).done(function () {

                drawMonthChart();

            });

        }

        function drawMonthChart() {

            var jsonChartData = $.parseJSON(monthlyChartData);

            console.log(jsonChartData);

            var dataTable = new google.visualization.DataTable();

            dataTable.addColumn('date', 'Tid');

            dataTable.addColumn('number', 'estimated');

            dataTable.addColumn('number', 'debited');

            for (var i = 0; i < jsonChartData.length; i++) {

                dataTable.addRow([new Date(jsonChartData[i].Date), jsonChartData[i]["estimated"], jsonChartData[i]["debited"]]);

            }

            var options = {

                hAxis: {

                    title: 'Month',

                }

            };

            var lineChart = new google.charts.lineChart(document.getElementById('monthlyChart'));

            lineChart.draw(dataTable, google.charts.lineChart.convertOptions(options));

        }

    </script>

Default.aspx:127 Uncaught TypeError: google.charts.lineChart is not a constructor

    at drawMonthChart (Default.aspx:127)

    at Object.<anonymous> (Default.aspx:109)

    at l (jquery.min.1.8.3.js:2)

    at Object.fireWith [as resolveWith] (jquery.min.1.8.3.js:2)

    at T (jquery.min.1.8.3.js:2)

    at XMLHttpRequest.r (jquery.min.1.8.3.js:2)

drawMonthChart @ Default.aspx:127

(anonymous) @ Default.aspx:109

l @ jquery.min.1.8.3.js:2

fireWith @ jquery.min.1.8.3.js:2

T @ jquery.min.1.8.3.js:2

r @ jquery.min.1.8.3.js:2

XMLHttpRequest.send (async)

send @ jquery.min.1.8.3.js:2

ajax @ jquery.min.1.8.3.js:2

getMonthlyChartData @ Default.aspx:97

Promise.then (async)

google.G.K.U.hl @ loader.js:231

displayDashboard @ Default.aspx:34

(anonymous) @ Default.aspx:25

setInterval (async)

(anonymous) @ Default.aspx:24

l @ jquery.min.1.8.3.js:2

fireWith @ jquery.min.1.8.3.js:2

ready @ jquery.min.1.8.3.js:2

A @ jquery.min.1.8.3.js:2

2Default.aspx:93 Uncaught TypeError: google.charts.Bar is not a constructor

    at drawDailyBookingChart (Default.aspx:93)

    at Object.<anonymous> (Default.aspx:67)

    at l (jquery.min.1.8.3.js:2)

    at Object.fireWith [as resolveWith] (jquery.min.1.8.3.js:2)

    at T (jquery.min.1.8.3.js:2)

    at XMLHttpRequest.r (jquery.min.1.8.3.js:2)