i’ve finally had the chance to put together a small demo of xpath4js in action. In short…1) chart defined in xml; 2) xml loaded & chart data selected via xpath; and 3) the chart is rendered:
Everyone likes to see the best part first…so here the final product live (interactive gwt visualization fed xml values via xpath4js)
And the behind the scenes…
XML Chart definition
<chart type="3D" family="pieChart">
<def>
<background width="400" height="160" style="fill:#fff"/>
<title>This is the title of my chart</title>
<legend show="true"/>
</def>
<data>
<item>
<label>A</label>
<desc>Item A</desc>
<value>20</value>
</item>
<item>
<label>B</label>
<desc>Item B</desc>
<value>13</value>
</item>
<item>
<label>C</label>
<desc>Item C</desc>
<value>3</value>
</item>
<item>
<label>D</label>
<desc>Item D</desc>
<value>7</value>
</item>
</data>
</chart>
using xpath to select chart data
import org.xml.xpath4js.client.*;
import com.google.gwt.visualization.client.visualizations.PieChart;
.
.
//parse xml into xpath input sequence
XPathSequence input = new XPathSequence();
input.AppendItem(new XPathInput(_chartxml).XPathDoc);
// Create a pie chart visualization.
PieChart pie = new PieChart(createTable(input), setupChart(input));
.
.
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Task");
data.addColumn(ColumnType.NUMBER, "Some Value");
XPathSequence dataitems = EvalEngine.DoXPath(input,"/chart/data/*");
XPathSequence labels = EvalEngine.DoXPath(dataitems,"/item/label/text()");
XPathSequence values = EvalEngine.DoXPath(dataitems,"/item/value/text()");
data.addRows(dataitems.GetSize());
for(int i=0; i<dataitems.GetSize();i++){
data.setValue(i, 0, labels.GetItemAt(i).GetStringValue());
data.setValue(i,1,values.GetItemAt(i).GetStringValue());
}
Ref:
Happy coding :)
Pete