am trying to draw a line chart with achartengine in an Android App. The graph auto-refreshes every few seconds. The problem is : the axes become invisible if there is no data to plot. How do I make the axes appear even if there is nothing to plot?
Kindly help.
private XYMultipleSeriesDataset graphDataset = null;
private XYMultipleSeriesRenderer graphRenderer = null;
private GraphicalView graphView;
.....
.....
this.graphDataset = new XYMultipleSeriesDataset();
this.graphRenderer = new XYMultipleSeriesRenderer();
this.graphRenderer.setXLabels(0);
...
/// other initialization code, like labels & fonts
...
// then i add the data to the series
XYSeries series = new XYSeries("Simple graph");
for (int i=0; i<valueArray.size();i++) {
series.add(valueArray.get(i), yValue.get(i));
}
this.graphDataset.addSeries(series);
....
// then I do renderer initialization
XYSeriesRenderer xyRenderer = this.setChartLineProperties(index);
...
// then finally initializing the graphview
this.graphView = ChartFactory.getLineChartView(this, this.graphDataset,
this.graphRenderer);
In order for the axes to be displayed, the chart needs to know what values range it has to display. If there is no value added to the dataset, the range can be set this way:
renderer.setXAxisMin(minX);
renderer.setXAxisMax(maxX);
renderer.setYAxisMin(minY);
renderer.setYAxisMax(maxY);
Related
I am using achartengine to display charts in an Android app.
The app allows the user to display different datasets and different charts types depending on the selections they make from spinners.
My problem is this. The original chart displays correctly and all zoom, pan, and onClick events preform as expected. But when I remove the first chart and add another, the charts will not zoom or pan from touch and onClick will not return selected point data. The achartengine zoom and reset buttons still display and work as expected. To remove a chart and add another I have used different variations of the following code with the same results.
private void repaint() {
mchart1_LL_pie = (LinearLayout) this.findViewById(R.id.chart1_LL_pie);
if (mChart1_ChartView_pie != null) {
mchart1_LL_pie.removeView(mChart1_ChartView_pie);
}
mChart1_ChartView_pie = ChartFactory.getPieChartView(getApplicationContext(), mChart1_Pie_Series, mChart1_Pie_Renderer);
mchart1_LL_pie.addView(mChart1_ChartView_pie, 0, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
}
I have also tried to remove all the renderers and clear the data series with the following code.
mChart1_Pie_Renderer.removeAllRenderers();
int size = mChart1_Pie_Series.getItemCount();
for (int i = 0; i < size; i++) {
mChart1_Pie_Series.remove(0);
And then display the chart with a rebuilt dataset and renderer using the following.
mChart1_ChartView_pie = ChartFactory.getPieChartView(getApplicationContext(), mChart1_Pie_Series, mChart1_Pie_Renderer);
The problem with this approach is that the next chart is not displayed until the display is touched. After the display is touched, the correct chart is displayed and all zoom, pan and onClick events work properly.
Has anyone experienced this problem? If so, how did you solve it?
Any help or suggestions would be greatly appreciated. Thank you
Don
I am doing an application with charts. I have an evolution chart with TimeSeries. I paste my function to draw the chart. It can help you :)
public void drawChart() {
mChartView = null;
mDataset = null;
mRenderer = null;
mDataset = new XYMultipleSeriesDataset();
mRenderer = new XYMultipleSeriesRenderer();
mRenderer.setAxisTitleTextSize(15);
mRenderer.setLabelsTextSize(15);
mRenderer.setLegendTextSize(15);
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(Color.BLUE);
r.setFillPoints(true);
mRenderer.addSeriesRenderer(r);
mRenderer.setZoomEnabled(true);
mRenderer.setShowGrid(true);
mRenderer.setApplyBackgroundColor(true);
mRenderer.setAxesColor(Color.BLACK);
mRenderer.setShowLegend(true);
mRenderer.setShowLabels(true);
mRenderer.setLabelsColor(Color.BLACK);
mRenderer.setBackgroundColor(Color.TRANSPARENT);
mRenderer.setYLabelsPadding(20);
mRenderer.setXLabelsPadding(7);
mRenderer.setYLabelsAlign(Align.LEFT);
mRenderer.setMarginsColor(Color.rgb(220, 220, 220));
mRenderer.setAxesColor(Color.BLACK);
mRenderer.setLabelsColor(Color.BLACK);
mRenderer.setXLabelsColor(Color.BLACK);
mRenderer.setYLabelsColor(0, Color.BLACK);
// mRenderer.setAxisTitleTextSize(30);
mRenderer.setGridColor(Color.BLACK);
mRenderer.setXRoundedLabels(false);
// mRenderer.setLabelsTextSize(25);
mRenderer.setYTitle(Config.getResource("PRICE") + "("
+ dto.getCurrencyCode() + ")");
mRenderer.setMargins(new int[] { 0, 60, 50, 0 });
mRenderer.setMarginsColor(Color.WHITE);
// mRenderer.setXTitle("Date");
mRenderer.setShowLegend(false);
mRenderer.setInScroll(true);
evolutionSecurity = new TimeSeries("");
mDataset.addSeries(evolutionSecurity);
fillDataEvolution(); //Get data into serie
mChartView = ChartFactory.getTimeChartView(this, mDataset, mRenderer,
"dd-MM-yy");
LinearLayout layout = (LinearLayout) findViewById(R.id.graphe_evolution_rate_currency);
layout.addView(mChartView);
if (layout != null)
layout.removeAllViews();
layout.addView(mChartView);
mChartView.repaint();
mChartView = null;
}
Then when i select an another value in my spinner i call this method and the chart is redrawn correctly.
I am currently working on an android application where I need to display linegraph. I choose achartengine and make XYMultipleSeriesRenderer with timeseries. I am using following code.
private void openChart(){
int count = 5;
Date[] dt = new Date[5];
for(int i=0;i<count;i++){
GregorianCalendar gc = new GregorianCalendar(2012, 10, i+1);
dt[i] = gc.getTime();
}
int[] visits = { 40,40,40,40,40};
int[] views = {55, 51, 44, 41, 39};
// Creating TimeSeries for Visits
TimeSeries visitsSeries = new TimeSeries("Theshold");
// Creating TimeSeries for Views
TimeSeries viewsSeries = new TimeSeries("Readings");
// Adding data to Visits and Views Series
for(int i=0;i<dt.length;i++){
visitsSeries.add(dt[i], visits[i]);
viewsSeries.add(dt[i],views[i]);
}
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Visits Series to the dataset
dataset.addSeries(visitsSeries);
// Adding Visits Series to dataset
dataset.addSeries(viewsSeries);
// Creating XYSeriesRenderer to customize visitsSeries
XYSeriesRenderer thresholdRenderer = new XYSeriesRenderer();
thresholdRenderer.setColor(Color.GREEN);
thresholdRenderer.setPointStyle(PointStyle.CIRCLE);
thresholdRenderer.setFillPoints(true);
thresholdRenderer.setLineWidth(2);
thresholdRenderer.setDisplayChartValues(true);
// Creating XYSeriesRenderer to customize viewsSeries
XYSeriesRenderer readingRenderer = new XYSeriesRenderer();
readingRenderer.setColor(Color.BLUE);
readingRenderer.setPointStyle(PointStyle.CIRCLE);
readingRenderer.setFillPoints(true);
readingRenderer.setLineWidth(2);
readingRenderer.setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setLabelsTextSize(20);
multiRenderer.setXLabelsPadding(5);
multiRenderer.setYAxisMax(90);
multiRenderer.setYAxisMin(-20);
multiRenderer.setXTitle("Time Stamps");
multiRenderer.setYTitle("Temperature");
multiRenderer.setZoomButtonsVisible(true);
// Adding visitsRenderer and viewsRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(thresholdRenderer);
multiRenderer.addSeriesRenderer(readingRenderer);
// Getting a reference to LinearLayout of the MainActivity Layout
LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
// Creating a Time Chart
mChart = (GraphicalView) ChartFactory.getTimeChartView(getBaseContext(), dataset, multiRenderer,"dd-MMM-yyyy");
multiRenderer.setClickEnabled(true);
multiRenderer.setSelectableBuffer(10);
// Setting a click event listener for the graph
mChart.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Format formatter = new SimpleDateFormat("dd-MMM-yyyy");
SeriesSelection seriesSelection = mChart.getCurrentSeriesAndPoint();
if (seriesSelection != null) {
int seriesIndex = seriesSelection.getSeriesIndex();
String selectedSeries="Visits";
if(seriesIndex==0)
selectedSeries = "Visits";
else
selectedSeries = "Views";
// Getting the clicked Date ( x value )
long clickedDateSeconds = (long) seriesSelection.getXValue();
Date clickedDate = new Date(clickedDateSeconds);
String strDate = formatter.format(clickedDate);
// Getting the y value
int amount = (int) seriesSelection.getValue();
// Displaying Toast Message
Toast.makeText(
getBaseContext(),
selectedSeries + " on " + strDate + " : " + amount ,
Toast.LENGTH_SHORT).show();
}
}
});
// Adding the Line Chart to the LinearLayout
chartContainer.addView(mChart);
}
Using the above code I am able to generated following view
I am now stuck on the customizing the view. How can I remove the black background around the chart. And how can I increase the text size of legends and the xlabel and ylabel as well.
Using the setLabelsTextSize will only increase the size of the data in x and y axis (e.g. the date and the temperature value).
Thanks
Updated image:
To change the legend text size use multiRenderer.setLegendTextSize(). To change the outline background color use multiRenderer.setMarginsColor().
As a general note, customizations that involve the entire graph are probably going to be found as part of your XYMultipleSeriesRenderer. I recommend playing with the different settings and finding what each does.
ADDITIONAL
To increase the axes title size use multiRenderer.setAxesTitleSize(). As for the axes label colors use multiRenderer.setXLabelsColor() and multiRenderer.setYLabelsColor(). The axis color can be changed with multiRenderer.setAxesColor().
Again, I encourage you to play with the settings of the renderer. In your IDE, type multiRenderer. and all available methods will be shown. Scroll through those and you can probably find what you are looking. Most of the methods have clear descriptive names.
Change the color and font size use these code
XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
incomeRenderer.setColor(Color.rgb(130, 130, 230));
incomeRenderer.setChartValuesTextSize(15);
incomeRenderer.setDisplayChartValues(true);
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("Question vs Time Chart");
multiRenderer.setInScroll(true);
multiRenderer.setXTitle("Questions");
multiRenderer.setLabelsColor(Color.BLACK);
multiRenderer.setAxesColor(Color.BLACK);
multiRenderer.setXLabelsColor(Color.RED);
multiRenderer.setYLabelsColor(0, Color.RED);
multiRenderer.setLabelsTextSize(15);
multiRenderer.setYLabelsPadding(10);
multiRenderer.setZoomEnabled(false, false);
double[] set_pan=new double[]{-1.0,Double.MAX_VALUE,0.0,Double.MAX_VALUE+2};
multiRenderer.setPanLimits(set_pan);
multiRenderer.setPanEnabled(true, false);
multiRenderer.setLegendTextSize(15);
multiRenderer.setAxisTitleTextSize(18);
multiRenderer.setChartTitleTextSize(25);
multiRenderer.setTextTypeface("Arial", Typeface.BOLD);
multiRenderer.setMarginsColor(Color.WHITE);
I am trying to develop an app that will display a graph.On the y-axis there will be data and on the x-axis months(e.g jan,feb,march,april ...).As far as i know am trying to use annotations to add the months but am having errors.I cant seem to find a good enough example on how to use annotations.Please help.Heres is my code.
public class LineGraph {
public Intent getIntent(Context context){
int x[]={1,2,3,4,5,6};
int y[]={1,4,9,16,25,36};
String xaxis[]={"jan","feb","march","april","june","july","august"};
TimeSeries series=new TimeSeries("line1");
for(int i=0;i<x.length;i++){
series.add(x[i],y[i]);
series.addAnnotation(xaxis[i], x[i], y[i]);
}
XYMultipleSeriesDataset dataset=new XYMultipleSeriesDataset();
dataset.addSeries(series);
XYSeriesRenderer renderer=new XYSeriesRenderer();
renderer.setColor(Color.BLUE);
renderer.setPointStyle(PointStyle.SQUARE);
renderer.setFillPoints(true);
XYMultipleSeriesRenderer mRenderer=new XYMultipleSeriesRenderer();
mRenderer.addSeriesRenderer(renderer);
mRenderer.setChartTitle("haha");
Intent intent = ChartFactory.getLineChartIntent(context,dataset,mRenderer,"Line graph title");
return intent;
}
}
I am trying to display text lables for the x-axis instead of integer values.A better aproach is also welcome.
Annotations are a good choice for displaying random text wherever you need on the graph. In order to display custom labels, you will have to add custom labels:
renderer.addXTextLabel(x, text);
You will also need to disable the default numerical labels:
renderer.setXLabels(0);
I am using achartengine, to plot a line graph. I am trying to customize it to have Y axis lines which pass through the values, and show the values on top. Does any one have any idea, how can I achieve an effect like this one :
Here is what I currently have :
And here is the code Snippet :
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(series);
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setFillPoints(true);
renderer.setColor(Color.WHITE);
renderer.setLineWidth(2f);
XYMultipleSeriesRenderer seriesRenderer = new XYMultipleSeriesRenderer();
seriesRenderer.addSeriesRenderer(renderer);
seriesRenderer.setLabelsTextSize(20); // Text size
seriesRenderer.setShowAxes(true); // show both axes
seriesRenderer.setShowLegend(false);
seriesRenderer.setShowGridX(true); // X grid helps identify values
seriesRenderer.setShowLabels(true); // See the values
seriesRenderer.setYLabelsAlign(Align.RIGHT);
seriesRenderer.setZoomButtonsVisible(false); // bye bye zoom
seriesRenderer.setXAxisMin(0);
seriesRenderer.setXAxisMax(10);
seriesRenderer.setTextTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/Lifestyle Rounded M54.ttf"));
seriesRenderer.setPointSize(10f);
seriesRenderer.setPanEnabled(true, false);
View view = ChartFactory.getLineChartView(context, dataset, seriesRenderer);
return view;
Any input will be highly appreciated.
You can add annotation that can be displayed wherever you need on the graph:
series.addAnnotation(text, x, y);
First i give my View show below. and give some explanation:
In my ViewGroup i have two GraphicalView, each of them share the same size space. Let's just call the chart above chartA and below one chartB.
Then i have some questions:
If i make a move a movement on chartA ,how could i make the chartB move just as my finger moving on chartB?
If i pinch on chartA can also chartB change auto?
I want to add some callback function to some points? Does ACE supports this?
I do not want to show numbers negative while user pinching.How can I make this point?
Last is my chart code:
mDataset.addSeries(series);
PointStyle style = PointStyle.CIRCLE;
renderer = buildRenderer(lineColor, style, true);
setChartSettings(renderer, "X", "Y", 0, 50, yMin, yMax, Color.WHITE,
Color.WHITE, title,chartColor);
GraphicalView chart = ChartFactory.getLineChartView(context, mDataset, renderer);
layout.addView(chart, new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
HashMap map = new HashMap();
and the renderer:
protected XYMultipleSeriesRenderer buildRenderer(int color,
PointStyle style,
boolean fill) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(color);
r.setPointStyle(style);
r.setFillPoints(fill);
r.setLineWidth(3);
renderer.addSeriesRenderer(r);
return renderer;
}
I random all the data i want.
You have to register a PanListener on your chartA and on every panApplied event, just do: rendererB.setXAxisMin(rendererA.getXAxisMin()); and the same for max X and for the Y axis and then call chartB.repaint();
Same as the above, just that you need to add a ZoomListener.
You can set a click listener: chartA.setOnClickListener();
Please reformulate into a separate question.
Also, see this code showing you how to use the above APIs.