BC Gadget and ChartJS

, ,
1

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

2

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!

3

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.

4

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

2 Likes
5

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)