content top

DoXPath(input,”/chart/data/*”)

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



Leave a Reply

You must be logged in to post a comment.