IBM webMethods Hybrid Integration

IBM webMethods Hybrid Integration

Join this online group to communicate across IBM product users and experts by sharing advice and best practices with peers and staying up to date regarding product enhancements.

 View Only

  • 1.  BC Gadget and ChartJS

    Posted Mon July 18, 2016 08:35 PM

    Hi experts,

    How can I use ChartJS java script library in Business Console Gadgets in wM 9.10? Although I added Chart.min.js to gadgetdefintions and created a Chart object it wasn’t displayed in canvas.

    SampleGadget - Hello World!

    This is the end ...

    var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["R ...

    Has anyone tried this?

    Thanks,
    Marko


    #MWS-CAF-Task-Engine
    #webMethods
    #webMethods-BPMS


  • 2.  RE: BC Gadget and ChartJS

    Posted Tue July 19, 2016 02:18 AM

    Hi Marko,

    You can use in this way -

    In xhtml page -

     <caf_h:chart id="piechart" 
var="sourceList" value="#{chartBean.sourceListProvider}"
color="#ACACAC" gridColor="#FFFFFF" gridStyle="Solid-Line"
height="200" width="200" 
legendLocation="Right" legendStyleClass="portlet-font"
padding="10" rows="10" series="row"
showLegend="true" type="pie">
<caf_h:chartLabelColumn itemLabel="#{sourceList[0]}"/>
<caf_h:chartDataColumn itemValue="#{sourceList[1]}"
color="#DCDCDC" tooltip="#{sourceList[0]} : #{sourceList[1]}">
<caf_h:commandLink action="#{chartBean.doAction}">
<f:param name="TestParam" value="#{sourceList[0]}"/>
</caf_h:commandLink>
</caf_h:chartDataColumn>
</caf_h:chart>

    In the backing bean -

    protected Object[] dataSource = {
new Object[] { "Bob", 22},
new Object[] { "Jack",43},
new Object[] { "Jill",10},
new Object[] { "Jim", 31},
new Object[] { "James",12}
};

private java.util.List<java.lang.Object> sourceList = null;
private com.webmethods.caf.faces.data.object.ListTableContentProvider sourceListProvider = null;

/**
* Data for the chart
*/
public java.util.List<java.lang.Object> getSourceList()  {
if (sourceList == null) {
sourceList = new java.util.ArrayList<java.lang.Object>();
for (int i = 0; i < dataSource.length; i++) {
sourceList.add(dataSource[i]);
}
}
return sourceList;
}

public com.webmethods.caf.faces.data.object.ListTableContentProvider getSourceListProvider()  {
if (sourceListProvider == null) {
sourceListProvider = new ListTableContentProvider(getSourceList());
}
return sourceListProvider;
}

    Hope this helps!


    #webMethods-BPMS
    #MWS-CAF-Task-Engine
    #webMethods


  • 3.  RE: BC Gadget and ChartJS

    Posted Tue July 19, 2016 04:26 AM

    Thanks Raja for your CAF sample.

    In my evaluation I try to use 3rd party library ChartJS (www.chartjs.org/) to view charts in a Business Console Gadget. This should be a real good use case for light weight charts and therefore a valid alterative to Mashzone NG.


    #webMethods-BPMS
    #webMethods
    #MWS-CAF-Task-Engine


  • 4.  RE: BC Gadget and ChartJS

    Posted Mon September 05, 2016 01:24 PM

    Yes it should be possible to include ChartJS in a gadget and use it to render the charts. We will be shipping a sample in the upcoming 9.12 release. Meanwhile if it’s still not working, let me know.
    Regards,
    Amit


    #webMethods
    #MWS-CAF-Task-Engine
    #webMethods-BPMS


  • 5.  RE: BC Gadget and ChartJS

    Posted Mon September 05, 2016 04:42 PM

    Hi Amit,

    With little help I managed to include ChartJS in BC Gadget, as well in wM 9.10:

    view.xhtml looks like

    <html>
<div id="chart-container" >
<h3></h3>
<canvas id="bar" class="chart chart-bar" chart-data="data" 
chart-labels="labels" chart-series="series" chart-dataset-override="datasetOverride"/>
<input type="button" data-ng-click="refreshHistogram()" class="bc-button"
value="Refresh"></input>
</div>
</html>

    there need to be some change in config.js:

    
...
var ProcessHistogramChart_AE43CF20_3F05_1034_A466_1_module = angular.module('ProcessHistogramChart_AE43CF20_3F05_1034_A466_1', ['adf.provider','chart.js'])
...

    and additional settings into gadget definition file

    
...
<gadgetScripts>

<script>/WxPrimeGadgets/gadgets/ProcessHistogramChart/scripts/Chart.min.js</script>
<script>/WxPrimeGadgets/gadgets/ProcessHistogramChart/scripts/angular-chart.min.js</script>
<script>/WxPrimeGadgets/gadgets/ProcessHistogramChart/scripts/config.js</script>
<script>/WxPrimeGadgets/gadgets/ProcessHistogramChart/scripts/controller.js</script>
<script>/WxPrimeGadgets/gadgets/ProcessHistogramChart/scripts/custom.js</script></gadgetScripts>
...

    The full example is attached.

    Regards,
    Marko

    WxPrimeGadgets.zip (51.3 KB)


    #MWS-CAF-Task-Engine
    #webMethods-BPMS
    #webMethods


Related Content