I'm creating a dynamic bar charts using achartengine in my application. Bar charts are used to display weekly work data in hours and they are scrollable horizontally (each bar chart have its own view with width of screen). I've placed bar charts in HorizontallScrollView with infinity scroll and sticking enabled (by swapping views with each other) and when I'm scrolling to either left or right the bar charts shrinks to the side of screen instead of being scrolled out of screen like rest of views. I've found that I should enable setInScroll on renderer of my chart to get rid of this behaviour but sadly this doesn't work (chart shrinks with setInScroll set to true). I'm out of ideas how to fix that. Here's my renderer setup:
private static XYMultipleSeriesRenderer getRenderer(List<Integer> list, int[] weekdays)
{
float maxValue = 0;
for (Integer value : list){
if (value > maxValue){
maxValue = value;
}
}
NumberFormat formatter = new DecimalFormat("#' h'");
formatter.setMaximumFractionDigits(0);
maxValue = maxValue/60;
maxValue = maxValue + (float)(maxValue*0.2);
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
XYSeriesRenderer seriesRenderer = new XYSeriesRenderer();
seriesRenderer.setColor(mContext.getResources().getColor(R.color.ActionBarBlue));
seriesRenderer.setChartValuesFormat(formatter);
seriesRenderer.setFillPoints(true);
seriesRenderer.setLineWidth(2);
seriesRenderer.setDisplayChartValues(true);
seriesRenderer.setChartValuesTextSize(12);
seriesRenderer.setChartValuesTextAlign(Paint.Align.RIGHT);
renderer.addSeriesRenderer(seriesRenderer);
for (int i=0; i < 7; i++){
renderer.addXTextLabel(i+1, mDays[i] + " " + weekdays[i]);
}
renderer.setBackgroundColor(mContext.getResources().getColor((R.color.White)));
renderer.setApplyBackgroundColor(true);
renderer.setPanEnabled(false);
renderer.setInScroll(true);
renderer.setMargins(new int[] {0, 0, 0, 0});
renderer.setAntialiasing(true);
renderer.setMarginsColor(mContext.getResources().getColor(R.color.White));
renderer.setShowLegend(false);
renderer.setXAxisMin(0.5);
renderer.setXAxisMax(7.5);
renderer.setYAxisMin(0);
renderer.setYAxisMax(maxValue);
renderer.setBarSpacing(0.5);
renderer.setShowGrid(true);
renderer.setGridColor(mContext.getResources().getColor(R.color.Gray));
renderer.setXLabelsColor(mContext.getResources().getColor((R.color.Black)));
renderer.setYLabelsColor(0, mContext.getResources().getColor((R.color.White)));
renderer.setLabelsTextSize(12);
renderer.setXLabels(0);
renderer.setYLabels(0);
return renderer;
}
Appears it was some kind of problem with Android Studio and java, not responding to any changes in code i made, rebooting PC worked.
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.
to begin, here is a link to what my application currently looks like:
Of the two charts shown, I want to get rid of the margin on the left for the bar chart. Any ideas?
Below are my renderer settings. I've searched and wasn't able to find people with a similar issue. It seems like it should be simple...
private void drawBarChart(XYMultipleSeriesDataset dataset) {
int marginT = 10;
int marginL = 5;
int marginB = 10;
int marginR = 5;
int[] margins = {marginT, marginL, marginB, marginR};
...
XYMultipleSeriesRenderer renderer = buildBarRenderer(colors);
renderer.setOrientation(Orientation.VERTICAL);
renderer.getSeriesRendererAt(0).setDisplayChartValues(false);
renderer.getSeriesRendererAt(1).setDisplayChartValues(false);
renderer.getSeriesRendererAt(2).setDisplayChartValues(false);
renderer.setLabelsColor(Color.LTGRAY);
renderer.setAxesColor(Color.BLACK);
renderer.setYAxisMin(0);
renderer.setMargins(margins);
renderer.setYAxisMax(maxYVal);
renderer.setYLabels(0);
renderer.setXLabels(0);
renderer.setXAxisMin(0);
renderer.setXAxisMax(2);
renderer.setZoomEnabled(false,false);
renderer.setPanEnabled(false, false);
renderer.setBarSpacing(-0.5);
renderer.setShowAxes(false);
renderer.setShowLabels(false);
renderer.setShowLegend(false);
...
display chart in view
}
protected XYMultipleSeriesRenderer buildBarRenderer(int[] colors) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
int length = colors.length;
for (int i = 0; i < length; i++) {
SimpleSeriesRenderer r = new SimpleSeriesRenderer();
r.setColor(colors[i]);
renderer.addSeriesRenderer(r);
}
return renderer;
}
Any help would be greatly appreciated, thanks!
Sneaky.
I was playing around with the margins because I decided to use my own TextViews as titles since they render much nicer than the titles rendered by AChartEngine. According to the documentation, it states the the margins work as follows:
margins - an array containing the margin size values, in this order: top, left, bottom, right
which is why I set my margins variable as follows:
int[] margins = {marginT, marginL, marginB, marginR};
It turns out that for a horizontal bar chart, marginB controls the left margin and marginT controls the right margin. In other words, all the margins have to be rotated clockwise to work as intended. (i.e. to change the right margin, you change the margin for 'top'; to change the top margin, you change the margin for 'left'; etc.)
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();
I want to draw a bar chart with 2 stacked bars with AChartEngine, like in the SalesBarChart example. My Problem is, the bars with same X value don't have the same width, i.e. the larger bar is wider than the smaller bar, see the image below.
Source code:
renderer = new XYMultipleSeriesRenderer();
// Set chart parameters
renderer.setBarSpacing(0.5);
// Margin background color
renderer.setMarginsColor(Color.rgb(0xF3, 0xF3, 0xF3));
// Disable pan and zoom
renderer.setPanEnabled(false, false);
renderer.setZoomEnabled(false, false);
// Text sizes
renderer.setAxisTitleTextSize(16);
renderer.setChartTitleTextSize(20);
renderer.setLabelsTextSize(16);
renderer.setLegendTextSize(16);
// X axis
renderer.setXLabelsColor(Color.BLACK);
renderer.setXLabelsAlign(Align.RIGHT);
// TODO: adjust axis limits depending on time series
// Y axis
renderer.setYAxisMin(0);
renderer.setYAxisMax(200);
renderer.setYLabels(10);
renderer.setYLabelsColor(0, Color.BLACK);
renderer.setYLabelsAlign(Align.RIGHT);
// Configure renderer for normal and alarm time series
XYSeriesRenderer alarmRenderer = new XYSeriesRenderer();
alarmRenderer.setColor(Color.rgb(0xCC, 0x00, 0x00));
renderer.addSeriesRenderer(alarmRenderer);
XYSeriesRenderer normRenderer = new XYSeriesRenderer();
normRenderer.setColor(Color.rgb(0x99, 0xCC, 0x00));
renderer.addSeriesRenderer(normRenderer);
[...]
dataset = new XYMultipleSeriesDataset();
renderer.setChartTitle(items[which]);
// Dummy Data TODO: replace with real data
Random r = new Random();
int limit = 100;
normValues = new TimeSeries("Normal");
alarmValues = new TimeSeries("Alarm");
dataset.addSeries(alarmValues);
dataset.addSeries(normValues);
for (int i = 0; i < 100; i++) {
Date date = new Date(i*1000);
int value = 70+r.nextInt(60);
if (value <= limit) {
normValues.add(date, value);
} else {
normValues.add(date, 100);
alarmValues.add(date, value);
}
}
if (!init) {
trend.removeView(chart);
}
chart = ChartFactory.getBarChartView(getActivity(), dataset, renderer, Type.STACKED);
chart.setBackgroundColor(Color.TRANSPARENT);
chart.setLayoutParams(params);
chart.setPadding(6, 20, 6, 0);
trend.addView(chart, 0);
How can I achieve that both bars have the same width??
This happens when the 2 series have a different number of items. Please make sure that the series have the same length.
I am using aChart Engine, Zoom in and out functionality in it moves the chart away from the screen.I want to keep the Chart fit to screen. Is there any way to keep the chart visible on screen i.e. always fit it to visible portion ??
I am using this method :
private XYMultipleSeriesRenderer getLineRenderer(int[] lineColor, PointStyle[] styles) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setAxesColor(Color.BLUE);
renderer.setAxisTitleTextSize(16);
renderer.setChartTitle("Time");
renderer.setChartTitleTextSize(15);
renderer.setFitLegend(true);
renderer.setPanEnabled(true, true);
renderer.setYLabels(6);
renderer.setMargins(new int[] { 20, 30, 15, 0 });
renderer.setZoomButtonsVisible(true);
renderer.setBarSpacing(10);
renderer.setShowGrid(true);
renderer.setYAxisMin(Common.min - 1);
renderer.setYAxisMax(Common.max + 1);
XYSeriesRenderer rendererSeries = new XYSeriesRenderer();
rendererSeries.setColor(Color.RED);
renderer.addSeriesRenderer(rendererSeries);
rendererSeries.setFillPoints(true);
rendererSeries.setLineWidth(3);
return renderer;
}
You can use two things,
Either desable the Zoom functionality
renderer.setZoomEnabled(false, false);
or, Set Limits of for the Zoom
renderer.setZoomLimits(arg0); // arg0 = new double[]{-20,20,-20,20}; anything you want
I find out the solution to my query
renderer.setPanEnabled(false);
renderer.setPanEnabled(false, false);
It works fine
You can do either:
renderer.setPanEnabled(false);
or
renderer.setPanLimits(limits);