Scrollbars in amChart Gantt

Hi.
I have spoken with amChart about Gantt Chart and how to enable Scrollbars instead of Zoombars when the category items is so many that the chart is starting to shrink the view.
I got an working example from them in JavaScript.
I was wondering how to make the scrollbar functional in Cuba Platform.
The last touch is to implement this listener into the Gnatt.
Where do I put the following code in Cuba Platform or is it implemented?


"listeners": [{
    "event": "init",
    "method": function(e) { 
      e.chart.zoomToIndexes(0, 5)
    }
  }]

I found out of the problem my self.
Here is the solution to adding Vertical Scrollbar to amChart Gnatt in Cuba Platform.
In the home.xml file add:


<chart:ganttChart id="dayGnattChart"
                  additionalSegmentFields="task"
                  balloonDateFormat="JJ:NN"
                  brightnessStep="7"
                  categoryField="category"
                  colorField="color"
                  columnWidth="0.5"
                  datasource="dataGroupsDs"
                  endDateField="end"
                  height="600px"
                  marginLeft="10"
                  marginRight="10"
                  period="HOURS"
                  rotate="true"
                  segmentsField="dataSegment"
                  startDateField="start"
                  theme="NONE"
                  zoomOutText="">
    <chart:graph balloonText="<strong>&#91;&#91;task&#93;&#93;</strong>: &#91;&#91;open&#93;&#93; - &#91;&#91;value&#93;&#93;"
                 fillAlphas="1"
                 labelOffset="10"
                 labelPosition="INSIDE"
                 labelText="&#91;&#91;task&#93;&#93;"
                 lineAlpha="1"
                 lineColor="WHITE"/>
    <chart:valueAxis position="TOP"
                     type="DATE">
        <chart:guides>
            <chart:guide dashLength="5"
                         inside="true"
                         label="NĂ¥"
                         labelRotation="90"
                         lineAlpha="5"
                         lineColor="#CC0000"/>
        </chart:guides>
    </chart:valueAxis>
    <chart:chartCursor cursorAlpha="0"
                       cursorColor="#55bb76"
                       fullWidth="false"
                       valueBalloonsEnabled="false"
                       valueLineAlpha="0.5"
                       valueLineBalloonEnabled="true"
                       valueLineEnabled="true"
                       valueZoomable="true"
                       zoomable="false"/>
    <chart:chartScrollbar resizeEnabled="false"/>
    <chart:export enabled="true"/>
</chart:ganttChart>

And in the Home.java View controller add this:


@Inject
private GanttChart dayGnattChart;

In the declaration area:
and in the init method add:


Calendar start = Calendar.getInstance();
Calendar end = Calendar.getInstance();

// Generates some dummy data
for(int i = 0; i < 10; i++) {
    DataGroup dataGroup1 = new DataGroup();
    dataGroup1.setCategory("Demo " + i);
    List<DataSegment> segmentList = null;

    for(int j = 1; j < 3; j++ ) {
        start.set(2017, 6, j, 9,20,00);
        end.set(2017, 6, j * 2, 9,20,00);

        DataSegment segment = new DataSegment();
        segment.setDataGroup(dataGroup1);
        segment.setStart(start.getTime());
        segment.setEnd(end.getTime());
        segmentList = new ArrayList<DataSegment>();
        segmentList.add(segment);

    }
    dataGroup1.setDataSegment(segmentList);

    dataGroupsDs.includeItem(dataGroup1);

   // This line is important to make scrolling work
    dayGnattChart.zoomToIndexes(0,5);
}

Have a nice coding :slight_smile:

Hi Kjell,

I have stumbled upon a similar problem. I require scrollbars in the chart instead of zoom axis as provided. Can you please share the JS code that the amcharts provided you with. That will be a big help.

Thanks
Siddharth