#batman#dc comics#bruce wayne#dc#dc fanart#tim drake#dick grayson#batfamily#batfam
seen from Greece
seen from United Kingdom
seen from Philippines
seen from Türkiye
seen from Italy
seen from United States
seen from United Kingdom
seen from Russia
seen from United Kingdom
seen from United Kingdom
seen from Saudi Arabia
seen from United States
seen from United Kingdom
seen from United States
seen from United States
seen from United Kingdom
seen from China
seen from United Kingdom
seen from Argentina
seen from Italy
Weekly trending JavaScript repositories
Meet the next portion of the most popular JavaScript GitHub repositories this week. There are many interesting frameworks, platforms, elements, solutions, and libraries you have to know about. Explore weekly trending JavaScript repositories with Syndicode! Latest trending JavaScript...
Weekly trending JavaScript repositories
Meet the next portion of the most popular JavaScript GitHub repositories this week. There are many interesting frameworks, platforms, elements, solutions, and libraries you have to know about. Explore weekly trending JavaScript repositories with Syndicode! Latest trending JavaScript...
New Post has been published on Html Use
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.
var data = labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], series: [ [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8], [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4] ] ; var options = seriesBarDistance: 15 ; // You can define a responsive settings array that consists of settings arrays containing a media query as first element followed by a regular Chartist.js settings object. We recommend that you store your media queries somewhere centrally and use them wherever required. var responsiveOptions = [ // The first responsive setting is for medium / large media only ['screen and (min-width: 641px) and (max-width: 1024px)', seriesBarDistance: 10, axisX: labelInterpolationFnc: function (value) return value; ], // These settings will only be applied to small media ['screen and (max-width: 640px)', seriesBarDistance: 5, axisX: labelInterpolationFnc: function (value) return value[0]; ] ]; // In addition to the regular options we pass in our responsive options array as 4th parameter Chartist.Bar('.ct-chart', data, options, responsiveOptions);
