Looking for a basic "AndroidPlot" bar graph example.
A few people have contacted the developer via the site forum but he mentions he is still working on that tutorial.
However, he does link to a more in depth example to look at for now.
The problem is I can't figure out which parts render the bar graph vs. the other functionality, as I am obviously not familiar with the more complex parts of the library.
Can any one please help me with a basic structure of code for a bar graph, using AndroidPlot please?
Thank you.
I got it working like this with AChartEngine (setup, I use one renderer, with one dataset, it is an active changeing graph):
LinearLayout layout = (LinearLayout)findViewById(R.id.chart);
// setup dataset and renderer
dataset = new XYMultipleSeriesDataset();
renderer = new XYMultipleSeriesRenderer();
// configure renderer
renderer.setZoomEnabled(false, false);
renderer.setPanEnabled(false, false);
renderer.setYAxisMax(90);
renderer.setYAxisMin(0);
renderer.setXAxisMin(-1);
renderer.setBarSpacing(0.5);
renderer.setShowLegend(false);
renderer.setXLabels(0); // hides the default labels
renderer.setLabelsTextSize(15);
// create chart
mChartView = ChartFactory.getBarChartView(this, dataset, renderer, BarChart.Type.DEFAULT);
layout.addView(mChartView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
// add some data, so the chart shows
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(Color.rgb(192, 192, 192));
renderer.addSeriesRenderer(r);
XYSeries c = new XYSeries("");
c.add(0,0);
dataset.addSeries(c);
Then later, render it again to liven it up (note I ripped some parts from my own code, it might not be complete):
// remove any bars that already exist
if (theAct.dataset.getSeriesCount() > 0) {
theAct.dataset.removeSeries(0);
}
XYSeries c = new XYSeries("");
// for some reason, the bar is very narrow, when only one bar is shown,
// when we use a negative spacing, the bar will be bigger
// i is the number of bars
if (i == 1) {
theAct.renderer.setBarSpacing(-0.8);
} else {
theAct.renderer.setBarSpacing(0.5);
}
// finish up and render!
theAct.renderer.setXAxisMax(i);
theAct.dataset.addSeries(c);
theAct.mChartView.zoomReset();
theAct.mChartView.repaint();
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'm creating a line chart with multiple series using aChartEngine library.
I have modified the code in XYChartBuilder.java to create a sample and test if i can fill the area under each series with a specific color. I have an issue when trying to fill with a different color the area below each series. At the areas where the series overlap, the lines of the underlying series are not shown.
Following is the code i have used to add the series and data on the graph
public void addSeries(int id) {
String seriesTitle = "Series " + (mDataset.getSeriesCount() + 1);
// create a new series of data
XYSeries series = new XYSeries(seriesTitle);
mDataset.addSeries(series);
mCurrentSeries = series;
// create a new renderer for the new series
XYSeriesRenderer renderer = new XYSeriesRenderer();
mRenderer.addSeriesRenderer(renderer);
// set some renderer properties
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setFillPoints(true);
renderer.setDisplayChartValues(true);
renderer.setDisplayChartValuesDistance(10);
renderer.setLineWidth(2);
if (id == 1) {
FillOutsideLine fill = new FillOutsideLine(FillOutsideLine.Type.BELOW);
fill.setColor(Color.BLUE);
renderer.addFillOutsideLine(fill);
renderer.setColor(Color.BLUE);
renderer.setPointStyle(PointStyle.SQUARE);
}
if (id == 2) {
FillOutsideLine fill = new FillOutsideLine(FillOutsideLine.Type.BELOW);
fill.setColor(Color.WHITE);
renderer.addFillOutsideLine(fill);
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setColor(Color.GREEN);
}
if (id == 3) {
FillOutsideLine fill = new FillOutsideLine(FillOutsideLine.Type.BELOW);
fill.setColor(Color.YELLOW);
renderer.addFillOutsideLine(fill);
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setColor(Color.YELLOW);
}
mCurrentRenderer = renderer;
mChartView.repaint();
}
public void addData(double x, double y) {
// add a new data point to the current series
mCurrentSeries.add(x, y);
// repaint the chart such as the newly added point to be visible
mChartView.repaint();
}
When I need to create the series i call
addSeries(1);
addData(0, 0);
addData(2, 3);
addData(4, 0);
addSeries(2);
addData(2, 0);
addData(6, 3);
addData(8, 0);
addSeries(3);
addData(6, 0);
addData(9, 3);
addData(11, 0);
In the case where I specify in the addSeries function the FillOutsideLine object but do not set the color I get the expected behavior I want. However,the areas under each series are drawn with the same color (blue - it seems to be the default).
Unfortunately I'm new and my reputation is still low, thus I cannot upload any images.
Any help is much appreciated.
Thanks,
Lupe.
I found the solution to my problem so I'm listing it in case someone else is having the same issue. The problem occurred as I used a solid color to paint the area under the series. I tested it with a semi-transparent color and the problem is now solved.
Example:
fill.setColor(Color.parseColor("#5500FF66"));
L.
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.
I am trying to create Bar Chart using AchartEngine but various things doesn't work for me..
1) Unable to show Grid.
2) Unable to remove category series title i.e "Bar Graph".
3) It's not showing bars as it should show.
4) By Default white color background is visible.
is it possible to provide space between each bars??
Bar Chart Code
CategorySeries series = new CategorySeries("Bar Graph");
for (int i = 0; i < availCatList.size(); i++)
series.add(availCatList.get(i), mTotal.get(i));
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(series.toXYSeries());
XYSeriesRenderer seriesRenderer = new XYSeriesRenderer();
seriesRenderer.setChartValuesSpacing(0.5f);
seriesRenderer.setDisplayChartValues(true);
seriesRenderer.setColor(Color.GREEN);
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.setChartTitle("Bar Chart");
mRenderer.setShowGrid(true);
mRenderer.setAxisTitleTextSize(15);
mRenderer.setXLabelsAlign(Align.CENTER);
mRenderer.setXTitle("Categories");
mRenderer.setYTitle("Amount");
mRenderer.setScale(1.0f);
for (int i = 0; i < availCatList.size(); i++) {
mRenderer.addXTextLabel(i + 1, availCatList.get(i));
}
mRenderer.setXLabels(0);
mRenderer.addSeriesRenderer(seriesRenderer);
view = ChartFactory.getBarChartView(this, dataset, mRenderer,
Type.DEFAULT);
// layout.removeAllViews();
layout.addView(view);
Any Help would be highly appreciated..
Thanks
mRenderer.setShowGrid(true) works fine in all the examples in the demo code. Try to set another color using mRenderer.setGridColor(color);
You mean the legend: mRenderer.setShowLegend(false);
series.add(mTotal.get(i)); is the correct usage for bar charts.
That's probably from the profile. Just set your own background color.
Space between bars: read the APIs for mRenderer.setBarSpacing();