How to set Guides in a SerialCharts

Support
#1

Hi,
I need to define a double level on the category axis, I found the solution in this link but I didn’t understand how to pass the guides with Cuba.

image
image949×524 15.3 KB

http://jsfiddle.net/davidliang2008/kp16Lv4a/

My code seems ok , by I need to enable guides in chart xml…

    / FactTable by DesNegozio,DesRep /
    List<Guide> guides = new ArrayList<Guide>();

    ConcurrentMap<String, Map<String, List<FactTable>>> byNameAndRep =
    ls.parallelStream().collect(groupingByConcurrent(FactTable::getDesNegozio,groupingBy(FactTable::getDesRep)));
    byNameAndRep.forEach( (k, v) -> {
        Guide i = new Guide();
        TreeMap mp = getTreeMap(v);
        i.setLabel(k)
        .setCategory(mp.firstKey().toString())
        .setToCategory(mp.lastKey().toString())
        .setLineAlpha((double) 0).setExpand(true).setLabelRotation(0).setTickLength(80);
        guides.add(i);
    });

    blueSerialChart.setGuides(guides);
    blueSerialChart.setDataProvider(blueSerialChartDataProvider);

<chart:categoryAxis
labelsEnabled=“true”
gridAlpha=“0”
labelRotation=“90”
title=“Punti di Vendita”>

</chart:categoryAxis>
#3

I’m trying to create a stacked bar chart with multiple clustered categories
data are provided from the database using the EntityDataItem …

@Subscribe
protected void onInit(InitEvent event) {
    List<DataStatService.OPZIONI> opz = Arrays.asList(DataStatService.OPZIONI.NO_DATAORA);

    List<FactTable> ls = dataStatService.loadfactTable(loadContext, new ArrayList<String>(Arrays.asList("%")) ,
    getDateBeforeSomeDays(new Date(),-19),getDateBeforeSomeDays(new Date(),-19),null,
    null, new ArrayList<String>(Arrays.asList("%")),null,null,null,null ,
    opz);
    ListDataProvider blueSerialChartDataProvider = new ListDataProvider();

    ls.forEach(rec -> {
        blueSerialChartDataProvider.addItem(new EntityDataItem(rec));
    });
#4

Hi!

I’ve prepared the example how to add Guide dynamically:

Screen layout 
<data>
    <collection id="chartDataDc"
                class="com.company.demo.entity.ChartData"
                view="_local">
        <loader id="chartDataLd">
            <query><![CDATA[select e from demo_ChartData e order by e.category]]></query>
        </loader>
    </collection>
</data>
<layout>
    <charts:serialChart id="serialChart"
                        width="700px"
                        height="600px"
                        dataContainer="chartDataDc"
                        categoryField="category">
        <charts:graphs>
            <charts:graph id="saleGraph"
                          type="COLUMN"
                          valueField="sale"
                          fillAlphas="1"/>
            <charts:graph id="costGraph"
                          type="COLUMN"
                          valueField="cost"
                          fillAlphas="1"/>
            <charts:graph id="benefitGraph"
                          type="COLUMN"
                          valueField="benefit"
                          fillAlphas="1"/>
        </charts:graphs>
        <charts:categoryAxis gridAlpha="0"
                             labelRotation="90"/>
    </charts:serialChart>
</layout>
Controller 
@Inject
private SerialChart serialChart;
@Inject
private CollectionContainer<ChartData> chartDataDc;

@Subscribe
private void onAfterShow(AfterShowEvent event) {
    List<Guide> guides = new ArrayList<>();

    List<ChartData> dataList = chartDataDc.getItems();
    Map<String, List<ChartData>> groupedData = groupDataByGuide(dataList);
    
    for (Map.Entry<String, List<ChartData>> entry : groupedData.entrySet()) {
        List<ChartData> guideData = entry.getValue();
        guides.add(new Guide()
                .setCategory(guideData.get(0).getCategory())
                .setToCategory(guideData.get(guideData.size() - 1).getCategory())
                .setLabel(entry.getKey())
                .setExpand(true)
                .setLabelRotation(0)
                .setTickLength(80));
    }

    serialChart.getCategoryAxis().addGuides(guides.toArray(new Guide[guides.size()]));
}

private Map<String, List<ChartData>> groupDataByGuide(List<ChartData> dataList) {
    Map<String, List<ChartData>> result = new HashMap<>();
    for (ChartData data : dataList) {
        String guideKey = data.getGuideLabel();
        List<ChartData> guideData = result.computeIfAbsent(guideKey, k -> new ArrayList<>());
        guideData.add(data);
    }
    return result;
}

We init guides in onAfterShow because at this time data have been loaded. Pay attention to category names. It seems that AmChart sort categories and their names should be started with Guide name.

image
image689×550 3.83 KB

The full sample: demo.zip (87.9 KB)

For Stacked Column Chart you can see examples:

2 Likes