#chartist.js

Chartist.js software is another tool that helps in creating simple and responsive charts. Charts made from this tool are highly cross-browser compatible and customizable. If you want to read more information, please visit our website.

.btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: Arial; color: #ffffff !important; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; color: #ffffff !important; } .conts img{max-width:500px;} .conts a.but{margin-bottom:15px;} .conts a.btn{margin-bottom:25px; display:block;} .conts a.btn:first-child{background:none;border:0;}

Download Now

Warning!!!

You need to reload live preview page than .json fill will be downloaded

Version 1.0

Test template

It is the test template consists of 10 questions.The feature of the test is that it can calculate your score and build the bord of graphsThis board shows two graphs. The first of them shows in amber points correct answers, one to four, according to the Y axis. And the X axis shows what question complies with the answer. The second graph (light red) shows what the answers are user selectable from 1 to 4. If the answer is not selected, then the value of the Y axis is 0.In those parts where the graphs points are the same, user answered correctly. Also,there is timer in test on 15 minutes.You can toggle the questions on top bookmarks. Also it is the button to restart test.If you answered on all questions test will be automatically completed.If you know web programming you can easily change color spectrum of the test,arrays of questions,options and array of right answers.

Version 1.2

Fixed some bugs.The test looks better,than in last version.

Version 1.3

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.