Hi,
I just started using google charts for timeline in my timesheets by
downloading script file from the link
https://www.gstatic.com/charts/loader.js
1.I am using fullcalendar.js by Adam Shaw
2.Basically I have a panel with panel-group header being date and event
details with start and end time(many time like 1pm-2pm,2pm-4pm etc) of work
in a day
I want to draw timeline for everyday showing the start and end times in
day.Each day can have many tasks done in different times.I am grouping by
date.
Ex.
May 31,2015 ====space here ======= Here I need timeline bar
1.Task A 1pm-3pm 2hrs
2.Task B 3pm-5pm 2hrs
June 1,2015 ====space here ======= Here I need timeline bar
1.Task c 10am-3pm 5hrs
2.Task B 3pm- 5pm 2hrs
This data is dynamic.It can have any number of days based on filter.
I am doing something like this after grouping my data by date
In groupedEventList below count is 11.
$.each(*groupedEventList*, function (key, dataEvents) {
var panelheader = '<div class="panel-group" >' +
'<div class="panel panel-default">' +
'<div class="accordion-group-header
panel-heading col-md-12 " id="accordion-group-header-' + groupIndex + '">' +
'<h4 class="panel-title
accordion-toggle" data-toggle="collapse" data-target=".group-' +
groupIndex + '">' +
key+
'*<div id="chart_div-' +
groupIndex + '"></div>' +*
'</h4>' +
'</div>';
//timeline visualization rendering
google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
console.log(groupIndex );
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Start Date');
chartData.addColumn('date', 'Start Time');
chartData.addColumn('date', 'End Time');
chartData.addRows([
[key, new Date(dataEvents.startTime), new
Date(dataEvents.endTime)] //this can have multiple time entries for key.*So
how to achieve this.*
* In options below I am grouping but is there any
better way to do this things*
]);
var options = {
height: 100,
timeline: {
groupByRowLabel: true,
showBarLabels: false
}
};
var chart = new
google.visualization.Timeline(document.getElementById('chart_div-'
+ groupIndex ));
chart.draw(chartData, options);
}
*Here groupIndex is index of panel-group header. *
When i checked in *function drawTimeline() { ....} *it is throwing error*
Container is not defined.*
How can achieve to have dynamic div with timeline for its own.
I tried to follow from the link below.
https://developers.google.com/chart/interactive/faq#troubleshooting
There we have different functions for each div with different id.
But I want need dynamically.
Please help me with this
On Monday, August 6, 2012 at 9:36:31 PM UTC+5:30, asgallant wrote:
>
> Basically, you have two options:
>
> 1) draw each chart in it's own draw function, and create a single
> initializing function that calls all of the draw functions, or
> 2) move all of the chart's code into a single function.
>
> The first would look like this:
>
> google.load("visualization", "1", {packages:["corechart"]});
> google.setOnLoadCallback(init);
>
> function init () {
> drawChart1();
> drawChart2();
> // etc....
> }
>
> function drawChart1 () {
> // code for the first chart
> }
>
> function drawChart2 () {
> // code for the second chart
> }
> // etc....
>
> and the second would look like this:
>
> google.load("visualization", "1", {packages:["corechart"]});
> google.setOnLoadCallback(drawCharts);
>
> function drawCharts () {
> var data1 = google.visualization.arrayToDataTable(/*data for chart 1*/
> );
> // do things with data1
> var options1 = {/*options for chart 1*/};
> var chart1 = new google.visualization.<ChartType>(document.
> getElementById('chart1_div'));
> chart1.draw(data1, options1);
>
> var data2 = google.visualization.arrayToDataTable(/*data for chart 2*/
> );
> // do things with data2
> var options2 = {/*options for chart 2*/};
> var chart2 = new google.visualization.<ChartType>(document.
> getElementById('chart2_div'));
> chart2.draw(data2, options2);
>
> var data3 = google.visualization.arrayToDataTable(/*data for chart 3*/
> );
> // do things with data3
> var options3 = {/*options for chart 3*/};
> var chart3 = new google.visualization.<ChartType>(document.
> getElementById('chart3_div'));
> chart3.draw(data3, options3);
>
> // etc....
> }
>
> also, if you need to load multiple visualization packages (required if you
> use some charts like annotatedTimelines or geocharts), you still call
> google.load(...) only once, but you add additional packages, like this:
>
> google.load("visualization", "1", {packages:["corechart", "geochart"]});
>
> On Monday, August 6, 2012 4:26:25 AM UTC-4, kilito wrote:
>>
>> Dear all,
>>
>> I am relatively new to all this. I have some basic html experience, and
>> am able to design a few single charts. It's mostly trialing my code on test
>> page until it shows up as I want it to.
>>
>> Now, I have searched for this, but explanations differ from forum to
>> forum and I'd love a suggestion to my particular problem, so I can learn
>> from there and adapt it.
>>
>> I have multiple charts that work perfectly, all I now need is to add them
>> into one page (roughly eight of them). I have tried it, to no avail.
>>
>> Please see example charts below.
>>
>>
>> <html>
>> <head>
>> <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 = google.visualization.arrayToDataTable([
>> ['Product', 'Avg Price'],
>> ['Carpet Cleaner A', 35.6],
>> ['Carpet Cleaner B', 44.2]
>> ]);
>> var formatter = new google.visualization.NumberFormat({
>> prefix: '\u20AC'
>> });
>> formatter.format(data, 1);
>> var options = {
>> title: 'Average Price (\u20AC)',
>> titleTextStyle: {color: '#201069', fontName: 'Calibri',
>> fontSize: 24},
>> legend: {position: 'none'},
>> vAxis: {'format': '\u20AC#.##',minValue: 0},
>> colors:['#0D23B7'],
>> hAxis: {font: 12}
>> };
>>
>> var chart = new
>> google.visualization.ColumnChart(document.getElementById('chart_div'));
>> chart.draw(data, options);
>> }
>> </script>
>> </head>
>> <body>
>> <div id="chart_div" style="width: 500px; height: 500px;"></div>
>> </body>
>>
>>
>> <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 = google.visualization.arrayToDataTable([
>> ['Customers','16-25yo','26-40yo','41+ yo'],
>> ['',0.516,0.299,0.185]
>> ]);
>> // format the second row as a percent
>> var formatter = new google.visualization.NumberFormat({
>> pattern: '#,###%'
>> });
>> formatter.format(data, 1);
>> formatter.format(data, 2);
>> formatter.format(data, 3);
>> var options = {
>> title: 'Customer Age Demographics',
>>
>> titleTextStyle: {color: 'black', fontName: 'Calibri', fontSize:
>> 24},
>> isStacked: 'true',
>> legend: {position: 'bottom'},
>> hAxis: {format: '#,###%'}
>> };
>>
>> var chart = new
>> google.visualization.BarChart(document.getElementById('chart_div'));
>> chart.draw(data, options);
>> }
>> </script>
>> </head>
>> <body>
>> <div id="chart_div" style="width: 500px; height: 500px;"></div>
>> </body>
>> </html>
>>
>>
>> Thank you so much in advance for any help.
>> Kilian
>>
>>
--
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/ef073467-4d7d-407f-a7fb-8b1d8dab4d41%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
