material column chart

53 views
Skip to first unread message

Shahid Majeed

unread,
Dec 27, 2018, 8:33:28 AM12/27/18
to Google Visualization API
Hi,

I am trying to produce a material column chart. However it seems like i don't have data in correct form.  help me to achieve the chart. Thanks in advance.

Here is my script.
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .style1 {
            width: 100%;
        }
    </style>
    <link href="Styles/dashBoard.css" rel="stylesheet" />
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"]});
        var chartData;

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/services/dashboard.asmx/getBookedRoomsPerHour",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    chartData = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.")
                }
            }).done(function () {
                drawDailyPerHourBookingStatus();
            });
        });
        function drawDailyPerHourBookingStatus() {
            console.log($.parseJSON(chartData));
            var data = google.visualization.arrayToDataTable($.parseJSON(chartData));
            var options = {
                title: "Idag Bokningar",
                pointSize: 5
            };
            var columnChart = new google.visualization.columnChart(document.getElementById('dailyPerHourBookingStatus'));
            columnChart.draw(data, options);
        }
    </script>
</asp:Content><div id="dailyPerHourBookingStatus"></div>

Once ajax get data i print the data response. So its look like
  1. (54) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

I got error in console 
Uncaught Error: First row is not an array.
    at gvjs_oba (format+en,default+en,ui+en,corechart+en.I.js:267)
    at Object.gvjs_Fl [as arrayToDataTable] (format+en,default+en,ui+en,corechart+en.I.js:269)
    at drawDailyPerHourBookingStatus (Default.aspx:48)
    at Object.<anonymous> (Default.aspx:43)
    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)

I tried to produce this graph

chart.PNG

yassin azouzi

unread,
Dec 28, 2018, 5:39:53 AM12/28/18
to google-visua...@googlegroups.com
salut 
essai d'ajouter les coueur dans votre json code 
et affiche un seul ligne tout d'abord


--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/982816bd-c02d-492e-8506-514c6aa1831c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
   ***Azouzi Yassin***

Shahid Majeed

unread,
Dec 28, 2018, 9:44:09 AM12/28/18
to Google Visualization API
HI Yassin,

I successfully generate the graph now. Only problem for me is that its not shows all the label on x-axis. I have continues data. For example 06:00, 07:00, 08:00 and son till 23:00. 
I want to show all the legends on x-axis but dont know how?
Here is my final script. and picture with result.


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart','bar'], 'language': 'sv' });
        var chartData;

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/services/dashboard.asmx/getBookedRoomsPerHour",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    chartData = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.")
                }
            }).done(function () {
                drawDailyPerHourBookingStatus();
            });
        });
        function drawDailyPerHourBookingStatus() {
            var jsonChartData = $.parseJSON(chartData);
            console.log(jsonChartData);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('date', '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: 0
                },
                vAxis: {
                    title: '# Bokningar',
                    format: 'decimal'
                }
            };
            var columnChart = new google.charts.Bar(document.getElementById('dailyPerHourBookingStatus'));
            columnChart.draw(dataTable, google.charts.Bar.convertOptions(options));
        }
    </script>


/Shahid
    1. <span class="gmail
chart.PNG

yassin azouzi

unread,
Dec 28, 2018, 9:57:40 AM12/28/18
to google-visua...@googlegroups.com
excellent 
essai ce code dans les options
title: 'Motivation and Energy Level Throughout the Day',
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          }

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e86c9984-587a-4659-8444-700b8f6331ef%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Shahid Majeed

unread,
Dec 28, 2018, 10:04:07 AM12/28/18
to Google Visualization API
After adding viewWindow options i get the following error.
a.getTime is not a function 

actually Time column in my datatable is date type. might be that is the reason. here is updated script

   <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart','bar'], 'language': 'sv' });
        var chartData;

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/services/dashboard.asmx/getBookedRoomsPerHour",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    chartData = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.")
                }
            }).done(function () {
                drawDailyPerHourBookingStatus();
            });
        });
        function drawDailyPerHourBookingStatus() {
            var jsonChartData = $.parseJSON(chartData);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('date', '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',
                    viewWindow: {
                        min: [7, 30,0],
                        max: [17, 30, 0]
                    }
                },
                vAxis: {
                    title: '# Bokningar',
                    format: 'decimal'
                }
            };
            var columnChart = new google.charts.Bar(document.getElementById('dailyPerHourBookingStatus'));
            columnChart.draw(dataTable, google.charts.Bar.convertOptions(options));
        }
    </script>
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

yassin azouzi

unread,
Dec 28, 2018, 10:08:06 AM12/28/18
to google-visua...@googlegroups.com
changer le time datetime dans votre base c'est mieux
et voir dans votre code c'est comme  :
format: 'h:mm a', 
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.


--
   ***Azouzi Yassin***

--
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-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f5a146a3-ca5f-416c-85f9-7a73125b8c27%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Shahid Majeed

unread,
Dec 28, 2018, 10:18:17 AM12/28/18
to Google Visualization API
I get datetime from database, then i convert the response in json in javascript. Please check the script and screenshot with console log the response.

chart.PNG


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart','bar'], 'language': 'sv' });
        var chartData;

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/services/dashboard.asmx/getBookedRoomsPerHour",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    chartData = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.")
                }
            }).done(function () {
                drawDailyPerHourBookingStatus();
            });
        });
        function drawDailyPerHourBookingStatus() {
            var jsonChartData = $.parseJSON(chartData);
            console.log(jsonChartData);
            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 a',
                    viewWindow: {
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.


--
   ***Azouzi Yassin***

--
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+unsub...@googlegroups.com.

yassin azouzi

unread,
Dec 28, 2018, 11:06:06 AM12/28/18
to google-visua...@googlegroups.com
votre type date pas correct il faut garder le meme type essai un date fixe pour trouver le bon format apres format la date 

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.


--
   ***Azouzi Yassin***

--
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-visualizati...@googlegroups.com.


--
   ***Azouzi Yassin***

--
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-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/914fd483-aeb9-4598-9473-4d76cac08574%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages