I think the title gives most of my questions, but let's talk a little bit in detail:
I have an Android app designed primarily for tablets that will display several different real-time data in TimeCharts. Therefore, I already have a service for communication with a data source that captures data, analyzes it, and adds values to TimeSeries singletones. When the user moves inside and out of fragments, the fragment simply adds the correct TimeSeries and continues to call mChartView.repaint(); every 500 ms
Everything that works and works well through tabs, rotation, notification, etc.
Since this is a tablet application, I want to achieve two things: 1) increase the viewing area; 2) do it well.
1) I already deleted the zoom buttons (for some reason, if I try to add them, it gives me a NullException) using mRenderer.setZoomButtonsVisible(false); but there is still a huge lower margin taking up a lot of screen space. I tried to set a negative border, and it works, but the labels do not move with that border, and I end up with the X axis crossing the labels or even passing them. How can I move labels using the border, or perhaps place them at the top of the chart?
2) a) the application is configured by the user to use Holo_Dark or Holo_light. Therefore, I use a transparent background on the renderer (see snippet below) to show that there is a nice background shading that makes it bare. How to change the color of the axis text? I found mRenderer.setAxesColor(color) , but only changes the text, not the text.
int color = Color.argb(0, 255, 255, 255);
b) the Y axis crosses over its labels, how can I move them to the left so that the text is read? (this is not with setMargins() )
c) when the user zooms in and moves around the chart, the chart stops updating / re-scaling the latest values on the screen, and the user must continue panning to see the latest values. I added a "Reset Zoom" button on the ActionBar, but I can't get it to work. What will be the code to re-update the values.
d) if my TimeSeires has a range of 10 minutes (2 values per second), how can I make it show only the last 1min (for example), and if the user wants to get the previous values, can he go back? (and use button on c) restart)
while my rendering is configured as:
int color = Color.argb(0, 255, 255, 255); // Transparent colour mRenderer.setBackgroundColor(color); mRenderer.setMarginsColor(color); mRenderer.setAxisTitleTextSize(16); // 16 mRenderer.setChartTitleTextSize(20); // 20 mRenderer.setLabelsTextSize(15); // 15 mRenderer.setLegendTextSize(15); // 15 mRenderer.setPointSize(0); // 10 mRenderer.setMargins(new int[] { 20, 30, 15, 0 }); mRenderer.setZoomButtonsVisible(false); mRenderer.setShowAxes(true); mRenderer.setShowLegend(true); mRenderer.setShowGridX(true); mRenderer.setShowLabels(true);
and each render added to the Multiple renderer looks like this:
renderer.setDisplayChartValues(false); mRenderer.addSeriesRenderer(renderer);
thanks for the help!
Editing to include my latest code for others:
I ended up completely dropping the legend and applying my own legend floating above the chart, so the layout is FrameLayout with ChartView and TableLayout.
I implemented the abstract CurvesFragment class, which is extended by several classes.
I set up the chart during my OnCreateView snippet as:
mChartView = ChartFactory.getTimeChartView(getActivity().getApplicationContext(), mDataset, mRenderer, "HH:mm:ss"); // X axis in a time scale // Setup chart renderer ============================= mRenderer.setLabelsTextSize(15); // Text size mRenderer.setMargins(new int[] { 0, Utils.convertToPx(5, getActivity().getApplicationContext()), 0, 0 }); // 5dp on the left to show that little line mRenderer.setZoomButtonsVisible(false); // bye bye zoom mRenderer.setShowAxes(true); // show both axes mRenderer.setShowLegend(false); // bye bye legend mRenderer.setShowGridX(true); // X grid helps identify values mRenderer.setShowLabels(true); // See the values mRenderer.setYLabelsAlign(Align.LEFT); // put the Y labels on the left of the axis if (Utils.getCurrentTheme(getActivity().getApplicationContext()) == android.R.style.Theme_Holo) { mRenderer.setXLabelsColor(getResources().getColor(android.R.color.primary_text_dark)); mRenderer.setYLabelsColor(0, getResources().getColor(android.R.color.primary_text_dark)); mRenderer.setMarginsColor(getResources().getColor(android.R.color.background_dark)); legend.setBackgroundResource(R.drawable.border_dark); } else { // same as above but for Holo_light } // And from here proceed to add the TimeCharts with using renderer.setDisplayChartValues(false);
In my action bar, I have enabled buttons for Pause / Resume and ResetZoom. Reset Scale is simple:
mRenderer.setXAxisMax(-Double.MAX_VALUE); mRenderer.setXAxisMin(Double.MAX_VALUE); mRenderer.setYAxisMax(-Double.MAX_VALUE); mRenderer.setYAxisMin(Double.MAX_VALUE); mChartView.repaint();
There is a background service that contains links to TimeSeries, which always read the latest data from Wi-Fi and add it to the series. So the snippet has runnable running every 700 ms, which calls repaint () like:
// Chart rendering control ======================== private Runnable updateDataSet = new Runnable() { public void run() { if (!chartPaused) { double max = mRenderer.getXAxisMax(); // get renderer maximum value double min = mRenderer.getXAxisMin(); // get renderer minimum value // Check if the user scrolled/zoomed/panned the graph or if it on 'auto' if (!((max == Double.MAX_VALUE || max == -Double.MAX_VALUE) && (min == Double.MAX_VALUE || min == -Double.MAX_VALUE))) { double newMax = mDataset.getSeriesAt(0).getMaxX(); // new max is the latest value from our series double newMin = newMax - Math.abs(max - min); // new min value is the X range the user zoomed into mRenderer.setXAxisMax(newMax); // set the new values mRenderer.setXAxisMin(newMin); } // Logic that updates the TableLayout with the legend is placed here mChartView.repaint(); } getView().postDelayed(updateDataSet, 700); } };
and there is ZoomListener and PanListener, which pauses the schedule every time the user touches it. Thus, the user can zoom and pan, but whenever he resumes updating the chart, he will scroll forward to the earliest data without changing the zoom level.
I think the end result is pretty solid and looks good on both Holo_Light and Holo_Dark.
Thanks for the LOT answers for the answers and for all the other developers who created the engine.
happy coding!