![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/07\/03111257\/Screen-Shot-2018-07-03-at-11.10.07.png\")
<\/p>\n<\/p>\n
In this tutorial, I will show you how to use Highcharts Android wrapper to create an interactive chart to display the UEFA champions data.
\nIf you are an Android Developer, chances are Java is your language of choice. However, you may also have some favorite tools from other platforms, such as Highcharts, the most popular enterprise charting library for the web.<\/p>\n
The Highcharts Android Wrapper offers you the capability to initialize the chart as a normal view in Android. This solution allows you to create a chart into a separate fragment or activity; you can also create a chart directly next to your other views without affecting them.
\nOk, let\u2019s get our hands dirty with a project to really experience the Highcharts Android Wrapper \ud83d\ude42<\/p>\n
Create a new Project in Android Studio, name it, choose Android 5.0 and the Empty Activity template.<\/p>\n
<\/p>\n
Add the Highcharts Android Framework to your project. There are two ways to do so. First<\/b>, you can download the And following in the dependencies:<\/p>\n The second<\/b> option is to add the library to the gradle dependencies like this: and following to the dependencies in your app Note, that if you plan to use the export module, you need to put this specific provider in your app:<\/p>\n And in add This completes the project setup, and you may now move on to creating your charts.<\/p>\n For this example, we will create a basic column chart to visualize some stats of the top 4 teams in the UEFA Champions League 2016\/17. After creating the layout, return back to Done!<\/p>\n Now let’s review the chart options. The HIOptions<\/b> class is responsible for it. This one contains all the necessary information for data presentation and rendering the chart. Object of this class will be used to set up all needed options for the chart. It is worth noting that only a few of them are necessary<\/b> to create the chart (for example series – which will be discussed later in this article). Let\u2019s start by configuring the chart<\/b> variable. To do this, we will need HIChart<\/b> class:<\/p>\n In the second line, the code above we have chosen the chart type by the type variable from the HIChart<\/b> class. HIChart<\/b> class offers much more, but in our example, this lone variable is sufficient. In the last line, we added chart to the options. It is a good practice to add everything to your options object at once to avoid missing some of them. The title of the chart is managed by HITitle<\/b> class, while HISubtitle<\/b> is responsible for subtitle. After setting the title objects, we\u2019re adding them to the options<\/b> object. We want to display the data on a category xAxis. We set the categories as an ArrayList<\/b> to the HIXaxis<\/b> object and assign it to the xAxis object (HIXaxis) to the options object.<\/p>\n Chart can have a few X and Y axes depending on needs, which is why it is added to options as ArrayList too.<\/p>\n Now, we will configure\/set up the tooltip. Consider the following code:<\/p>\naar<\/code> file and add it manually. Put the aar<\/code> in the libs folder in your project structure. Then, add the following lines to the app build.gradle<\/code> file:<\/p>\nrepositories{\r\n\tflatDir{\r\n\t\tdirs \u2018libs\u2019\r\n\t}\r\n}<\/pre>\ncompile (name: 'highcharts-release-v6.1', ext:'aar')<\/pre>\n
\nAdd the Highcharts repository to your build.gradle file:<\/p>\nrepositories { \r\n maven { \r\n url \"https:\/\/highsoft.bintray.com\/Highcharts\" \r\n }\r\n}<\/pre>\nbuild.gradle<\/code> file:<\/p>\ndependencies {\r\n compile 'com.highsoft.highcharts:highcharts:6.1r'\r\n}<\/pre>\n<provider android:authorities=\"com.your.package.name.FileProvider\"\r\n android:name=\"android.support.v4.content.FileProvider\"\r\n android:exported=\"false\"\r\n android:grantUriPermissions=\"true\">\r\n <meta-data\r\n android:name=\"android.support.FILE_PROVIDER_PATHS\"\r\n android:resource=\"@xml\/provider_paths\"\/>\r\n<\/provider>\r\n<\/pre>\n
provider_paths<\/code> file to xml<\/code> folder containing this:<\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<paths>\r\n <files-path name=\"export\" path=\".\" \/>\r\n<\/paths>\r\n<\/pre>\n
Creating chart to visualize team statistics using Highcharts<\/h4>\n
\nAt first, you need to create the proper layout<\/b> in xml<\/code> for your chart. To do this, go to your activity_main.xml<\/code> and make sure the following lines are added:<\/p>\n<com.highsoft.highcharts.Core.HIChartView\r\n android:id=\"@+id\/hc\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\" \/>\r\n<\/pre>\n
MainActivity.java\/code> where you create the chart. In the <\/code>onCreate method you will create first the layout<\/b> from xml<\/code> resource and create a new instance of the HIChartView<\/b> class, passing the context<\/b> from that layout:<\/p>\nHIChartView chartView = (HIChartView) findViewById(R.id.hc);<\/pre>\n
\nCreate an instance of HIOptions<\/b> class:<\/p>\nHIOptions options = new HIOptions();<\/pre>\n
HIChart chart = new HIChart();\r\nchart.setType(\u201ccolumn\u201d);\r\noptions.setChart(chart);<\/pre>\n
\nAt this moment it is worth giving your chart a proper title:<\/p>\nHITitle title = new HITitle();\r\n\r\ntitle.setText(\"UEFA Champions League 2016\/17\");\r\nHISubtitle subtitle = new HISubtitle();\r\nsubtitle.setText(\u201cTeam statistics\u201d);\r\noptions.setTitle(title);\r\noptions.setSubtitle(subtitle);<\/pre>\n
\nIt\u2019s always a good idea to change the default axes names, to make it easier for others to interpret your dataset. Set the Axis titles as follows;<\/p>\nfinal HIYAxis hiyAxis = new HIYAxis();\r\nhiyAxis.setMin(0);\r\nhiyAxis.setTitle(new HITitle());\r\nhiyAxis.getTitle().setText(\"Number\");\r\noptions.setYAxis(new ArrayList(){{add(hiyAxis);}});<\/pre>\nfinal HIXAxis hixAxis = new HIXAxis();\r\nArrayList categories = new ArrayList<>();\r\ncategories.add(\"Goals\");\r\ncategories.add(\"Assists\");\r\ncategories.add(\"Shots On Goal\");\r\ncategories.add(\"Shots\");\r\n\r\nhixAxis.setCategories(categories);\r\noptions.setXAxis(new ArrayList(){{add(hixAxis);}});\r\n<\/pre>\nHITooltip tooltip = new HITooltip();\r\ntooltip.setHeaderFormat(\"<span style=\\\"font-size:15px\\\">{point.key}<\/span><table>\");\r\ntooltip.setPointFormat(\"<tr><td style=\\\"color:{series.color};padding:0\\\">{series.name}: <\/td>\" + \"<td style=\\\"padding:0\\\"><b>{point.y}<\/b><\/td><\/tr>\");\r\ntooltip.setFooterFormat(\"<\/talble>\");\r\ntooltip.setShared(true);\r\ntooltip.setUseHTML(true);\r\noptions.tooltip = tooltip;\r\n<\/pre>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/07\/03150058\/Screen-Shot-2018-07-03-at-11.11.51.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"