Use MySQL as datasource for FacetChart

[nwk313]

Hi guys, newbie here. Currently I am trying to create a line chart but I just can't use the data in MySQL server to show the chart. I tried to save all records in ListGrid as a record array and set this record array as chart data but the everything has just gone off, help!!

Here's my code:

package com.lis.qualitycontrol.charts;

import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ChartType;
import com.smartgwt.client.types.ListGridEditEvent;
import com.smartgwt.client.widgets.chart.FacetChart;
import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;

public class QCGridWithLJChart extends VLayout {

private ListGrid qcGrid;
private FacetChart ljChart;

public QCGridWithLJChart() {

ListGridField dayField = new ListGridField("day", "Day");
ListGridField setField = new ListGridField("set", "Set");
ListGridField valueField = new ListGridField("value", "Value");

qcGrid = new ListGrid();
qcGrid.setHeight(500);
qcGrid.setCanEdit(true);
qcGrid.setEditEvent(ListGridEditEvent.DOUBLECLICK);
qcGrid.setShowAllRecords(true);
qcGrid.setAutoFetchData(true);
qcGrid.setChartType(ChartType.LINE);

qcGrid.setFields(dayField, setField, valueField);
qcGrid.setDataSource(DataSource.get("leveyjennings"));

Record[] recordArray = null;

for(int i = 0; i < qcGrid.getTotalRows(); i++) {

recordArray[i] = qcGrid.getRecord(i);

}

ljChart = new FacetChart();
ljChart.setData(recordArray);
ljChart.setFacets(new Facet("day", "Day"));
ljChart.setValueProperty("value");
ljChart.setChartType(ChartType.LINE);
ljChart.setShowDataPoints(true);
ljChart.setTitle("Levey-Jennings Chart");

setWidth100();
setHeight(800);
setLayoutAlign(Alignment.CENTER);

addMember(qcGrid);
addMember(ljChart);

}
}