Analytics for Challenges
First view the awesome charts and graph for HackerEarth Practice Challenge. I will explain it's implementation details later in the post.
Why bother for Challenge Analytics?
We thrive on challenge but challenge is no fun without a detailed analytics. In this number-driven world, analytics has evolved as a blanket term for the number of techniques to turn the raw data into useful information.
Why use Google Charts Tools?
There are a lot of reasons to choose Google Charts over the others charting libraries. - Free. - Lightweight and Reliable. - Healthy Documentation.
What you gain from Challenge Analytics?
The HackerEarth Challenge Analytics gives following details:
- Submission Count Analytics
The Submission Count Analytics displays a Line-Chart with the total number of submissions at a particular instance of time. This chart is updated at regular time intervals.
- Language Analytics
The Language Analytics displays a Pie-Chart depicting the popularity of a programming language supported by HackerEarth, during a challenge. Personally, this chart is my rock favorite as it helps me figure out the current trend of a particular language.
- Submission Analytics
The Submission Analytics displays a Pie-Chart depicting the submission status namely
- AC - Accepted
- CE - Compilation Error
- TLE - Time Limit Exceeded
- MLE - Memory Limit Exceeded
- RE - Runtime Error
- Pinhole Analytics
The Pinhole Analytics displays a Pie-Chart depicting the run-status for the solution against various test-cases.
- Multilingual Users
A true programmer proves himself/herself by programming around in various kind of languages. This table is leaderboard for them, the more the language you use in a challenge the higher you get in the table.
Implementing Challenge Analytics
The Challenge Analytics uses two of the Google Charts - Line-Chart - Pie-Chart
As talked about earlier Submission Count Analytics uses a Line Chart for depicting the computed data
The Line Chart(Google Chart Tools) is documented here.
Google charts requires the JSAPI library, This library is loaded by:
The script given below loads the Google Visualization and the Chart libraries. This is also responsible for displaying the chart.
The google.load package name is "corechart"
The visualization's class name is google.visualization.LineChart
The drawChart() function creates a DataTable and is populated with computed data. The required number of columns are added mentioning the data format
For customizing the tooltip, an extra column was added and the 'role':'tooltip' is specified.
The option object is used for customizing the chart to be displayed. The customizable option for a Line-Chart is available here.
This instantiates an instance of chart class you want to use for e.g. LineChart, PieChar etc., by passing in some options. The Google chart constructors takes a single parameter: a reference to the DOM element in which to draw the visualization.
Once the chart is ready, a HTML element is created to hold the particular chart.
PieChart works on a similar principle, except for:
- The visualization's class name is google.visualization.PieChart
- The Options for PieChart is documented here.
While implementing Google Charts, I faced a weird problem, due to the use of google.load() after the loading of the charts the page would go black instantly, but the problem was solved by using callback parameter to google.load(). A nice blog-post can be read here.
For any queries or suggestions, you can shoot me a mail at firstname.lastname@example.org.
P.S. I am an undergraduate student at Dr. B.C.Roy Engineering College, Durgapur. You can also find me @chowdhury_sayan
Posted by Sayan Chowdhury, Intern @HackerEarth