| Name | Type | Flags | Default | Default Prefix | Description |
|---|---|---|---|---|---|
| clientId | String | NOT Allow Null | prop:componentResources.id | literal | The id used to generate a page-unique client-side identifier for the component. If a component renders multiple times, a suffix will be appended to the to id to ensure uniqueness. |
| dataItems | java.util.List | NOT Allow Null | prop | the list of data item arrays. |
Informal parameters: supported
This example describe how to use the Flotr based Chart component.
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<body>
<h1>Hello Guys and Dolls</h1>
<div t:id="chart1" style="width: 350px; height: 150px;"/>
<br/>
<div t:id="chart2" style="width: 350px; height: 150px;"/>
<br/>
<div t:id="chart3" style="width: 350px; height: 150px;"/>
</body>
</html>
public class MyPage
{
private List<List<XYDataItem>> _testData;
/**
* simple chart
*/
@Component(parameters = {"dataItems=testData"})
private Chart _chart1;
/**
* subclassed bar chart component
*/
@Component
private BarChart _chart2;
/**
* subclassed line chart component
*/
@Component(parameters = {"dataItems=testData"})
private LineChart _chart3;
/**
* generating some data arrays
*/
@Cached
public List getTestData()
{
List<List<XYDataItem>> dataList = CollectionFactory.newList();
List<XYDataItem> list1 = CollectionFactory.newList();
List<XYDataItem> list2 = CollectionFactory.newList();
list1.add(new XYDataItem(0, 0.5));
list1.add(new XYDataItem(1, 0.6));
list1.add(new XYDataItem(2, 1.8));
list1.add(new XYDataItem(3, 0.9));
list1.add(new XYDataItem(4, 2));
list2.add(new XYDataItem(0, 1.5));
list2.add(new XYDataItem(1, 2));
list2.add(new XYDataItem(2, 4.5));
list2.add(new XYDataItem(3, 3.5));
list2.add(new XYDataItem(4, 5.5));
dataList.add(list1);
dataList.add(list2);
return dataList;
}
}
this sample shows you how to subclass your own special bar chart component. how to use the flotr options have a look at Flotr documentation
public class BarChart extends Chart
{
private List<List<XYDataItem>> getTestData()
{
List<List<XYDataItem>> dataList = CollectionFactory.newList();
... fill your data array(s) ...
return dataList;
}
/**
* Invoked to allow subclasses to further configure the parameters passed to this component's javascript
* options. Subclasses may override this method to configure additional features of the Flotr library.
*
* @param config parameters object
*/
protected void configure(JSONObject config)
{
String dataString = "[";
List<List<XYDataItem>> dataItemsList = getTestData();
for (int i = 0; i < dataItemsList.size(); i++)
{
List<XYDataItem> dataItems = dataItemsList.get(i);
dataString += String.format("{data: %s, label: 'data array %d'}", Arrays.toString(dataItems.toArray()), i);
if (i < dataItemsList.size()-1)
dataString += ",";
}
dataString += "]";
config.put("data", new JSONArray(dataString));
JSONObject options = new JSONObject();
options.put("legend", new JSONObject("{position: 'nw'}"));
options.put("bars", new JSONObject("{show: true}"));
config.put("options", options);
}
}
the second sample shows you how to subclass your own special line chart component. how to use the flotr options have a look at Flotr documentation
public class LineChart extends Chart
{
private List<List<XYDataItem>> getTestData()
{
List<List<XYDataItem>> dataList = CollectionFactory.newList();
... fill your data array(s) ...
return dataList;
}
/**
* Invoked to allow subclasses to further configure the parameters passed to this component's javascript
* options. Subclasses may override this method to configure additional features of the Flotr library.
*
* @param config parameters object
*/
protected void configure(JSONObject config)
{
JSONObject options = new JSONObject();
options.put("mouse", new JSONObject("{track: true, color: purple, sensibility: 1, trackDecimals: 1}"));
options.put("points", new JSONObject("{show: true}"));
options.put("lines", new JSONObject("{show: true}"));
config.put("options", options);
}
}