ChartJS is a JavaScript framework designed to plot graphs of different types with ease.
It inculdes plotting multiple types of data on same chart so that it facilitates comparision.More
details about chartjs can be found at ChartJs Official page.
ChartJsAnnotations
This was a plugin designed for chartjs to place annotations on charts made by chartjs. These annotations
are made to be the key componenets in making the graph interactive. The positions of annotations are
found and every time the user drags them (which are denoted as grades in this project) will move to
new positions if the position is valid("B" grade can not go beyond "A" and get below "C").For
other details and code samples visit ChartJs Annotations github page.
ChartJsDraggable
ChartJs Draggable is yet another plugin designed to facilitate drag and drop of
some specified elements in plots of chartjs.It also was been used to accomplish the given task of
making an interactive graph plotting.ChartJs Draggable github page.
Javascript
JavaScript (JS) is a lightweight interpreted or JIT-compiled programming language with first-class
functions. While it is most well-known as the scripting language for Web pages,
many non-browser environments also use it, such as node.js,
Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based,
multi-paradigm, dynamic language, supporting object-oriented, imperative,
and declarative (e.g. functional programming) styles.
Read more aboutJavascript.
2 Application Interface
2.0 Navigation
The navigation bar facilitates the user to view different modules of application. The three links in order are
2.1 Data Input
2.2 Alter Plot
2.3 Show Stats
2.1 Data Input
The data input tab has two main divisions. On the left side lies
a data container where the user has to paste the actual data.
The data can also be entered manually. The data field calculates data count and
average fo given values and displays it on the top-right side of right side division.
The parameters section is where you can select different grading schemes. The application includes
two schemes used by iitBombay namely.
1. IITB Default
2. IITB Absolute
3. Equi Partition
4. Custom
2.1.1 IITB Default
IITB default scheme follows a grading mode in which the minimum pass mark will be 40% of "AP" grade.
Between these "AP" and "pass" there will be seven other grades like "AA","AB","BB","CB","CC","DC","DD". The user has
to provide the upper bound of "AA"(same as lower bound of "AP"). The application will plot the grades accordingly.
2.1.2 IITB Absolute
IITB Absolute is a scheme in which all the grade bounds are fixed before hand.
Just select the mode and click on second tab to view plot and make any changes there.
2.1.3 Equipartition
In equi partition mode the user has to provide data, number of grades, credit values
of each grade, a lower bound and an upper bound. The grades will be set such that the upper bound and lower bound
is made in the number of equal partitions same as the grade count specified by the user.
2.1.4 Custom
Custom is a very direct mode of grading. The user has to provide all the data
like marks of students, number of grades, credit value of each grade and even the bounds of each grade.
Once the user selects appropriate grading scheme and fill all forms with valid data, he can move on to
plotting tab. Any type of invalid data entered or any field left empty are reported to user. Every time the user
visits the input data tab, a new chart will be plotted even the data is remained unchanged.
2.2 Alter Plot
Alter plot tab shows a plot of frequency distribution of given data along with the grades denoted by
long vertical bars.The scale is automatically set by the application basing on your data given. The y-axis will
have a value of two more than the maximum y value of the plot. Similarly the X-axis will have
either 100 or 10% more than the maximum value possible in X. On the top the user has several options to
customize the chart view like Line Chart, Bar Chart, Reset Plot,
Reset Zoom respectively as shown below.
Below the chart options all the grade labels followed by their lower bounds are displayed.
These values change dynamically when the user changes the bars on the chart.
The bar positions can also be changed by changing the values in this input blocks.
New positions of bars which are being moved will be validated automatically and illegal movements are
avoided by default(unless user intentionally wants to do something).
The "BarChart" and "LineChart" in the chart option menu changes the type of plot being shown in the background.
The frequency values of this chart can also be seen by hovering the mouse over a "bar" in case of barChart or "point"
in case of lineChart.
The view of bar chart and line chart are as follows.
Bar Chart
Line Chart
The grade bounds are mainly two types. One is a fixed bounds which denotes the initial grade bounds and the other
is of type draggable. This fixed bounds are red in colour and are initially not visible as they are overlapped
by the movable bounds over them which are green in colour. The grade bounds
in green color can either be dragged or can also be changed also in the input boxes above.