Timeline with Multiple Starting/Ending Dates per Record

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered

I'm looking for a way to show a timeline for a single record that has multiple dates. When setting up a timeline, it appears you can only have one entry for both "Starting Field" and "Ending Field".

My data has has multiple starting and ending dates PER record. An example of my data is below:

Record1 Date1 Date2 Date3 Date4 Date5

Record2 Date1 Date2 Date3 Date4 Date5


For each record I want to show a timeline from Date1 to Date2, Date2 to Date3 etc.

Any help would be appreciated.

Thanks.

Photo of Brian

Brian

  • 0 Points

Posted 5 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
You would have to write a short script and directly access HighCharts (which is what QuickBase uses to generate its charts). This hacked up example shows six dates defining three time intervals:

http://jsfiddle.net/PLpJb/2/embedded/result,js/


All you would have to do is grab the six dates from you record (via an AJAX call) and substitute these dates into the three low/high slots in the script (click on the JavaScript tab to see the code):

http://jsfiddle.net/PLpJb/2/embedded/result,js/


Resizing and styling the chart to display nicely on your record is very simple.
Photo of Brian

Brian

  • 0 Points
Great, thanks Dan.

The two links you provided are the same.  Do you have an example of the script?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
My mistake but just click on the JavaScript tab. The fiddle can be viewed, edited and forked from here:

http://jsfiddle.net/PLpJb/2/

Also, to use QuickBase's licensed version of Highcharts you have to use these <script>s:

<script src="https://quickbase.intuitcdn.net/res/59975-21/js/highcharts/highcharts.js"></script&gt;
<script src="https://quickbase.intuitcdn.net/res/59975-21/js/highcharts/highcharts-more.js"></script&gt;
<script src="https://quickbase.intuitcdn.net/res/59975-21/js/highcharts/modules/exporting.js"></script&gt;

But these <script>s are included on QuickBase's pages so you only have to include them if you chart is on a user defined page that is otherwise blank.