Re: [visualization-api] material column chart
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 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
>
>
> 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));
> }
>
>
> 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 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.
>>>
>>>
>>> https://www.google.com/jsapi
>>> ">
>>>
>>> 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: '',
>>>
Re: [visualization-api] material column chart
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
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));
}
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 > 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.
>>
>>
>> https://www.google.com/jsapi
>> ">
>>
>> 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
>>
Re: [visualization-api] material column chart
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 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.
>
>
> https://www.google.com/jsapi
> ">
>
> 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));
> }
>
>
>
> /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 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.
>>> >> ContentPlaceHolderID="HeadContent">
>>>
>>> .style1 {
>>> width: 100%;
>>> }
>>>
>>>
>>> https://www.google.com/jsapi
>>> ">
>>>
>>> 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);
>>> }
>>>
>>>
>>>
>>> Once ajax get data i print the data response. So its look like
>>>
>>>1. (54) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
>>>{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
>>>{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
