#css animation bar

New Post has been published on http://www.htmluse.com/chartist-js-simple-responsive-charts/

Chartist.js - Simple responsive charts

Download Demo

Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:

not responsive

use the wrong technologies for illustration (canvas)

are not flexible enough while keeping the configuration simple

are not friendly to your own code

are not friendly to designers

have unnecessary dependencies to monolithic libraries

more annoying things

What is it made for?

Chartist’s goal is to provide a simple, lightweight and non-intrusive library to responsive craft charts on your website. It’s important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing a own solution to the problem which is is already solved by the standard. We need to leverage the power of the browsers today and say good bye to the idea of solving all problems ourselves.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist is not providing it’s own event handling, labels, behaviors and anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing “Simple responsive Charts” using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.

  1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="bower_components/chartist/libdist/chartist.min.css"> <script src="bower_components/chartist/libdist/chartist.min.js">

2. HTML

<div class="ct-chart ct-perfect-fourth"></div>

3. JAVASCRIPT

var data = // A labels array that can contain any sort of values labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], // Our series array that contains series objects or in this case series data arrays series: [ [5, 2, 4, 2, 0] ] ; // In the global name space Chartist we call the Line function to initialize a line chart // As a first parameter we pass in a selector where we would like to get our chart created // Second parameter is the actual data object Chartist.Line('.ct-chart', data);

4. OPTIONS

var options = // Don't draw the line chart points showPoint: false, // Disable line smoothing lineSmooth: false, // X-Axis specific configuration axisX: // We can disable the grid for this axis showGrid: false, // and also don't show the label showLabel: false , // Y-Axis specific configuration axisY: // Lets offset the chart a bit from the labels offset: 40, // The label interpolation function enables you to modify the values // used for the labels on each axis. Here we are converting the // values into million pound. labelInterpolationFnc: function(value) return '£' + value + 'm'; ; // All you need to do is pass your configuration as third parameter to the chart function Chartist.Line('.ct-chart', data, options);

5. RESPONSIVE SETTING OVERRIDES

Configuring different chart behavior for various media is made simple with an override mechanism. The priority of the override mechanism is based on order of specification of the matching media queries.

The following example uses different label interpolations (to save some space) on small media as well as different spacing between the bars of the bar chart series. Resize your browser window to see the effect.