Joomla Templates Club 406,261 posts

[lvanwiem Friend lvanwiemJoin date: June 2006Posts: 16Downloads:35Uploads:3 Thanks: 6]

#966650

Hello,

If you click on the demo site on the _more link and then choose ‘home yoga’.
There is a Timeline chart, can someone please tell me how this is done?
In the documentation I don’t find anything about it…

Thanks in advance

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#966893

Hi Ivanwiem,

Do you mean the timeline in ‘Teaching Experience’ section? http://prntscr.com/cfuodl

It’s JA ACM – Advanced Custom HTML module with type of Timeline. Below is backend settings of this module in our demo site:

Module: http://nimb.ws/U6kOgB
Module class suffix: title-style-1 grid-custom (remember to add a space before class suffix name)

Let us know if you need any further help.

[lvanwiem Friend lvanwiemJoin date: June 2006Posts: 16Downloads:35Uploads:3 Thanks: 6]

#966921

No I mean the Join my classes timeline

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#966923

It’s a custom HTML module including script for google chart. You can create this module with this way:

• Backend > System > Global Configuration > Set Defautl editor to None.
• Backend > Extensions > Modules > Create a new custom HTML module > Add below script:

  
  <h3 class=&quot;title-style-1&quot;><span class=&quot;acm-title&quot;>Join My Classes</span></h3>
  <script type=&quot;text/javascript&quot; src=&quot;<a href="https://www.gstatic.com/charts/loader.js"></script&gt">https://www.gstatic.com/charts/loader.js"></script&gt</a>;</li>
  </ul>
  <p><script type=&quot;text/javascript&quot;>
  google.charts.load(&quot;current&quot;, {packages:[&quot;timeline&quot;]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
  var container = document.getElementById('exampleChart');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Day' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
  [ 'Sunday',  'Sunrise Yoga',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
  [ 'Sunday',  'Vinyasa Flow',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
  [ 'Sunday',  'Restorative Yoga', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
  [ 'Monday', 'Open Yoga',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
  [ 'Monday', 'yoga @ Noon',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
  [ 'Monday', 'Gentle Yoga',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
  [ 'Wednesday', 'Open Yoga',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
  [ 'Wednesday', 'yoga @ Noon',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
  [ 'Wednesday', 'Gentle Yoga',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
  [ 'Thursday', 'Open Yoga',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
  [ 'Thursday', 'yoga @ Noon',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
  [ 'Thursday', 'Gentle Yoga',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
  [ 'Friday', 'Open Yoga',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
  [ 'Friday', 'yoga @ Noon',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
  [ 'Friday', 'Gentle Yoga',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
  [ 'Saturday',   'Advanced Yoga',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
  [ 'Saturday',   'Pre-Natal Yoga',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
  [ 'Saturday',   'Sunset Yoga',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);</p>
  <pre><code>var options = {
    backgroundColor: '#222',
    tooltip: { textStyle: { fontName: 'Work Sans', fontSize: 14 } },
    timeline: { colorByRowLabel: true },
    timeline: { rowLabelStyle: {fontName: 'Work Sans', fontSize: 14, color: '#fff' },
                   barLabelStyle: { fontName: 'Work Sans', fontSize: 14 } }
  };
  
  chart.draw(dataTable, options);</code></pre>
  <p>}
  </script>
  <style type='text/css'></p>
  <h1>exampleChart text[fill=&quot;#000000&quot;][text-anchor=&quot;middle&quot;],</h1>
  <h1>exampleChart text[fill=&quot;#000000&quot;][text-anchor=&quot;end&quot;]{</h1>
  <pre><code>fill: #999!important;</code></pre>
  <p>}</p>
  <h1>exampleChart text[fill=&quot;#000000&quot;][text-anchor=&quot;start&quot;]{</h1>
  <pre><code>fill: #fff!important;</code></pre>
  <p>}</p>
  <h1>exampleChart path[stroke=&quot;#b7b7b7&quot;],</h1>
  <h1>exampleChart rect[x=&quot;0&quot;][stroke=&quot;#9a9a9a&quot;]{</h1>
  <p>display: none;
  }</p>
  <h1>exampleChart [stroke-width=&quot;3&quot;] {</h1>
  <pre><code>stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1;</code></pre>
  <p>}</p>
  <p></style>
  <div id=&quot;exampleChart&quot; style=&quot;height: 360px;&quot;></div></p>
  <p>

1 user says Thank You to Saguaros for this useful post

1. lvanwiem

[lvanwiem Friend lvanwiemJoin date: June 2006Posts: 16Downloads:35Uploads:3 Thanks: 6]

#966931

If I try this it works, thx but a small question the x-axis labels are black and in the demo site the are gray.
I have seen that it use a stylesheet for that but where do I have add this?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#966934

Which labels are you referring to? You can send screenshot highlighting it so I will have a look.

[lvanwiem Friend lvanwiemJoin date: June 2006Posts: 16Downloads:35Uploads:3 Thanks: 6]

#966941

Lik you see the time labels are black and I would have this in gray

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#967468

You can provide the URL and admin login info of your site, I will check it for you. http://static.joomlart.com/images/blog/2015/nov/Add-new-post.gif

[lvanwiem Friend lvanwiemJoin date: June 2006Posts: 16Downloads:35Uploads:3 Thanks: 6]

#967537

Is solved, the stylesheet was not good embedded .

Thanks for everything.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#967540

Glad to here it’s solved now!

[Author]

Posts