changer le time datetime dans votre base c'est mieux et voir dans votre code c'est comme : format: 'h:mm a',
Le ven. 28 déc. 2018 à 16:04, Shahid Majeed <[email protected]> a écrit : > 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> > > On Friday, December 28, 2018 at 3:57:40 PM UTC+1, yassin azouzi wrote: >> >> 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] >> } >> >> Le ven. 28 déc. 2018 à 15:44, Shahid Majeed <[email protected]> a >> écrit : >> >>> 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 >>> >>> On Friday, December 28, 2018 at 11:39:53 AM UTC+1, yassin azouzi wrote: >>>> >>>> salut >>>> essai d'ajouter les coueur dans votre json code >>>> et affiche un seul ligne tout d'abord >>>> >>>> >>>> Le jeu. 27 déc. 2018 à 14:33, Shahid Majeed <[email protected]> a >>>> écrit : >>>> >>>>> 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) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, >>>>> {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, >>>>> {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, >>>>> {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, >>>>> {…}, {…}, {…}] >>>>> 1. 0: {Building: "Centralen", Tid: "06:00:00", Rums: 0} >>>>> 2. 1: {Building: "Odenplan", Tid: "06:00:00", Rums: 0} >>>>> 3. 2: {Building: "Strandvägen", Tid: "06:00:00", Rums: 0} >>>>> 4. 3: {Building: "Centralen", Tid: "07:00:00", Rums: 0} >>>>> 5. 4: {Building: "Odenplan", Tid: "07:00:00", Rums: 0} >>>>> 6. 5: {Building: "Strandvägen", Tid: "07:00:00", Rums: 0} >>>>> 7. 6: {Building: "Centralen", Tid: "08:00:00", Rums: 0} >>>>> 8. 7: {Building: "Odenplan", Tid: "08:00:00", Rums: 0} >>>>> 9. 8: {Building: "Strandvägen", Tid: "08:00:00", Rums: 0} >>>>> 10. 9: {Building: "Centralen", Tid: "09:00:00", Rums: 0} >>>>> 11. 10: {Building: "Odenplan", Tid: "09:00:00", Rums: 0} >>>>> 12. 11: {Building: "Strandvägen", Tid: "09:00:00", Rums: 0} >>>>> 13. 12: {Building: "Centralen", Tid: "10:00:00", Rums: 0} >>>>> 14. 13: {Building: "Odenplan", Tid: "10:00:00", Rums: 0} >>>>> 15. 14: {Building: "Strandvägen", Tid: "10:00:00", Rums: 0} >>>>> 16. <span class="gmail >>>>> >>>>> -- >>> 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 [email protected]. >>> To post to this group, send email to [email protected]. >>> 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 >>> <https://groups.google.com/d/msgid/google-visualization-api/e86c9984-587a-4659-8444-700b8f6331ef%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> -- >> * ***Azouzi Yassin**** >> *GSM: +216 23 788 098* >> > -- > 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 [email protected]. > To post to this group, send email to > [email protected]. > 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 > <https://groups.google.com/d/msgid/google-visualization-api/f5a146a3-ca5f-416c-85f9-7a73125b8c27%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- * ***Azouzi Yassin**** *GSM: +216 23 788 098* -- 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 [email protected]. To post to this group, send email to [email protected]. 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/CADbr%3DGNKYDfFeZ31ctKDGbz%2BSvKMq9K7vgGxY2faRi%3DbB5u0dQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
