Limitless - Responsive Web Application Kit by Eugene Kopyov

Navigation

Vector maps

Maps /maps/jvectormap/

Overview

jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. It provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels and tooltips.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/maps/jvectormap/jvectormap.min.js"></script>

<!-- Load map(s) -->
<script src="../../../../global_assets/js/plugins/maps/jvectormap/map_files/world.js"></script>

Create element with attributes:

// Basic markup
<div class="map-container map-world"></div>

Finally call the plugin via JavaScript:

// World map
$('.map-world').vectorMap({
    map: 'world_mill_en',
    backgroundColor: 'transparent',
    regionStyle: {
        initial: {
            fill: '#93D389'
        }
    }
});

Plugin options

Option	Type	Description
`map`	String	Name of the map in the format `territory_proj_lang` where `territory` is a unique code or name of the territory which the map represents (ISO 3166 standard is used where possible), `proj` is a name of projection used to generate representation of the map on the plane (projections are named according to the conventions of proj4 utility) and `lang` is a code of the language, used for the names of regions
`backgroundColor`	String	Background color of the map in CSS format
`zoomOnScroll`	Boolean	When set to true map could be zoomed using mouse scroll. Default value is `true`
`zoomOnScrollSpeed`	Boolean	Mouse scroll speed. Number from `1` to `10`. Default value is `3`
`panOnDrag`	Boolean	When set to `true`, the map pans when being dragged. Default value is `true`
`zoomMax`	Number	Indicates the maximum zoom ratio which could be reached zooming the map. Default value is `8`
`zoomMin`	Number	Indicates the minimum zoom ratio which could be reached zooming the map. Default value is `1`
`zoomStep`	Number	Indicates the multiplier used to zoom map with +/- buttons. Default value is `1.6`
`zoomAnimate`	Boolean	Indicates whether or not to animate changing of map zoom with zoom buttons
`regionsSelectable`	Boolean	When set to `true` regions of the map could be selected. Default value is `false`
`regionsSelectableOne`	Boolean	Allow only one region to be selected at the moment. Default value is `false`
`markersSelectable`	Boolean	When set to `true` markers on the map could be selected. Default value is `false`
`markersSelectableOne`	Boolean	Allow only one marker to be selected at the moment. Default value is `false`
`regionStyle`	Object	Set the styles for the map's regions. Each region or marker has four states: `initial` (default state), `hover` (when the mouse cursor is over the region or marker), `selected` (when region or marker is selected), `selectedHover` (when the mouse cursor is over the region or marker and it's selected simultaneously)
`regionLabelStyle`	Object	Set the styles for the regions' labels. Each region or marker has four states: `initial` (default state), `hover` (when the mouse cursor is over the region or marker), `selected` (when region or marker is selected), `selectedHover` (when the mouse cursor is over the region or marker and it's selected simultaneously)
`markerStyle`	Object	Set the styles for the map's markers. Any parameter suitable for `regionStyle` could be used as well as numeric parameter `r` to set the marker's radius
`markerLabelStyle`	Object	Set the styles for the markers' labels
`markers`	Object \| Array	Set of markers to add to the map during initialization. In case of array is provided, codes of markers will be set as string representations of array indexes. Each marker is represented by `latLng` (array of two numeric values), `name` (string which will be show on marker's tip) and any marker `styles`
`series`	Object	Object with two keys: `markers` and `regions`. Each of which is an array of series configs to be applied to the respective map elements
`focusOn`	Object \| String	This parameter sets the initial position and scale of the map viewport
`labels`	Object	Defines parameters for rendering static labels. Object could contain two keys: `regions` and `markers`. Each key value defines configuration object with the following possible options: `render` (function) and `offsets` (Object \| Function)
`selectedRegions`	Array \| Object \| String	Set initially selected regions
`selectedMarkers`	Array \| Object \| String	Set initially selected markers
`onRegionTipShow`	Function	(Event e, Object tip, String code). Will be called right before the region tip is going to be shown
`onRegionOver`	Function	(Event e, String code). Will be called on region mouse over event
`onRegionOut`	Function	(Event e, String code). Will be called on region mouse out event
`onRegionClick`	Function	(Event e, String code). Will be called on region click event.
`onRegionSelected`	Function	(Event e, String code, Boolean isSelected, Array selectedRegions). Will be called when region is (de)selected. `isSelected` parameter of the callback indicates whether region is selected or not. `selectedRegions` contains codes of all currently selected regions
`onMarkerTipShow`	Function	(Event e, Object tip, String code). Will be called right before the marker tip is going to be shown
`onMarkerOver`	Function	(Event e, String code). Will be called on marker mouse over event
`onMarkerOut`	Function	(Event e, String code). Will be called on marker mouse out event
`onMarkerClick`	Function	(Event e, String code). Will be called on marker click event
`onMarkerSelected`	Function	(Event e, String code, Boolean isSelected, Array selectedMarkers). Will be called when marker is (de)selected. `isSelected` parameter of the callback indicates whether marker is selected or not. `selectedMarkers` contains codes of all currently selected markers
`onViewportChange`	Function	(Event e, Number scale). Triggered when the map's viewport is changed (map was panned or zoomed)

Plugin info

Property	Description
File name	jvectormap.min.js
Location	global_assets/js/plugins/maps/jvectormap/
Links	Official plugin website Full documentation Github project page

D3.js library

Charts /visualization/d3/

Overview

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Introduction

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load library -->
<script src="../../../../global_assets/js/plugins/visualization/d3/d3.min.js"></script>

<!-- Load tooltip -->
<script src="../../../../global_assets/js/plugins/visualization/d3/d3_tooltip.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart" id="d3-streamgraph"></div>
</div>

<!-- With minimum width and scrolling -->
<div class="chart-container has-scroll">
	<div class="chart has-minimum-width" id="d3-waterfall"></div>
</div>

Basically there's nothing to call in JS. You just need to create a chart using D3.js API and attach to the DOM element.

Selections

Modifying documents using the W3C DOM API is tedious: the method names are verbose, and the imperative approach requires manual iteration and bookkeeping of temporary state. For example, to change the text color of paragraph elements:

// Selection example
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
	var paragraph = paragraphs.item(i);
	paragraph.style.setProperty("color", "white", null);
}

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

// Selection example
d3.selectAll("p").style("color", "white");

Yet, you can still manipulate individual nodes as needed:

// Selection example
d3.select("body").style("background-color", "black");

Selectors are defined by the W3C Selectors API and supported natively by modern browsers. Backwards-compatibility for older browsers can be provided by Sizzle. The above examples select nodes by tag name ("p" and "body", respectively). Elements may be selected using a variety of predicates, including containment, attribute values, class and ID.

D3 provides numerous methods for mutating nodes: setting attributes or styles; registering event listeners; adding, removing or sorting nodes; and changing HTML or text content. These suffice for the vast majority of needs. Direct access to the underlying DOM is also possible, as each D3 selection is simply an array of nodes.

Dynamic properties

Readers familiar with other DOM frameworks such as jQuery or Prototype should immediately recognize similarities with D3. Yet styles, attributes, and other properties can be specified as functions of data in D3, not just simple constants. Despite their apparent simplicity, these functions can be surprisingly powerful; the d3.geo.path function, for example, projects geographic coordinates into SVG path data. D3 provides many built-in reusable functions and function factories, such as graphical primitives for area, line and pie charts.

For example, to randomly color paragraphs:

// Selection example
d3.selectAll("p").style("color", function() {
	return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

// Selection example
d3.selectAll("p").style("color", "white");

To alternate shades of gray for even and odd nodes:

// Selection example
d3.selectAll("p").style("color", function(d, i) {
	return i % 2 ? "#fff" : "#eee";
});

Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions. With the default join-by-index, the first element in the data array is passed to the first node in the selection, the second element to the second node, and so on. For example, if you bind an array of numbers to paragraph elements, you can use these numbers to compute dynamic font sizes:

// Selection example
d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

Once the data has been bound to the document, you can omit the data operator; D3 will retrieve the previously-bound data. This allows you to recompute properties without rebinding.

Enter and Exit

Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.

When data is bound to a selection, each element in the data array is paired with the corresponding node in the selection. If there are fewer nodes than data, the extra data elements form the enter selection, which you can instantiate by appending to the enter selection. For example:

// Enter and exit
d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
	.enter().append("p")
		.text(function(d) { return "I’m number " + d + "!"; });

Updating nodes are the default selection—the result of the data operator. Thus, if you forget about the enter and exit selections, you will automatically select only the elements for which there exists corresponding data. A common pattern is to break the initial selection into three parts: the updating nodes to modify, the entering nodes to add, and the exiting nodes to remove.

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

By handling these three cases separately, you specify precisely which operations run on which nodes. This improves performance and offers greater control over transitions. For example, with a bar chart you might initialize entering bars using the old scale, and then transition entering bars to the new scale along with the updating and exiting bars.

D3 lets you transform documents based on data; this includes both creating and destroying elements. D3 allows you to change an existing document in response to user interaction, animation over time, or even asynchronous notification from a third-party. A hybrid approach is even possible, where the document is initially rendered on the server, and updated on the client via D3.

Handling transitions

D3’s focus on transformation extends naturally to animated transitions. Transitions gradually interpolate styles and attributes over time. Tweening can be controlled via easing functions such as “elastic”, “cubic-in-out” and “linear”. D3’s interpolators support both primitives, such as numbers and numbers embedded within strings (font sizes, path data, etc.), and compound values. You can even extend D3’s interpolator registry to support complex properties and data structures.

For example, to fade the background of the page to black:

// Transition example
d3.select("body").transition()
    .style("background-color", "black");

Or, to resize circles in a symbol map with a staggered delay:

// Transition example
d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

By modifying only the attributes that actually change, D3 reduces overhead and allows greater graphical complexity at high frame rates. D3 also allows sequencing of complex transitions via events. And, you can still use CSS3 transitions; D3 does not replace the browser’s toolbox, but exposes it in a way that is easier to use.

Complete D3.js documentation

All D3.js features and API are completely explained in online library documentation. Also you'll find a full API documentation on Github project page. Also check out gallery with examples. Please use these links for a full documentation. Below you'll find additional links related to D3.js library

Plugin info

Property	Description
File name	d3.min.js, d3_tooltip.js, venn.js
Location	global_assets/js/plugins/visualization/d3/
Links	Official plugin website Full documentation Demonstration Github project page

C3.js library

Charts c3.min.js

Overview

C3.js is a D3-based reusable chart library that enables deeper integration of charts into web applications. C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. C3 provides a variety of APIs and callbacks to access the state of the chart. By using them, you can update the chart even after it's rendered.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load D3.js library -->
<script src="../../../../global_assets/js/plugins/visualization/d3/d3.min.js"></script>

<!-- Load C3.js  -->
<script src="../../../../global_assets/js/plugins/visualization/c3/c3.min.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart" id="c3-line-chart"></div>
</div>

Generate chart

C3 generates a chart by calling generate() with the argument object, and an element including the chart will insert into the element specified as a selector in that argument as bindto. Prepare the element to bind the chart and call generate() with arguments:

// Generate chart
var chart = c3.generate({
    bindto: '#c3-line-chart',
    data: {
		columns: [
			['data1', 30, 200, 100, 400, 150, 250],
			['data2', 50, 20, 10, 40, 15, 25]
		]
    }
});

Complete C3.js documentation

All C3.js features and API are completely explained in online library documentation and Getting started section. Also you'll find a forums on Google Group pages. Also check out examples explained. Please use these links for a full documentation. Below you'll find additional links related to C3.js library

Plugin info

Property	Description
File name	c3.min.js
Location	global_assets/js/plugins/visualization/c3/
Links	Official plugin website Full documentation Demonstration Github project page

Echarts library

Charts visualizatoin/echarts/

Overview

ECharts (Enterprise Charts), written in pure JavaScript and based on ZRender (a whole new lightweight canvas library), is a comprehensive charting library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It works with all your web and mobile applications, including IE6/7/8/9/10/11, Chrome, Firefox, Safari and Opera. With original features like Drag-Recalculate, Data View and Scale Roaming, ECharts lets you mine and integrate data in ways you didn't think possible.

ECharts currently supports the following tpes: line (area), column (bar), scatter (bubble), pie (doughnut), radar (filled radar), candlestick, chord, gauge, funnel, map, eventRiver, calendar, force-directed chart etc. Each and every chart is equipped with 7 interactive components: title, tooltip, legend, scale, data area, timeline, and toolbox. Many of these components and charts can be combined in one chart.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load Echarts library -->
<script src="../../../../global_assets/js/plugins/visualization/echarts/echarts.min.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart has-fixed-height" id="basic_lines"></div>
</div>

Basically there's nothing to call in JS. You just need to create a chart using echarts.js API and attach to the DOM element.

Complete ECharts library documentation

All ECharts library features and API are completely explained in online library documentation. Also check out examples with description or template pages. Also on official website you can find features with images and descriptions. Please use these links for a full documentation. Below you'll find additional links related to echarts.js library.

By default, Limitless template includes a default theme called limitless.js, located in echarts/theme/ folder. You can use it as a base if you need to adjust theme elements and styles to your needs, all default styling options are located in this file.

Plugin info

Property	Description
File name	echarts.min.js
Location	global_assets/js/plugins/visualization/echarts/
Links	Official plugin website Full documentation Demonstration Github project page

Google Charts library

Charts

Overview

Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types. The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a <div> with that id to display the Google Chart.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load the AJAX API -->
<script src="https://www.google.com/jsapi"></script>

Add element with attributes:

<!-- Div that will hold the pie chart -->
<div class="chart-container">
	<div class="chart" id="google_pie_chart"></div>
</div>

Add element with attributes:

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
	['Mushrooms', 3],
	['Onions', 1],
	['Olives', 1],
	['Zucchini', 1],
	['Pepperoni', 2]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
               'width':400,
               'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('google_pie_chart'));
	chart.draw(data, options);
}

Complete Google Charts documentation

Google Charts library has a very detailed online documentation. It includes all possible chart types with examples and a complete list of options for each chart type. Also you can find there a full API reference. Also Google Charts library has a great Google Groups community where you can ask questions and browse already resolved issues. Please use these links for a full documentation. Below you'll find additional links related to Google Charts library.

Plugin info

Property	Description
Links	Official website Full documentation API reference Google Groups Github issue tracker

Limitless - Visualization

Vector maps

Overview

Usage

Plugin options

Plugin info

D3.js library

Overview

Introduction

Usage

Selections

Dynamic properties

Enter and Exit

Handling transitions

Complete D3.js documentation

Plugin info

C3.js library

Overview

Usage

Generate chart

Complete C3.js documentation

Plugin info

Echarts library

Overview

Usage

Complete ECharts library documentation

Plugin info

Google Charts library

Overview

Usage

Complete Google Charts documentation

Plugin info