Nwagon_logo Web based graphics chart library

Introduce

한국어ENGLISH

Development of ‘wagon’, a chart library was initiated as (we were) seeking a good visualization mechanism for presenting accessibility state reports within (NHN Web Accessibility Reporting System). Given the business requirements of the report, polygon shape of chart was seemingly the best choice.

Although free chart libraries are available, we were unable to find one that meets the business requirements and it was extremely inefficient to purchase a license in order to add or modify the functionalities as needed. Therefore we’ve decided to build a simple and easy-to-use chart library.

The name ‘wagon’ is composed of the acronym of Web Accessibility, and ‘gon’ as in polygon since the development was initiated while attempting to create a polygon shaped chart for web accessibility state. But more importantly the name ‘wagon’ is to imply our intention and effort to make web services that can be used by people with disabilities as comfortably as they are on a wagon ride

Key Points

  • Accessible icon
    Accessible data
    Data can be accessible by assistive tools
  • Easy data preparation icon
    Easy to use
    Easy data preparation (takes a JSON object) Visual chart is one function call away
  • Minimal Design icon
    Flat & Minimal Design
    Simple yet beautiful diagram
  • SVG icon
    Fast rendering & High resolution
    Good Performance with SVG (Scalable Vector Graphics)
  • Support icon
    Support All
    Support all modern browsers and even IE older versions. 
    Support IE 6 through 8 with VML rendering.

How to use

In order to use Nwagon, first one needs to download the source files from Nwagon Download page. Then include nwagon.js and nwagon.css files on the page that the charts will be drawn.

<link rel="stylesheet" href="Nwagon.css" type="text/css">
<script src="Nwagon.js"></script>

Since NWagon is a SVG based chart library, short overview of SVG will be helpful to understand the library.

[SVG tutorial sites]

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

http://www.w3schools.com/svg/

The following is a link to the playground where one can view a live demo of NWagon and also play with it.

http://jsfiddle.net/uRtsa/1/

Should you have any questions using Nwagon, please write a post on our facebook page.

facebook.com/theNuli


Radar Chart

A radar chart a.k.a spider chart or web chart or many other names serves a great visual presentation for comparing 3 or more data with the same measurement metric and displaying current states of data as compared to what they need to attain. Wagon's radar chart becomes extremely helpful when comparing multiple datasets within one chart area with the areas formed by vertexes on the radar.

JSON syntax

Radar chart takes a JSON object as its only parameter and the keys and values are as following.
 
  • legend: JSON object with key: value pairs
    • names: set of string values of discrete dataset
    • hrefs: set of string values of links that each name value refers to (optional)
  • dataset: JSON object with 4 key: value pairs
    • title: title of the chart
    • values: set of numbers for each vertex
    • bgColor: string value in HEX(i.e ‘#ccc’) for background
    • fgColor: string value in Hex for foreground polygon
  • chartDiv: id of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'legend':{
			names: [
				'Perceivable',
				'Information Loss',
				'Understandable',
				'Enough Time',
				'Epilepsy Prevent',
				'Operable',
				'Navigation',
				'Error Prevent'
			],
			hrefs: [
				'http://nuli.nhncorp.com/accessibility#k1',
				'http://nuli.nhncorp.com/accessibility#k2',
				'http://nuli.nhncorp.com/accessibility#k3',
				'http://nuli.nhncorp.com/accessibility#k4',
				'http://nuli.nhncorp.com/accessibility#k5',
				'http://nuli.nhncorp.com/accessibility#k6',
				'http://nuli.nhncorp.com/accessibility#k7',
				'http://nuli.nhncorp.com/accessibility#k8'
			]
		},
		'dataset': {
			title: 'Web accessibility status',
			values: [[34,53,67,23,78,45,69,98]],
			bgColor: '#f9f9f9',
			fgColor: '#30a1ce',
		},
		'chartDiv': 'Nwagon',
		'chartType': 'radar',
		'chartSize': { width: 500, height: 300 }
	};
	Nwagon.chart(options);
</script>	

View Example

Radar Chart Example

Key Points

Easy data preparation
Dimmed background for ‘N/A’ items
Tooltip for presenting the exact values
Multiple charts within one area
Easy data preparation
As shown in the code sample above, data preparation is very simple and options such as number of radars, color of background or foreground can be dynamically applied to the chart.

Dimmed background for ‘N/A’ items
As shown in the image left, the chart is designed to display ‘dimmed’ background for non-applicable items without tweaking the data, which are typically handled as an error. Radar chart detects values that are not in a number format (i.e ‘N/A’, ‘Non-Applicable’) and apply alpha value to the area associated with it.
'dataset': {
	title: 'Web accessibility status',
	values: [[34,53,67,23,’N/A’,45,69,98]],
	bgColor: '#f9f9f9',
	fgColor: '#30a1ce'
}			

Tooltip for presenting the exact values
The library automatically creates mouse events on each vertex in order to display the exact values in a tooltip format that are extracted from the dataset.

Multiple charts within one area
It is extremely easy and useful when comparing two or more charts with NwaGon. By just adding datasets, it creates and stacks multiple polygons on a same background as show in the image left. In this case, tooltip creation will be omitted to eliminate any confusions
'dataset': {
	title: 'Web accessibility status',
	values: [
		[34,53,67,23,78,45,69,98],
		[65,34,67,85,89,67,95]
	],
	bgColor: '#f9f9f9',
	fgColor: '#30a1ce'
}			

Column Chart


Single column

Single column chart is the simplest version of column chart and the data presentation is very straightforward. As the name indicates single column chart is used to compare distinctive data set within a single category.

JSON syntax

Similar to the radar chart, column chart also takes a JSON object as its only parameter and the keys and values are as following.
 
  • legend: JSON object with 2 key: value pairs
    • names: set of string values of discrete data set
    • hrefs: set of string values of links that each name value refers to (optional)
  • dataset: JSON object with 3 key: value pairs
    • title: title of the chart
    • values: set of numbers for each column
    • colorset: array of string values in HEX for each column
  • chartDiv: array of string where each value represents each discrete portion
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport
  • maxValue: number that represents the highest possible value in a dataset. If omitted, the maximum value from the dataset will be used.
  • increment: number that is used to draw horizontal background lines and incremental values on the y-coordinate

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'legend': {
			names: ['EunJeong','HanSol','InSook','Eom','Pearl','SeungMin','TJ','Taegyu','YongYong'],
			hrefs: [
				'http://nuli.nhncorp.com/blog/1132444',
				'http://nuli.nhncorp.com/blog/1132442',
				'http://nuli.nhncorp.com/blog/1132439',
				'http://nuli.nhncorp.com/blog/1132426',
				'http://nuli.nhncorp.com/blog/1115205',
				'http://nuli.nhncorp.com/blog/1111811',
				'http://nuli.nhncorp.com/blog/1111181',
				'http://nuli.nhncorp.com/blog/1096163',
				'http://nuli.nhncorp.com/blog/1079940'
			]
		},
		'dataset': {
			title: 'Playing time per day',
			values: [5,7,2,4,6,3,5,2,10],
			colorset: ['#DC143C', '#FF8C00', "#30a1ce"]
		},
		'chartDiv': 'Nwagon',
		'chartType': 'column',
		'chartSize': { width: 700, height: 300 },
		'maxValue': 10,
		'increment': 1
	};
	Nwagon.chart(options);
</script>
	

View Example

Column Chart Example

Key Points

Easy data preparation
Easily customizable color theme
#FF8C00 < #DC143C < #30A1CE
Easy data preparation
As explained above, data preparation is easy. Depends on the number of data values, columns will be drawn within the assigned viewport and the width of columns will be calculated with the width of the viewport and the number of values.

Easily customizable color theme
As briefly explained in the previous section, range of values can be expressed with a user-defined color theme. Depends on the number of colors, the categorical groups can be defined and appropriate colors will be used to fill the bars within the groups. For example, if the maximum value is set to 100 and 4 different colors are present in the 'colorset' the first value in the 'colorset' is used for the columns whose values are 0~25, the second value is for columns whose values are 26~50 and so on.
'dataset': {
	title: 'Playing time per day',
	values: [5,7,2,4,6,3],
	colorset: ['#DC143C', '#FF8C00', "#30A1CE"]
}				


Stacked column

As one of variations of the column chart, stacked column chart, stacked column chart is also used to compare total values or ratios within a same magnitude. But in a stacked column chart, each column is composed of two or more discrete portions.

JSON syntax

As expected, syntax for creating a stacked column chart is very similar to the one for a regular column chart with a several minor differences. And the differences are as shown below.
 
  • dataset: JSON object with 3 key: value pairs
    • title: title of the chart
    • values: arrays of number set for each column
    • colorset: array of string values in HEX that are used to define each discrete portion
    • names: array of string where each value represents each discrete portion
  • chartType: ID of <div> in which the chart will be draw

Code Example

// --- Code omitted ---
'dataset': {
	title: 'Playing time per day',
	values: [
		[5,7,2], [2,5,7], [7,2,3], [6,1,5], [5,3,8], [8,3,1], [6,3,9], [6,2,6], [8,2,4]
	],
	colorset: ['#DC143C', '#FF8C00', "#30a1ce"],
	fields: ['Working Time', 'Late count', 'Mail count']
},
'chartDiv': 'Nwagon',
'chartType': 'stacked_column',
// --- Code omitted --- 

View Example

Stack Column Chart Example

Multi column

A multi column chart, another variation of column chart serves a similar objective as a stacked column chart. One distinctive difference is that the data is displayed as a group of individual columns rather than components of a column.

JSON syntax

Only difference in preparing data for a multi column chart than stacked column is the value of the chart type.
 
  • dataset:
    • title: title of the chart
    • values: arrays of number set for each column
    • colorset: array of string values in HEX that are used to define each discrete portion
    • names: array of string where each value represents each discrete portion
  • chartType: string value of chart type (stacked_column)

Code Example

// --- Code omitted ---
'dataset': {
	title: 'Playing time per day',
	values: [
		[5,7,2], [2,5,7], [7,2,3], [6,1,5], [5,3,8], [8,3,1], [6,3,9], [6,2,6], [8,2,4]
	],
	colorset: ['#DC143C', '#FF8C00', "#30a1ce"],
	fields: ['Working Time', 'Late count', 'Mail count']
},
'chartDiv': 'Nwagon',
'chartType': 'multi_column',
// --- Code omitted --- 

View Example

Multi Column Chart Example

Line Chart

A line chart is used to display information as a series of data points connected by straight-line segments. It can be useful to display trends of data over certain intervals (typically a time series).

JSON syntax

  • legend: JSON object with 2 key: value pairs
    • names: set of string values of x-axis (i.e time series)
    • hrefs: set of string values of links that each name value refers to (optional)
  • dataset: JSON object with key: value pairs
    • title: title of the chart
    • values: array of set of values
    • colorset: array of string values in HEX for each line
    • fields: array of string values that represent each line
  • chartDiv: ID of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport
  • minValue: minimum possible value for the chart
  • maxValue: maximum possible value for the chart
  • increment: number for drawing horizontal background lines and incremental values on the y-coordinate
  • isGuideLineNeeded: boolean value to determine whether to draw a tooltip guideline or not. (default value is set to false)

Code Example

<div id="Nwagon"></div>
<script>
    var options = {
        'legend':{
            names: ['08-12', '08-19', '08-26', '09-02', '09-09', '09-16'],
            hrefs: []
        },
        'dataset':{
            title:'Playing time per day',
            values: [[61,7, 66], [76,33, 66], [49,22, 45], [58,26, 76],
                    [48, 15, 76], [56, 18,83]],
            colorset: ['#DC143C','#FF8C00', '#30a1ce'],
            fields:['Error', 'Warning', 'Pass']
        },
        'chartDiv' : 'Nwagon',
        'chartType' : 'line',
        'chartSize' : {width:700, height:300},
        'minValue' : 40,
        'maxValue' : 100,
        'increment' : 10,
        'isGuideLineNeeded' : true  //default set to false
    };
    Nwagon.chart(options);
</script>	

View Example

Line Chart Example

Area Chart

The area chart that can be considered as an extension of a line chart is used to display quantitive data by emphasizing the volume between axis and line(s) with color or textures. It also can be extremely helpful when comparing related attributes and the trends over the time intervals.

JSON syntax

Data preparation is very similar with a line chart except the chart type.
 
  • legend: JSON object with 2 key: value pairs
    • names: set of string values of x-axis (i.e time series)
    • hrefs: set of string values of links that each name value refers to (optional)
  • dataset: JSON object with 4 key: value pairs
    • title: title of the chart
    • values: array of set of values
    • colorset: array of string values in HEX for each line
    • fields: array of string values that represent each line
  • chartDiv: ID of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport
  • maxValue: maximum possible value for the chart
  • increment: number for drawing horizontal background lines and incremental values on the y- coordinate

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'legend':{
			names: ['08-12', '08-19', '08-26', '09-02', '09-09', '09-16'],
			hrefs: []
		},
		'dataset':{
			title:'Playing time per day',
			values: [[61, 66], [76,66], [49,45], [58,76], [48, 76], [56, 83]],
			colorset: ['#DC143C','#2EB400'],
			fields:['Error', 'Warning']
		},
		'chartDiv' : 'Nwagon',
		'chartType' : 'area',
		'chartSize' : {width:700, height:300},
		'maxValue' : 100,
		'increment' : 10
	};
	Nwagon.chart(options);
</script>	

View Example

Area Chart Example

Comparison Chart

The jira chart can also be considered as an extension of the line chart. One of the differences between jira chart and line chart is that a jira chart takes only 2 set of values as it is the key feature to display the quantitate differences between 2 value sets. Jira chart can be extremely useful for creating for instance a sales report against a competitor.

JSON syntax

Data preparation is very similar with a line chart except the chart type.
 
  • legend: JSON object with key: value pairs
    • names: set of string values of x-axis (i.e time series)
    • hrefs: set of string values of links that each name value refers to (optional)
  • dataset: JSON object with key: value pairs
    • title: title of the chart
    • values: array of set of values
    • colorset: array of string values in HEX for each line
    • fields: array of string values that represent each line
  • chartDiv: ID of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport
  • maxValue: maximum possible value for the chart
  • increment: number for drawing horizontal background lines and incremental values on they-coordinate

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'legend':{
			names: ['08-12', '08-19', '08-26', '09-02', '09-09', '09-16'],
			hrefs: []
		},
		'dataset':{
			title:'Playing time per day',
			values: [[61, 66], [76,66], [49,45], [58,76], [48, 76], [56, 83]],
			colorset: ['#DC143C','#2EB400'],
			fields:['Error', 'Warning']
		},
		'chartDiv' : 'Nwagon',
		'chartType' : 'jira',
		'chartSize' : {width:700, height:300},
		'maxValue' : 100,
		'increment' : 10
	};
	Nwagon.chart(options);
</script>	

View Example

Comparison Chart Example

Donut/Pie Chart

The donut chart is a circular type of chart where the arc length of each sector is reflected by their numerical proportions. The pie chart is almost identical to the donut chart in terms of its functionalities except there is no blank center.

JSON syntax

  • dataset: JSON object with 4 key: value pairs
    • title: title of the chart
    • values: array of values that are used to determine the arc length of corresponding sectors.
    • colorset: array of string values in HEX for each sector
    • fields: array of string values which represent corresponding sectors
  • donut_width: width of donut (in case of pie chart, donut width should be considered as radius)
  • core_circle_radius: integer value for the blank center (in case of pie chart, it should be set to 0)
  • chartDiv: ID of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'dataset': {
			title: 'Web accessibility status',
			values:[25, 3 , 10, 7],
			colorset: ['#2EB400', '#2BC8C9', "#666666", '#f09a93'],
			fields: ['A', 'B',  'C', 'D'],
		},
		'donut_width' : 35,
		'core_circle_radius':50,
		'chartDiv': 'Nwagon',
		'chartType': 'donut',
		'chartSize': {width:700, height:400}
	};
	Nwagon.chart(options);
</script>	
<div id="Nwagon"></div>
<script>
	var options = {
		'dataset': {
			title: 'Web accessibility status',
			values:[25, 3 , 10, 7],
			colorset: ['#2EB400', '#2BC8C9', "#666666", '#f09a93'],
			fields: ['A', 'B',  'C', 'D'],
		},
		'donut_width' : 85,
		'core_circle_radius':0,
		'chartDiv': 'Nwagon',
		'chartType': 'pie',
		'chartSize': {width:700, height:400}
	};
	Nwagon.chart(options);
</script>	

View Example

Donut Chart Example Pie Chart Example

Polar Area Chart

The polar area chart is similar to a pie chart except the radius of sectors are different but the angles of sectors are the same within a section. In a usual pie chart, a radius of an angle represents the corresponding value of the sector but in a polar area chart, the value of a sector is reflected by how far it is extended from the center of the circle. The polar area chart can be useful to display cyclic phenomena.

JSON syntax

 
  • legend: JSON object with key: value pairs
    • names: set of arrays of string values where number of array is used to divide sections.
  • dataset: JSON object with key: value pairs
    • title: title of the chart
    • values: set of arrays of values whose size and dimension need to match the ‘names’
    • colorset: array of string values in HEX for each section
    • fields: array of string values which is used to represent big sections
    • opacity: alpha values to apply for each data range
  • core_circle_radius: core radius (optional)
  • core_circle_value: value to insert into the core circle (optional)
  • maxValue: maximum possible value
  • increment: value to determine the intervals of background circles
  • chartDiv: ID of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'legend':{
			names: [['A-a'], ['B-a', 'B-b', 'B-c'], ['C-a',  'C-b', 'C-c', 'C-d']]
		},
		'dataset': {
			title: 'Web accessibility status',
			values: [[60], [50, 100, 67], [90, 70, 44, 88]],
			colorset: ['#2EB400', '#2BC8C9', "#666666"],
			fields: ['A', 'B', 'C'],
			opacity:[0.3, 0.5, 0.7, 0.9]
		},
		'core_circle_value' : ['72.7%'],
		'core_circle_radius':30,
		'maxValue' : 100,
		'increment' : 20,
		'chartDiv': 'Nwagon',
		'chartType': 'polar',
		'chartSize': {width:700, height:400}
	};
	Nwagon.chart(options);
</script>	

View Example

Polar Area Chart Example

Polar Pie Chart

The polar pie chart is a variation of polar area chart where the degree of each sector is proportion to the quantity while the radius of the sector is proportion to what it represents. For example, if one needs to visualize the average bill paid by patients per hospital in a certain area, the polar pie chart can be extremely useful. The angle of each sector is determined by the numbers of patients of each hospital and the radius will be given by the average bill.

JSON syntax

  • legend: JSON object with key: value pairs
    • names: set of arrays of string values where number of array is used to divide sections
  • dataset: JSON object with 6 key: value pairs
    • title: title of the chart
    • values: set of arrays of values whose size and dimension need to match the ‘names’
    • degree_values: array of numbers that is used to determine the degree of each sector
    • colorset: array of string values in HEX for each section
    • fields: array of string that is used to label each section (optional)
    • opacity: array of float (<1) that is used to assign alpha values of sectors.
  • core_circle_radius: core radius (optional)
  • core_circle_value: value to insert into the core circle (optional)
  • maxValue: maximum possible value
  • increment: value to determine the intervals of background circles
  • chartDiv: ID of <div> in which the chart will be drawn
  • chartType: string value of chart type
  • chartSize: JSON object with the width and the height of a viewport

Code Example

<div id="Nwagon"></div>
<script>
	var options = {
		'legend':{
			names: [['A'], ['B'], ['C']]
		},
		'dataset': {
			title: 'Avg Bill Paid',
			values: [[32],[78],[42]],
			degree_values:[510, 180, 310],
			colorset: ['#2EB400', '#2BC8C9', "#666666"],
			fields: ['A', 'B',  'C'],
			opacity:[0.9]
		},
		'core_circle_value' : ['50.6%'],
		'core_circle_radius':25,
		'maxValue' : 100,
		'increment' : 20,
		'chartDiv': 'Nwagon',
		'chartType': 'polar_pie',
		'chartSize': {width:700, height:400}
	};
	Nwagon.chart(options);
</script>	

View Example

Polar Pie Chart Example

Applied Sites


N-WARS (NHN Web Accessibility Reporting System)


Dashboard

Applied Sites Example1
Report Summary

Applied Sites Example2

Release Note

Version 1.1.1

Apr. 9, 2014

Features and Changes

  • Added an option to draw a tooltip guideline for line type of charts (Line, Area, Comparison charts)
  • Added an option to apply user-defined min-value on y coordinate for line type of charts

Version 1.1.0

Feb. 1, 2014

Features and Changes

  • Released VML based Nwagon Chart Library for IE <=8
  • Applied dimmed background on Radar chart for IE <=8
  • Added VML based radar chart (IE <=8)
  • Added VML based Comparison (Jira) chart (IE <=8)
  • Added VML based Polar, Polar_pie, Single, Multi and Stacked Column, Line, Area, Donut, Pie chart (IE <=8)
  • Added demo samples file
  • Added option to set left, right, top, bottom offset values for line and column type of charts

Version 0.1.2

Jan. 15, 2014

Features and Changes

  • Released Nwagon Library with no JQuery
  • Removed usage of JQuery library from Nwagon in order to minimize file size and boost performance
  • Added unique chart types (Polar, Polar pie and Comparison chart)
  • Added Donut and Pie chart
  • Added Multi-column chart
  • Completed Stacked column prototype
  • Changed the format of dataset for radar chart
  • Modified JSON object's key and value set as to remove unnecessarily repeated bites from dataset

Version 0.1.0

May. 17, 2013

Features and Changes

  • Released NWagon beta version with Radar Chart, Line Chart and Single Column Chart
  • Renamed chart library from sPider chart to NWagon chart and the corresponding namespace, filenames, CSS class names and more
  • Fixed multiple design, calculation details
  • Prevent memory leak (in IE) by removing circular reference
  • Added feature to apply user-defined colors to the columns depending on the range of the value
  • Modified viewport and background area in order to include labels and y-coordinates
  • Added labels and y-coordinates    changed function parameters of ‘createChartArea’
  • Modified column width calculation
  • Assigned class name to SVG element according to its chart type
  • Fixed "getMax" as to retrieve the highest value from multi-dimensional array
  • Updated drawBackground function to reflect colWidth based on the number of data provided
  • Created 'radar'   'column' objects
  • Added a variable to disable tooltips when there are more than one foreground polygons (radar chart)
  • Added feature to draw multiple foreground polygons with only one background(2013.5.16)
  • Added chart object inside sPider object.(be careful with 'this' and the function calls) (2013.5.2)
  • Added "chartSize" option to apply user-defined size
  • Changed name space from "nChart" to "sPider" (2013.5.2)
  • Multi printing support. Now we can generate any number of charts in a single html page
  • Added copyright
  • Fixed z-index so that x-coordinates would be located beneath polygon's vertices   tooltips
  • Added 'href' index to dataset option
  • Removed inline element tags from html
  • Added a CSS file in order to make a library bundle
  • Cleaned up some of the headaches (removed repeated background svg elements, changed the way to dim the background for non applicable items...)
  • Added a temporary namespace called nChart
  • Added a feature to dimmed background when the value is non-applicable on a Radar chart
  • Changed look   feel
  • Added event listener to vertex to show and hide tooltip
  • Added drawLabels function
  • Added function to draw polygon background
  • Chart library development initiated