Joomla Templates Club 406,261 posts

[anish28 Friend anish28Join date: August 2015Posts: 144Downloads:137Uploads:20 Thanks: 6 Thanked: 3 times in 3 posts]

#961504

HI I would like to know how to modify the module join my class on the yoga template. I see only exampleChart on the div

Thank you

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#961510

Hi

First to edit module "join my classes" you should disable your default editor from global configuration setting it to NONE

Then you can edit code ( i posted it again in case you want to use it )

<h3 class="title-style-1"><span class="acm-title">Join My Classes</span></h3>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">&lt;/script&gt;
<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  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) ]]);

    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);
  }
&lt;/script&gt;
<style type='text/css'>
  #exampleChart text[fill="#000000"][text-anchor="middle"],
  #exampleChart text[fill="#000000"][text-anchor="end"]{
    fill: #999!important;
  }
  #exampleChart text[fill="#000000"][text-anchor="start"]{
    fill: #fff!important;
  }
  #exampleChart path[stroke="#b7b7b7"],
  #exampleChart rect[x="0"][stroke="#9a9a9a"]{
   display: none;
  }

  #exampleChart [stroke-width="3"] {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1;
  }
</style>
<div id="exampleChart" style="height: 360px;"></div>

---

Attachments:

1. 

[Author]

Posts