background preloader

Morris.js

Morris.js
Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href=" <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>4 <script src=" If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site. Your first chart Start by adding a <div> to your page that will contain your chart. Note: in order to display something, you’ll need to have given the div some dimensions. Next add a <script> block to the end of your page, containing the following javascript code: Assuming everything’s working correctly, you should see the following chart on your page: What Next? Check out the rest of the documentation: License Simplified BSD License: Related:  Plugins

Zoomooz.js Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on. You can also add some additional attributes for tuning the animation as data fields of the element: <div class="zoomTarget" data-targetsize="0.45" data-duration="600">This element zooms when clicked on. Target 1 Target 2 Target 3 Target 4

How to Select / Deselect All Checkboxes using jQuery If you are newbie developer and looking for a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in Gmail), here’s one that might be useful for your HTML form. I’ve used this one in various occasions and it has proved to be very consistent every time. As you can see in the picture below, we have multiple checkboxes, and we want toggle the select state of checkboxes when we click “Select All” box. What happens in this code is when user clicks “Select All” checkbox, the code first checks the status of checkbox with id “selecctall”, and loops thought each checkbox with class “checkbox1″ and applies “selecctall” checkbox status to all other checkboxes. The jQuery code: The HTML : Demo Selecct All This is Item 1 This is Item 2 This is Item 3 This is Item 4 This is Item 5 This is Item 6 Do not select this Related Articles: Saran Chamling.

scroll kit Bootstrap Date/Time Picker Introduction Simple date/time picker component based on the work of Stefan Petre, with contributions taken from Andrew Rowls and jdewit. Demo Code: Similar to above example, but in US date/hour format: Disables date picker: Disables time picker: The widget class provides 4 methods to manipulate dates: ‘getDate’/’setDate’ for working with UTC and ‘getLocalDate’/’setLocalDate’ for working with local dates: // Considering you are on a GMT-3 timezone and the input contains '2000-01-17 10:00'var localDate = picker.getLocalDate(); // localDate === 2000-01-17 07:00var utcDate = picker.getDate(); // utcDate === 2000-01-17 10:00//picker.setLocalDate(new Date(1998, 10, 11, 4, 30)); // input === 1998-10-11 07:30picker.setDate(new Date(Date.UTC(1998, 10, 11, 4, 30))); // input === 1998-10-11 04:30 The date value can be unset by passing ‘null’ to any of the ‘set’ methods or by erasing the input: The only event exposed is ‘changeDate’, which will expose ‘date’ and ‘localDate’ properties on the event object:

Planetary.js - des globes en 3D via D3.js Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js. Basic Globe It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves! plugins: earthd3: projections Rotating Globe with Pings If there's one thing that's better than a globe, it's a globe that rotates. plugins: earth, pings, drag, zoomcustom pluginsd3: projections 2013 Seismic Activity Visualization A visualization of 2013 seismic activity. plugins: earth, pings, drag, zoomcustom pluginsd3: projections, scales, selections, events, external data Dan Grossman | A Date Range Picker for Twitter Bootstrap While developing Improvely, having all the components of Twitter Bootstrap at hand pre-styled was a great time saver. I was in need of a dropdown menu to choose date ranges for reports, and wanted something that would match the existing dropdown and button styles of Bootstrap: thus came about this date range picker component. Download it at GitHub. For basic use cases like collecting event or reservation dates, you can attach it to a text input to pop up two clickable calendars to choose dates from. For more advanced use cases, you can attach a date range picker to any element, pre-define your own date ranges for the user to choose from, and set a custom callback function to receive the chosen dates. In 2013, the Date Range Picker was updated with many new options, including a time picker, min/max dates and max range, localization of all buttons/labels, dropdowns to jump between months/years and more. Usage: The examples below show how to use the (optional) options and callback parameters.

Bilan de la datavisualisation en 2013 2013 was another exciting year for visualization. Between many new developments in data storytelling, a new wave of news graphics, new visualization blogs, better automated infographics, and visuals designed to hit you hard, it is difficult to decide what was most important. Here is a look back, and some ideas about where we’re going. Storytelling If there was a topic that clearly left its mark on 2013, it’s storytelling. Coming from me, this may not be a big surprise – after all, I predicted this at the beginning of the year. First, the academic world. Will this continue? Then, there are the conferences. 2013 saw the first Tapestry conference, a conference specific to storytelling with data; its second incarnation is just over a month away. And finally, products. I don’t see any of this losing steam, quite the opposite. 2014 is the year when a large number of people will have access to these new tools for the first time, and will start building stories. Automated Infographics

40 Awesome jQuery Plugins You Need to Check Out Scrolling jQuery Waypoints Waypoints allows you to easily trigger JavaScript events at specific scroll points. Ever wonder how people build those amazing scrolling effects? This could be your answer. skrollr Parallax scrolling for the masses. Charts, Animations & Tables Handsontable A minimalistic approach to an Excel-like table editor in HTML & jQuery. jQuery Sparklines jQuery Sparklines helps you build little inline charts that are supplied with information via HTML or JavaScript. Teamwork Gantt Build incredible Gantt charts with jQuery. DataTables A jQuery plugin for creating impressive, highly functional data tables. arbor.js Build crazy looking, futuristic, animated and modular graphs. Layout Wookmark jQuery Plugin Easily build a Msonry-like layout like the one seen on Wookmark. jQuery Masonry The original jQuery Masonry. Isotope An amazing layout plugin that allows for intelligent and dynamic grids of items that can be easily sorted and filtered. FitVids.JS gridster.js Freetile.js Text Jeditable

Owl Carousel 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. 2. Set up your HTML You don't need any special markup. <div id="owl-example" class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> ... 3. Now call the Owl initializer function and your carousel is ready. $(document).ready(function() { $("#owl-example").owlCarousel();});

10 Free Code Snippets for Creating CSS Content Cards CSS content cards are a great way to organize listings of blog posts, products, services or just about any repetitive content. When well-designed, each individual card can stand out from the list and is easy to read. The use of additional effects like hover states and image filters can enhance things ever further. Here are 10 examples of CSS content cards that are both beautiful and functional. The Web Designer ToolboxUnlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets Material Design – Responsive Card These cards feature Google’s Material Design principles and are gorgeously interactive. See the Pen Material Design – Responsive card by David Foliti. Google Now Inspired Flip Cards Inspired by the information shared in the Google Now personal assistant, each card features a dramatic drop-shadow effect and “flips” upon click or touch to reveal more content. See the Pen Google Now Inspired Flip Cards by Ettrics. Parallax Depth Cards Product Card Article News Card Blog Cards

Related: