Charts

Read more about the article Implementing Five Star Rating UI in SUSI iOS

Implementing Five Star Rating UI in SUSI iOS

Five-star rating system introduced in SUSI to rate skills. SUSI enable the user to rate skills between 1 to 5 star. The five-star rating system is the best way to get feedback from the user. It also helps the developer for further development. Ratings help to better understand individual preferences and present a more personalized user experience. The user feedback helps products understand whether or not the content is valuable and improve offerings over time. This can benefit products with and without sophisticated personalization. Let’s see how the five-star rating system is implemented in SUSI iOS. Average ratings displayed near the Try It button - It shows the average rating of a particular skill. Enable user to submit the rating of any skill between 1-star to 5-star. The only logged-in user can submit the ratings for skills. Rating chart that display number of rating for each star (1 to 5), the right labels of chart bars shows the number of users rated for a particular star with the percentage. Average and total ratings for particular skills is also displayed near the bar chart. Thumbs-up and thumbs-down ratings removed from the skill detail screen and replaced with 5-star ratings. Implementation of Rating Chart For the rating chart, we are using TEAChart class, which enable us to present rating data on bar charts. Setting colors for bar chart: We are using Google's Material Design color for rating bars colors. let barChartColors = [ UIColor.fiveStarRating(), UIColor.fourStarRating(), UIColor.threeStarRating(), UIColor.twoStarRating(), UIColor.oneStarRating() ] Assigning colors to bars: barChartView.barColors = barChartColors Assign Data to the bars: // Sample data barChartView.data = [5, 1, 1, 1, 2] Set background color and bar spacing: barChartView.barSpacing = 3 barChartView.backgroundColor = UIColor.barBackgroundColor() Final Output - Resources - Material Design: https://material.io/design/ SUSI iOS Link: https://github.com/fossasia/susi_iOS

Continue ReadingImplementing Five Star Rating UI in SUSI iOS
Read more about the article Implementing Check-in time chart in Orga App

Implementing Check-in time chart in Orga App

Earlier in the Open event orga app there were no charts present to track the check-in time of the attendees. Hence it was quite cumbersome for the organiser to track the people and at what time they have checked-in. Using this feature of check-in time chart, the process has become quite easier. Whenever an attendee checks-in, the data point is added to the chart and a chart is plotted. The Y-axis shows the number of attendees and the X-axis shows the time at which they have checked-in. To implement this feature I have taken use of the MPAndroidCharts library which makes the job a lot easier. Following steps were followed to implement the charts: Adding the following Library dependency in the build.gradle file implementation "com.github.PhilJay:MPAndroidChart:v3.0.3" Now the following code is added to the ticket_analytics.xml file. This is done so that the UI of the charts can be created. The following XML file consists of the LineChart XML tag which shows the check-in time chart on screen. Also the labelling of the axis needs to be done, so the X-axis is explicitly named as “TIME”. <LinearLayout   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:orientation="vertical">   <TextView       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_marginLeft="@dimen/spacing_normal"       android:layout_marginStart="@dimen/spacing_normal"       android:layout_marginTop="@dimen/spacing_normal"       android:text="@string/check_in_summary"       android:textAllCaps="true"       android:textSize="@dimen/text_size_small" />   <com.github.mikephil.charting.charts.LineChart       android:id="@+id/chartCheckIn"       android:layout_width="match_parent"       android:layout_height="200dp"       android:layout_marginEnd="@dimen/spacing_normal"       android:layout_marginLeft="@dimen/spacing_normal"       android:layout_marginRight="@dimen/spacing_normal"       android:layout_marginStart="@dimen/spacing_normal" />   <TextView       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_gravity="center"       android:layout_marginBottom="8dp"       android:layout_marginTop="8dp"       android:text="@string/check_in_time"       android:textSize="10sp" />   <LinearLayout       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:orientation="vertical">       <FrameLayout           android:layout_width="match_parent"           android:layout_height="1dp"           android:background="@color/color_shadow" />       <FrameLayout           android:layout_width="match_parent"           android:layout_height="@dimen/spacing_small"           android:background="@color/color_bottom_surface" />   </LinearLayout> </LinearLayout> Now the a method loadCheckIn( )  chart needs to added to the EventsDashboardPresenter. This is called from the EventsDashboardFragment. The loadDataCheckIn( ) is created in the ChartAnalyzer class. We pass getId( ) as the parameter. private void loadCheckInTimesChart() {   chartAnalyser.showChart(getView().getCheckinTimeChartView());   chartAnalyser.loadDataCheckIn(getId())       .compose(disposeCompletable(getDisposable()))       .subscribe(() -> {           getView().showChartCheckIn(true);           chartAnalyser.showChart(getView().getCheckinTimeChartView());       }, throwable -> getView().showChartCheckIn(false)); } Now we add the method loadDataCheckIn( ) in the ChartAnalyzer class. This method returns a Completable and takes eventId as the single parameter. public Completable loadDataCheckIn(long eventId) {   clearData();   isCheckinChart = true;   return getAttendeeSource(eventId).doOnNext(attendee -> {      String checkInTime = attendee.getCheckinTimes();      int length = checkInTime.split(",").length;      String latestCheckInTime = checkInTime.split(",")[length - 1];      error = checkInTime == null ? true : false;      addDataPointForCheckIn(checkInTimeMap, latestCheckInTime);   })     .toList()     .doAfterSuccess(attendees -> this.attendees = attendees)     .toCompletable()     .doOnComplete(() -> {         if (error)             throw new IllegalAccessException("No checkin's found");         checkInDataSet = setDataForCheckIn(checkInTimeMap, "check-in time");         prepare();     }); } It calls the getAttendeeSource( ) which further gives a call to the method getAttendees( ) from the AttendeeRepository. All the inormation related to the attendees is returned from which the check-in times is extracted. The check-in times are returned in comma separated form and hence we need to extract the first element of the sequence. private Observable<Attendee> getAttendeeSource(long eventId) {   if (attendees == null || attendees.isEmpty())       return attendeeRepository.getAttendees(eventId, false);   else       return Observable.fromIterable(attendees); } After the success of loading the attendees, the method addDataPointForCheckIn is called. We call it by inserting the parameters Map<Integer, Long> and the dateString which we had passed from the loadDataCheckIn( ). Following is the code for it. A map is created out of the data. The key in the map is the time and value…

Continue ReadingImplementing Check-in time chart in Orga App
Read more about the article Coloring Waveforms in PSLab Charts

Coloring Waveforms in PSLab Charts

Charts are used to display set of data in an analytical manner such that an observer can easily come to a conclusion by just looking at it without having to go through all the numerical data sets. Legends are used to differentiate a set of data set from another set. Generally, different colors and different names are used to form a legend in a chart. MPAndroidChart is an amazing library with the capability of generating different types of graphs in an Android device. In PSLab several user interfaces are implemented using LineCharts to display different waveforms such as readings from channels attached to PSLab device, logic levels etc. When several data sets are being plotted on the same graph area, legends are used. In PSLab Android application, Oscilloscope supports four different type of waveforms to be plotted on the same graph. Logic Analyzer implements one to four different types of logic level waveforms on the same plot. To identify which is which, legends with different colors can be used rather than just the names. For the legends to have different colors, it should be explicitly set which color should be held by which data set. Otherwise it will use the default color to all the legends making it hard to differentiate data lines when there are more than one data set is plotted. Assume a data set is generated from a reading taken from a probe attached to PSLab device. The set will be added as an Entry to an array list as follows; ArrayList<Entry> dataSet = new ArrayList<Entry>(); The next step will be to create a Line Data Set LineDataSet lineData = new LineDataSet(dataSet, "DataSet 1"); This LineDataSet will contain sample values of the waveform captured by the microprocessor. A LineDataSet object support many methods to alter its look and feel. In order to set a color for the legend, setColor() method will be useful. This method accepts an integer as the color. This method can be accessed as follows; lineData.setColor(Color.YELLOW); MPAndroidChart provides different sets of colors under ColorTemplate. This class has several predefined colors with five colors in each color palette are added by the developers of the library and they can be accessed using the following line of code by simply calling the index value of the palette array list. set1.setColor(ColorTemplate.JOYFUL_COLORS[0]); Set of color palettes available in the ColorTemplate class are; LIBERTY_COLORS JOYFUL_COLORS PASTEL_COLORS COLORFUL_COLORS VORDIPLOM_COLORS MATERIAL_COLORS The following demonstrates how the above activities produce a line chart with three different data sets with different colored legends. This implementation can be used to enhance the readability of the waveforms letting user being able to differentiate between one waveform from another in PSLab Android application. Resources: MPAndroidChart Repository: https://github.com/PhilJay/MPAndroidChart Line Charts: https://en.wikipedia.org/wiki/Line_chart MPAndroidChart Line Chart Tutorial: https://www.numetriclabz.com/android-line-chart-using-mpandroidchart-tutorial/ MPAndroidChart Legends tutorial: https://www.studytutorial.in/android-line-chart-or-line-graph-using-mpandroid-library-tutorial PSLab official web site: https://pslab.fossasia.org/

Continue ReadingColoring Waveforms in PSLab Charts
Read more about the article Dynamic Ticket Analysis UI using Data Binding in Open Event Android Orga App

Dynamic Ticket Analysis UI using Data Binding in Open Event Android Orga App

Any event manager application has the responsibility to show the analytics about the event to the organiser and in Open Event Android Orga App (Github Repo), we wanted to achieve a way to display the analytics of total and sold tickets with the data present to us. To analyse, we have a list of tickets, which are divided into 3 categories: Free Paid Donation Our goal was to show information about total tickets and the amount of sold tickets per category. This blog will focus on the dynamic UI creation for the ticket analysis component of the Event Details Dashboard using Android Layout Data Binding. By using Data Binding, we not only reduced the amount of Java Boilerplate code we would have to write, but also accomplished UI reuse in just XML which wouldn’t have been possible without it. You’ll see in a moment what I mean. Properties So first, we’d need to define some properties which will be bound in the UI. These properties are declared in the Event model and their type is ObservableLong provided by the Android DataBinding package. The reason why we are using these instead of primitives is because these fields being Observable, will update the UI as soon as they are updated, without requiring the programmer to set the View Property at all. There are six fields, 3 for total tickets of each type and 3 for sold tickets public final ObservableLong freeTickets = new ObservableLong(); public final ObservableLong paidTickets = new ObservableLong(); public final ObservableLong donationTickets = new ObservableLong(); public final ObservableLong soldFreeTickets = new ObservableLong(); public final ObservableLong soldPaidTickets = new ObservableLong(); public final ObservableLong soldDonationTickets = new ObservableLong(); Some more advantages we get from using these are the batch view update and the use of computed properties in UI. Imagine having a TextView display the amount of free tickets and a progress bar showing the percentage of free tickets sold. Traditionally, you’d have to set the text and compute the percentage and set the progress bar as the data changes, whereas you can just use the fields in layout as is in both TextView and ProgressBar with the computations required and they’ll work in harmony. We have leveraged this feature to show the analytics component of tickets with a Ticket Type Circular Progress Bar Sold Tickets Total Tickets All using the XML layout and databinding Ticket Component For each ticket component, we have 4 variables, namely Ticket Type Name Total Amount Completed Amount (Sold Tickets) Color First 3 are fairly self explanatory, the color attribute we used in our component needs a little bit of description. We decided to give each ticket category its own color for circular progress bar for aesthetics. So, we need each component to have its own color attribute too. But this is not a normal android color ID or a hex. We needed 2 variants of the same color to show in the circular progress to discern the total and completed part. As we are using…

Continue ReadingDynamic Ticket Analysis UI using Data Binding in Open Event Android Orga App