India

<h2>Background</h2>

dRSTin is a data
calculation and monitoring engine where visualization/charting is a form of
output. The calculated data needs to be auto-charted in the best possible
manner by taking as less inputs from user as possible. At the same time, users
need to be given the flexibility to render the charts as per their choice. 

&nbsp;

Since we are
competing against the big visualization tools available in the market, our
charts need to be as appealing and user friendly.

&nbsp;

The main function
of the application is to monitor the data and report exceptions. So, the charts
need to highlight the exceptions, if present. 

&nbsp;

<h2>Requirements</h2>

<h3>General Requirements</h3>

&nbsp;

1. All Charts have to handle negative values. If it
cannot, it has to take care of it in the ‘canrender’ function. For data having
negative values, the axes will contain a zero-line and the data-points have to
be aligned to it. For charts that do not have axis lines, negative values have
to be handled w.r.t that chart.

&nbsp;

2. All charts need to be able to handle both 

(a) Too few data points and

(b) Too many data points

In both the cases
the charts have to be rendered in a visually understandable and appealing
manner. The goal is to show as much information as possible by making the user
click (or any other action) as less as possible.

&nbsp;

3. All charts have to be responsive. The charts have
to re-fit themselves to the size of the block allocated to it.&nbsp; 

&nbsp;

4. Charts have to behave uniformly, which is why the
events of hover, click, zoom etc. need to be handled centrally. This is
applicable for most charts. However, there may be exceptions.

&nbsp;

5. There should not be repetitions or copies of any
same functionality. To ensure uniformity/maintainability, any behavior that is
applicable to more than one chart has to be handled thru one common function.
During development of new charts, the common functions need to be used wherever
applicable.

&nbsp;

6. If a chart can be reused to create another chart,
only one common function should be maintained for rendering the charts. The
parent charting functions should&nbsp; internally
call the common function by passing appropriate attributes.

E.g. one code for
rendering pie &amp; donut charts. Pie calls it by passing attribute radius=0.
donut calls it by passing attribute radius=5. Same for linechart &amp;
scatterplot

&nbsp;

7. All charts have to handle ‘alert’ records
(explained in Understanding Data Structure section) and display them.

&nbsp;

8. For each new chart, the required attributes need
to be identified first. If the attributes/attributedeteminers are not already
present, functions need to be written to determine the attributes from the
data/metadata. OR userinput configurations need to be defined to get the
attribute from the users. Refer Understanding Attributes for better understanding. 

&nbsp;

<h3>New Charts</h3>

Create following
new charts within Asmaka’s framework using D3

&nbsp;

<span><b>1. </b><b><u>Sankey Chart</u></b></span>

&nbsp;

Please refer the following chart. 

http://www.brightpointinc.com/labs/federal_budget/

&nbsp;

A similar chart is required wherein the radius/width of the circle/branch
is determined by the value of the data. 

The animations are also required.

&nbsp;

<span><u>Note</u>: The dimension hierarchy attribute required for this chart is readily
available. No need to determine that.</span>

&nbsp;

&nbsp;

&nbsp;

<span><b>2. </b><b><u>Bullet Chart</u></b></span>

&nbsp;

Please visit the following link for references

http://visualbi.com/blogs/business-intelligence/dashboards/bullet-charts-use-cases/

&nbsp;

&nbsp;

<span><b>3. </b><b><u>Stack Chart</u></b></span>

&nbsp;

The stack chart should be able to handle as many dimensions and facts as
possible. Few examples are shown below. Depending on the number of
dimensions/facts, the chart has to be rendered accordingly. While rendering (&gt;2)-dimension
stack charts, the drill-down, if any, also has to be taken care of. 

&nbsp;

&nbsp;

<img width="239" alt="IMG_256" height="211">

&nbsp;

<img width="297" alt="IMG_256" height="187">

&nbsp;

<h3>&nbsp;</h3>

<h3>Fixing Existing Charts</h3>

Some of the charts have already been created. But 

A) They need some fixing in terms of overlapping
labels, placement within the div etc. 

B) The look-n-feel can also be improved if possible. 

C) More moving attributes can be created to give
users more flexibility in terms of rendering. (E.g. of an existing attribute -
giving user the option to determine the circle size in a line chart or to have
no circle at all)

&nbsp;

<img width="516" alt="" height="212">

&nbsp;

&nbsp;

<h3>Understanding The Data Structure</h3>



The data that
comes from the backend has the following structure

&nbsp;

{

&nbsp;
"metadata":[{}],

&nbsp;
"data":[{}],

&nbsp;
"alertcols":{},

&nbsp;
"locationdata":[{}]

}

&nbsp;

<span><b><u>Metadata</u></b><b>:</b></span>

<b>&nbsp;</b>

The metadata
contains information about each of the columns present in ‘data’. It has the
following attributes

&nbsp;

{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"synonyms": "",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"isindexed": "false",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"datatypecatalog": "string",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"fntype":"aggfn",&nbsp;
//Operation type. Present only if this col is
result of an operation. 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"fnapplied":"sum", //The
operation that was applied. This needs to be used for drill-down/up/sankeychart
etc.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"inhierarchies":
"Country-&gt;State-&gt;City,Dept-&gt;City-&gt;Branch", //The hierarchy chains of which this column is part of.
Required for drill &amp; sankeychart

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"datatype": "StringType",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"type": "column",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"issaved": "false",

<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>"value":
"City",&nbsp; //column name</b></span>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"hassubtotal": "false",&nbsp; //if aggregation
contains subtotal

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"isderived": "false",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"dftype": "dimension",&nbsp;&nbsp; //dimension or fact

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"dimsubtypes": ""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //if dimension
is of type location or duration. Currently blank

&nbsp;&nbsp;&nbsp; }

&nbsp;

&nbsp;

<b><u>Data:</u></b>

<b><u>&nbsp;</u></b>

Contains the
actual data to be plotted. E.g.

&nbsp;

[

&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Client Name": "Sundeep Enterprise",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Client group": "Vijay",

<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "<b>City</b>":"Kolkata",</span>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Dept":"GST",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Filing Status": "Individual",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Work
Type": "GSTR-3B(June)",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Work
Description": "GSTR-3B for June'18",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Assigned To": "Sarfaraz",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Date
Assigned": "2018-07-12 00:00:00.0",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Target Date": "2018-07-18 00:00:00.0",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Due
Date": "2018-07-20 00:00:00.0",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Date
Closed": "16/07/2018",

&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;"Due Date Status": 0,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Priority": "High",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Work
Status": "Done",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
"Beyond target date": 0,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Late
by": "-2.0",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
"ALERTSTATUS": "alert text",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Column present only if exception
is detected in the record

"ALERTCOLOR": "#FF5733" //Column present only if exception is detected in the record

&nbsp;

&nbsp;&nbsp;&nbsp; }

&nbsp; ]

&nbsp;

<b><u>Alertcols:</u></b>

<b><u>&nbsp;</u></b>

<span>dRSTin has the
capability to detect exceptions for given KPIs. The exception records are
marked with 2 additional columns/attributes as shown in the <b><u>Data</u></b>
section above. <u>The alert records are colored using the ‘ALERTCOLOR’
attribute</u>. The alert text is shown on hover. Refer screenshot below. This
attribute gives the names of the alert columns. It has a fixed value of </span>

&nbsp;

{

&nbsp; "text":"ALERTSTATUS",

&nbsp; "color":"ALERTCOLOR"

}

&nbsp;

<img width="553" alt="" height="235">

&nbsp;

&nbsp;

&nbsp;

<b><u>Locationdata:</u></b>

<b><u>&nbsp;</u></b>

For data that
contains information about a location, this attribute contains the lat-lon
information so that geo-plotting can be done. A sample record is given below

&nbsp;

[

&nbsp; {

&nbsp;&nbsp;&nbsp; "location":"Kolkata",

&nbsp;&nbsp;&nbsp; "lat":"22.572645",

&nbsp;&nbsp;&nbsp; "lon":"88.363892"

&nbsp; }&nbsp; 

]

&nbsp;

<h3>Understanding
Attributes</h3>

Attributes are
determined from the data/metadata etc. The attribute configuration looks like
this

&nbsp;

{

&nbsp; "name": "axes",

&nbsp; "displayname": "Axes",

&nbsp; "value":
{"horizontal":"Country",
"vertical":"Population"}, //null
in default config. Populated by the determining method

&nbsp; "isdetermined": true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //initially
false, determining method sets it to true after determination

<span>&nbsp; <b>"determiningmethod":
"determineaxes"</b>,</span>

&nbsp; "appliesto": [

&nbsp;&nbsp;&nbsp; "linechart",

&nbsp;&nbsp;&nbsp; "barchart",

&nbsp;&nbsp;&nbsp; "piechart",

&nbsp;&nbsp;&nbsp; "donutchart",

&nbsp;&nbsp;&nbsp; "scatterplot",

&nbsp;&nbsp;&nbsp; "columnchart",

&nbsp;&nbsp;&nbsp; "areachart",

&nbsp;&nbsp;&nbsp; "geochart"

&nbsp; ],

&nbsp; "userinput": [

&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "keyname":
"horizontal",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "keydisplayname":
"Horizontal Axes",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "type": "select"

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "keyname":
"vertical",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "keydisplayname":
"Vertical Axes",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "type": "select"

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "keyname": "color",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "keydisplayname":
"Legends",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "type": "select"

&nbsp;&nbsp;&nbsp; }

&nbsp; ]

}

&nbsp;

Attributes that
can be identified by the system have a determining method with the following
signature.

&nbsp;

function
<span>(vistype, chartinginfo, datawithmeta)

&nbsp;

&nbsp;

&nbsp;

<h3>Charting functions</h3>

For each chart, a
new js file needs to be created and added to the application. The charting
function signature is as given below.

&nbsp;

charts.linechart
= function (divid, attributes, datawithmeta)

&nbsp;

For each chart, a
corresponding ‘canrender’ function also needs to be created. The function
signature is as given below

&nbsp;

charts.linechart.canrender
= function(datawithmeta, attributes)</span>

d3 Charts for an Analytics Tool

Useful links

Company

Information

Content Writers

Freelancers

Freelance Jobs

Online Jobs

Designers

Developers

Translations