qxCHART

qxCHART is a Qooxdoo wrapper for Plotly

1. Add the qxCHART contrib to your project

• Download qxCHART
• Unzip it in your project (e.g. within the top-level directory your_app/contribs)
• Add the following in your config.json file (some parts may already exist and you have to insert only the right lines)

"include": [
  {
    "path" : "${QXCHART}/qxchart.json"
  }
],
"let": {
  "QXCHART" : "contribs/qxchart"
},
"jobs" : {
  "libraries" : {
    "library" : [{
      "manifest": "${QXCHART}/Manifest.json"
      }
    ]
  }
}

• Add @asset(ae/chart/plotly/*) at the top of your application's class

More infos at http://manual.qooxdoo.org/devel/pages/development/contrib.html

2. Start using qxCHART

Create a chart's model :

//Create chart's model
var chartModel = new ae.chart.model.Chart();
  
//Layout
var chartLayout = new ae.chart.model.layout.Layout().set({
	  title:"My chart"
});
chartModel.setLayout(chartLayout);

//First trace
var scatter = new ae.chart.model.trace.Scatter();
scatter.setX([1, 2, 3, 4]);
scatter.setY([10, 15, 13, 17]);
scatter.setMode("markers");

//Add trace to chart's model
chartModel.addTrace(scatter);

Create a chart widget and pass the model as argument :

var chartWidget = new ae.chart.ui.Chart(chartModel);

3. Examples

Charts :

• Scatter chart
• Line chart
• Bar chart
• Pie chart
• Area chart
• Bubble chart

Others :

• Customized legend
• Data binding
• Scatter chart with data labels
• Multiple axes
• Annotations
• Shapes

4. Documentation

The full API documentation is hosted at https://rawgit.com/adeliz/qxchart/master/api/index.html#ae