custom format can be time format like this (hh : mm) ?

[anurag]

Hi
I have stuck in with the following problem-…please help me.
Here I mention the code where I am trying to plot Area , Pie and
Column chart to show week wise Individual and team task total time
(Area), task wise total time (Pie chart) and show total Individual and
team task (column chart).
So, objective of my all chart is to show or plot total time (hh: mm)
in different manner.

But I am facing problem to show time in hh: mm format. As per my
knowledge- In Google chart column data type is not support time data-
type , so alternate way is to first covert time into float and do
plotting .
Later on we can use vAxis and xAxis format properties to show data on
custom format.

Now…seek suggestion from your side:
a. Should custom format can be time format like this (hh : mm) ?
Despite trying with the below code to resolve the problem , I am
unable to do so.
Please help me out.
The concern code mention below – through which tried to resolve the
problem.

vAxis :{title: 'Hours',titleTextStyle: {color: 'black', fontName:
'Helvetica', fontSize: 11}
,vAxis:{minValue:0.0,format:'##:##'}},
xAxis:{format:'##:##'},


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

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

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

data.addColumn('string', 'Year');

data.addColumn('number', 'Indiviual_Task');

data.addColumn('number', 'Team_Task');

data.addRows([['Week 3',0,1.3],['Week 4',0,0.45],['Week 5',0,0.25],
['Week 6',0,1.3],['Week 7',3,1.3],['Week 8',3.3,1.3],['Week 9',0,1.3],
['Week 10',0,1.3],['Week 11',0,1.3],['Week 12',0,0],['Week 13',0,1.3],
['Week 14',0,1.3],['Week 15',0,1.3],['Week 16',0,1.3],['Week 17',
0,1.3],['Week 18',0,1.3],['Week 19',3,1.3],['Week 20',1.3,0],['Week
21',0,0],['Week 22',1,0],['Week 23',3.3,0],['Week 24',1.15,0],['Week
25',1,0],['Week 26',0,0],['Week 27',3,2.3],['Week 28',0,4.4],['Week
29',0,4.4]]);

var chart = new
google.visualization.AreaChart(document.getElementById('chart_div1'));

chart.draw(data, {width: 850, height: 400,

vAxis :{title: 'Hours',titleTextStyle: {color: 'black', fontName:
'Helvetica', fontSize: 11}

,vAxis:{minValue:0.0,format:'##:##'}},

xAxis:{format:'##:##'},

colors: ['#84AACB', '#885654'],

chartArea: {top:20,left:50,buttom:2},

fontName:'Helvetica',

fontSize:11,

is3D: 1

});

}

</script>

<!--Pie chart poltting coding -->

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

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

data.addColumn('string', 'Task');

data.addColumn('number', 'Hours per task');

data.addRows(5);

data.setValue(0, 0, 'Task1');

data.setValue(0, 1, 1.3);

data.setValue(1, 0, 'Task2');

data.setValue(1, 1, 8.3);

data.setValue(2, 0, 'Task3');

data.setValue(2, 1, 8);

data.setValue(3, 0, 'Task4');

data.setValue(3, 1, 8.55);

data.setValue(4, 0, 'Task5');

data.setValue(4, 1, 26.2);



var chart = new
google.visualization.PieChart(document.getElementById('chart_div2'));

chart.draw(data, {

width: 400,

height: 240,

is3D: 0,

pieSliceText : 'percentage',

tooltipTextStyle : {color: 'black'} ,

xAxis:{format:'##:##'},

fontName:'Helvetica',

fontSize:11,

colors: ['#84AACB', '#AED494', '#FFAC8C', '#7FFF7F','#885654',
'#FFD4AA' ,'#FFD4AA' ,'#0000FF','#FFD4FF','#00FFFF'],

chartArea: {top:4,left:15}

});

}

</script>

<!--Column chart poltting coding -->

<script type="text/javascript">

google.load("visualization", "1", {packages:
["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

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

data.addColumn('string', 'Year');

data.addColumn('number', 'Individual_Activities');

data.addColumn('number','BVB Dortmund');

data.addRows(2);

data.setValue(0, 0, 'Individual_Activities');

data.setValue(0, 1, 20.45);

data.setValue(1, 0, 'BVB Dortmund');

data.setValue(1, 1, 32.3);

var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div3'));

chart.draw(data, {width: 400, height: 240,

colors: ['#84AACB', '#84AACB', '#84AACB' ,'#84AACB',
'#84AACB', '#84AACB'],

chartArea: {top:4},

vAxis:{minValue:0.0,format:'##.##'},

xAxis:{format:'##.##'},

legend: 'none',

fontName:'Helvetica',

fontSize:11,

is3D: 1

});

}

</script>

<div id="chart_div1" algin="center" style="width:100%"></div>

<div id="chart_div2" style="width:35%;float:left;"></div>

<div id="chart_div3" style="width:60%;float:left;"></div>

[asgallant]

I don't think there is any way to get the axes to display time in the hh:mm format, but you could convert your time to decimal format (ie 1:45 = 1.75), set the formatted value for display on the bars, lines, etc, and label your axes "Hours."

Something like:

function drawChart() {

     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Year');
     data.addColumn('number', 'Individual_Activities');
     data.addColumn('number','BVB Dortmund');
     data.addRows(2);
     data.setValue(0, 0, 'Individual_Activities');

     data.setValue(0, 1, 20.75, "20:45");

     data.setValue(1, 0, 'BVB Dortmund');

     data.setValue(1, 1, 32.5, "32:30");

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
     chart.draw(data, {width: 400, height: 240,
          colors: ['#84AACB', '#84AACB', '#84AACB' ,'#84AACB', '#84AACB', '#84AACB'],
          chartArea: {top:4},

          vAxis:{minValue:0, title: "Hours"},

          legend: 'none',
          fontName:'Helvetica',
          fontSize:11,

          is3D: true 
     });
}

Also, if you plan on using more than 1 chart on a page, you only want to call google.load(...) and google.setOnLoadCallback(...) once.  If you want to draw all three charts at once, move their code into one function or create a function that calls the other three and put that in setOnLoadCallback.