Re: Question about creating a timeline

[Andrew Gallant]

The Timeline will create multiple rows of bars per row if there are overlapping events in that row.  As an example, if you change the start year for John Adams to 1796, it spills over to a new line, since it overlaps with George Washington: http://jsfiddle.net/asgallant/khCws/

On Wednesday, July 16, 2014 11:08:04 AM UTC-4, Matthew Bleiman wrote:

Hello,

 

I am trying to create a timeline using Google's timeline package. I've read through the page here: https://developers.google.com/chart/interactive/docs/gallery/timeline and it looks like the package is a very good fit for what I need. However, there is one additionality I would like to add so I want to see if it is possible or not. Look at the "An Advanced Example" chart. Is it possible to make something like that, but where for each row entry (President, VP, Sec. of State), there are multiple rows of timelines? To go along with this example, imagine that at any given time there are two presidents, two VPs, and two Sec. of States, and that the timelines between the two presidents might not match up.

 

The specific example of what I am trying to do is very poorly sketched out in the attached link.

 

I am a beginner user so sorry if this is a dumb question (I'm here because trying to make this chart in excel turned out to be an incredibly frustrating and inefficient experience), but any advice would be useful. If it is possible, it would also be very helpful if someone could explain how to build that added dimension into the data table.

 

Thanks!

[Matthew Bleiman]

Whoops accidentally deleted the main topic.

Thank you very much Andrew. I was able to create the timeline as such. I have one additional question. I am now trying to query two data sources and combine the results into one chart. The code I have so far is here: http://jsfiddle.net/29PPu/ However, I'm stuck at this point (I'm not familiar with Javascript at all). So far, I query both spreadsheets and then send and process the query for the second one. It appears that to add data from the second, I have to also send the query to that one and call the dataTable method on the queryReponse object and then I can concatenate the two data tables before building the chart. But I've been utterly unable to do this in my code. Can anyone provide assistance on how to structure this so it can work?

[MB]

bump

[Andrew Gallant]

Thanks for the reminder, I started an answer a few days ago and got distracted away.  You can merge the DataTables from each query together with a bit of hackery: http://jsfiddle.net/asgallant/2wt3Q/

This method will work with any number of queries you need to make, as long as every query returns a DataTable with the exact same column structure.

[MB]

Thank you so much! This is perfect. And I learned some JS in the process :) Really appreciate the help.

[MB]

I'm back with yet another question. Now that this task is complete, I'm trying to apply some advanced features like controls. My first goal is to add a filter to the bottom of the timeline where I can draw to just see the dates that I want to see. I followed the guidance on the https://developers.google.com/chart/interactive/docs/gallery/controls to build in a ChartRangeFilter div. Of course, I failed (I'm way in over my head now). However, I got an error when I tried to run the program that says "[object Object] does not fit either the Control or Visualization specification.×"  Is this a result of the hackery that put the multiple data tables into one or is it something else? I've attached the program in full for reference. The range filter was added within the draw function as a variable called rangeSlider. Any ideas?

[Andrew Gallant]

You have to convert your Timeline into a ChartWrapper in order to use it with a Dashboard:

var chart = new google.visualization.ChartWrapper({

    chartType: 'Timeline',

    containerId: 'Chart',

    options: {

        // put your chart options here

    }

});

[MB]

I implemented as you suggested, but now I get aOne or more participants failed to draw()× error. Any idea what could be going on? (file attached). I can't think you enough, you've been incredibly helpful. (On a side note, is there any easy way for an amateur to debug this myself so I don't have to be reliant on you? :P)

[Andrew Gallant]

The problem stems from your ChartRangeFilter, and is ultimately 3-fold.  First, the container ID is specified incorrectly, the object key should be "containerId", not "containerID".  Second, you need to use the "filterColumnIndex" option when using a column index, not the "filterColumnLabel" option (which would take a column label instead).  Third, the base columns are not appropriate for a LineChart (which the ChartRangeFilter draws internally), so you have to use the ui.chartView.columns option to change the chart's view.  Put together, they look like this:

var rangeSlider = new google.visualization.ControlWrapper({

    'controlType': 'ChartRangeFilter',

    'containerId': 'Filter',

    'options': {

    'filterColumnIndex':2,

    ui: {

        chartView: {

            columns: [2, {

            type: 'number',

            calc: function () {return 0;}

            }]

            }

        }

    }

});

I wish I could give you good hints for diagnosing this stuff, but a lot of it just comes down to familiarity with the API.  In this case, I found out where the problem was by drawing each element one at a time until I found something that failed.  As an example, I added this after your chart declaration:

chart.setDataTable(data); // give the chart some data to draw with

chart.draw(); // draw the chart

return; // return from the function so the rest of the code doesn't execute

The chart draw fine, so I repeated this with the ChartRangeFilter, and got an error message that was more helpful in Chrome's developer console:

Uncaught Error: The container #null is null or not defined.

This lead me to the problem with the "containerId" parameter.  I then repeated this process fixing one item at a time until I had the complete solution.

[MB]

Thank you - excellent explanation. I was able to fix this and add another control successful. You are the best!