Chart

compared with
Version 6 by Brad Kroeger
on Nov 17, 2010 18:43.


Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 1 changes. View first change.

 h1. How to Use the ICEfaces OutputChart Component
  
 The outputChart component uses the JCharts open source charting utility (http://jcharts.sourceforge.net/) to create charts. The two main types of charts that can be created with this component are axis charts and pie charts.
  
 ----
 \\
 {panel}This tutorial will discuss the following topics related to the use of the outputChart component:
  
 * [Axis OutputChart Component|#axis]
 * [Pie OutputChart Component|#pie]
 * [Combining with the OutputChart Component|#combining]
 * [Tutorial Source Code Downloads|#downloads]
 {panel}
 \\
 ----
  
 h3. {anchor:axis}Axis OutputChart Component
 \\
 There are 7 types of axis charts: area, areastacked, bar, barclustered, barstacked, line and point.
  
 !area.png! !areastacked.png!
 !bar.png! !barclustered.png!
 !barstacked.png! !line.png!
 !point.png!
  
 {code:xml}
 <ice:outputChart id="axisOutputChart"
  type="bar"
  chartTitle="Bar Chart"
  yaxisTitle="Problems"
  xaxisTitle="Years"
  xaxisLabels="#{axisChartBean.labels}"
  labels="#{axisChartBean.legendLabels}"
  colors="#{axisChartBean.paints}"
  data="#{axisChartBean.data}" />
 {code}
  
  The "colors" method of the bean may return either a java.util.List of java.awt.Color, an array of java.awt.Color or a String array. You can also define the data statically in the jsf page:
  The "colors" binding in the bean may return either a java.util.List of java.awt.Color, an array of java.awt.Color or a String array. You can also define the data statically in the jsf page:
  
 {code:xml}
 colors="red, blue, green"
 {code}
  
 The "data" method of the bean may return either a java.util.List of double array for each pair value, or a double array. You can also define the data statically in the page:
  
 Defining the data for an axis type chart in the page for two data sets:
 {code:xml}
 data="10, 30, 40, 33: 30, 20, 30, 40"
 {code}
 NOTE: the colon(":") is used as the identifier for a new data set.
  
 The axis charts use the same underlying data structure which can allow you to change the chart type dynamically:
  
 {code:xml}
 type="#{axisChartBean.type}"
 {code}
  
 The participation of the outputChart component with the jsf lifecycle allows developers to hook actionListeners to a clientSideImageMap. This feature can be harnessed to provide drill down behavior in all axis charts except area and areastacked. In the demo, when you click on a bar in the chart this will trigger the actionListener to display the value of that bar on the page.
  
 {code:xml}
 actionListener="#{axisChartBean.imageClicked}"
 {code}
  
 By default the chart component renders only on the first render cycle and any further render requests will not cause it to be re-rendered unless specified. The rendering of a chart can be an expensive operation if it renders on every render phase. The renderOnSubmit attribute lets the developer decide when to render the chart.
  
 {code:xml}
 renderOnSubmit="#{axisChartBean.newChart}"
 {code}
 \\
 \\
 ----
  
 h3. {anchor:pie}Pie OutputChart Component
 \\
 There are 2 types of pie charts: 2D and 3D.
  
 !pie2D.png! !pie3D.png!
  
 {code:xml}
 <ice:outputChart id="pie2DOutputChart"
  type="pie2D"
  chartTitle="Pie2D Chart"
  labels="#{pieChart.labels}"
  data="#{pieChart.data}"
  colors="#{pieChart.paints}"
  actionListener="#{pieChart.action}"
  renderOnSubmit="#{pieChart.newChart}" />
 {code}
  
 Pie Charts require a different data model (one dimensional versus the two dimensional model with axis charts) so we have a different bean for the pie charts.
  
 The 2D demo shows a 2D Pie Chart with an actionListener that will show a further breakdown of the pie data. This shows the ability of any chart to pass the selected image map data into the bean for further processing. In this case, we have a separate ice:dataTable component showing a breakdown of the yearly sales selected from the 2D Pie Chart.
  
 The 3D demo shows how you can dynamically manipulate any chart through the UI. The data, label and paint properties can each be bound to Lists in a backing bean. This feature allows developers to easily manipulate chart properties in the backing bean.
 \\
 \\
 ----
  
 h3. {anchor:combining}Combining with the OutputChart Component
 \\
 You can create any type of chart or combine charts using the JCharts API in your bean. You can then pass this custom chart to the outputChart component which will allow the chart to participate in the JSF lifecycle.
  
 !combinedcharts.png!
  
 The proper place for chart manipulation using the JCharts API is in the method binding which is bound to the renderOnSubmit attribute, which tells the component whether to render the chart:
  
 {code:xml}
 <ice:outputChart type="custom" renderOnSubmit="#{combinedChart.newChart}" />
 {code}
  
 {code:title=bean|borderStyle=solid}
 public boolean newChart(OutputChart component){
  try {
  .............
  .............
  org.krysalis.jcharts.axisChart.AxisChart axisChart= new org.krysalis.jcharts.axisChart.AxisChart( ......);
  component.setChart(axisChart);
  return true;
  } catch (Exception e) {
  e.printStackTrace();
  return false;
  }
 }
 {code}
 \\
 \\
 ----
  
 h3. {anchor:downloads}Tutorial Source Code Downloads
 \\
 || Example || Source || Notes ||
 | outputChart-axis |[outputChart-axis source code |^outputChart-axis-tutorial.zip|Download Source Code]| Simple example of how to use the outputChart component. |
 | outputChart-pie2D |[outputChart-pie2D source code |^outputChart-pie2D-tutorial.zip|Download Source Code]| Example of advanced use of ActionListener with the the outputChart component. |
 | outputChart-pie3D |[outputChart-pie3D source code |^outputChart-pie3D-tutorial.zip|Download Source Code]| Example showing the manipulation of chart properties in the backing bean. |
 | outputChart-combined |[outputChart-combined source code |^outputChart-combined-tutorial.zip|Download Source Code]| Example showing the combination of chart types through the use of the JCharts API in the backing bean. |

© Copyright 2017 ICEsoft Technologies Canada Corp.