PDA

View Full Version : Problem in Line Chart in GXT



dhruv88esh
17 Mar 2011, 3:30 AM
Hello geeks,

I'm making a LineGraph in which i'm showing the graph of messages according to the date, But i want to show the graph such that graph must not change and labels must be according to months. i.e. the graph must show the the messages count for particular date according a month.
That means Label must be as months but graph must be according to the date...How can i show that ?

And i want to show the tooltip as:- [ Messages: Date, MsgCount ]
How can i do this also.

My code is just like that..

import java.util.ArrayList;
import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.event.ChartEvent;
import com.extjs.gxt.charts.client.event.ChartListener;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.axis.XAxis;
import com.extjs.gxt.charts.client.model.axis.YAxis;
import com.extjs.gxt.charts.client.model.charts.LineChart;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.MarginData;
import com.google.gwt.user.client.Element;

public class MessagesLineChart {

/**
* Listener for the clicking on the chart
*/
private ChartListener listener = new ChartListener() {
public void chartClick(ChartEvent ce) {
Info.display("IMB Messages : ", "{0}", ""+ce.getValue());
}
};

/**
* Override method which will render the chart
*/
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

ContentPanel contentPanel = new ContentPanel();
contentPanel.setHeading("Timeline Chart");
contentPanel.setFrame(true);
contentPanel.setSize(600, 400);
contentPanel.setBodyBorder(true);
contentPanel.setLayout(new FitLayout());

final Chart chart = new Chart(
"resources/chart/open-flash-chart.swf");

chart.setBorders(true);
chart.setChartModel(getTimeLineChartData());
contentPanel.add(chart);
add(contentPanel, new MarginData(10));
}

/**
* Method to get the timeLineChart with data
* @return
*/
private ChartModel getTimeLineChartData() {
ChartModel chartModel = new ChartModel(
"IMB Messages TimeLine Chart",
"font-size: 14px; font-family: Verdana; text-align: center;");
chartModel.setBackgroundColour("#FAF8CC");

XAxis xAxis = new XAxis();
YAxis yAxis = new YAxis();

ArrayList<String> chartDate = new ArrayList<String>(); //List having messages Dates taken from database
ArrayList<Number> chartMsgCount = new ArrayList<Number>(); //List Having messages count per date taken from database

xAxis.setLabels("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
chartModel.setXAxis(xAxis);

yAxis.setMax(200);
yAxis.setSteps(10);
chartModel.setYAxis(yAxis );

LineChart lineChart = new LineChart();

lineChart.addValues(chartMsgCount);

lineChart.setTooltip("#label# #val#");
lineChart.addChartListener(listener);

chartModel.addChartConfig(lineChart);
return chartModel;
}
}