Chartinator

Posted on by Admin

About Chartinator

Chartinator – Google Charts made easier and accessible.

 

Chartinator is an open source jQuery plugin that transforms HTML tables, Google Sheets and JavaScript arrays into charts using Google Chart

Demo

Visit chartinator.com to view a demo

Current Features

Chartinator currently supports the following:

  • Creation of the following chart types using Google Charts
    • Bar Chart
    • Pie Chart
    • Column Chart
    • Calendar
    • Geo Chart
    • Table Chart with data column formatter
  • Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays
  • Accessible data – Using HTML tables as data sources makes data accessible to screen readers and searchbots
  • Showing and hiding of HTML tables accessibly
  • Manipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays
  • Transposition of data – swapping of rows and columns
  • Resizing of charts on screen resize – Responsive Web Design
  • Chart aspect ratio control
  • Customization of chart tooltips and annotations
  • Customization of all Google Chart options – Fonts, colors, chart formatting, etc.

Using Data from HTML Tables and Google Sheets

Chartinator is designed to extract data from HTML tables and Google Sheets. Simply create an HTML table or Google Sheet with the data you want to chart and configure Chartinator to use the table or sheet.

You can also use arrays of JavaScript data to augment and replace the data extracted from the table or sheet.

The Chartinator Git repo is available on Github at: github.com/jbowyers/chartinator

miSlider

Posted on by Admin

Multi-item Slider or miSlider is an open-source jQuery slider plugin specifically designed for displaying multiple images or slides of content. The slider can be configured to display one slide at a time, as many slides as possible or anything in between.

Demos

Visit the miSlider website for demos – www.mislider.com

Highlights

  • Easy to use
  • Supports one or more slides on screen
  • Slides can be single images or complex HTML
  • Lightweight
  • Only requires jQuery core
  • Responsive – Can automatically calculate the number of
    slides that fit on screen
  • Easily customizable
  • Callbacks for slider events
  • Cross-Browser Support – Supports IE8+
  • Supports More than 1 slider per page

Full list of Options

The following are setting that can be customized:

  • Speed of the slide transition
  • Slide pause time between transitions
  • Number of slides to increment
  • Height of the slider
  • Number of slides visible on screen at one time
  • Continuous motion – Slides loop continuously
    in one direction
  • Location of the current slide on screen –
    left, center, right
  • Slide to start on.
  • Width of the current slide
  • Scaling factor of the current slide –
    Other slides are scaled down.
  • Vertical offset of the slide center –
    Useful when slide images are not in the
    center of the slide
  • Center slide contents vertically –
    Centers oversized slides vertically
  • Enable & disable Navigation Dots
  • Enable & disable Arrow Buttons
  • Arrow Buttons transparency
  • Randomize the order of the slides
  • Slides loaded callback function
  • Slide transition before callback function
  • Slide transition complete callback function
  • CSS class name that will be
    applied to the Stage element
  • CSS class name that will be
    applied to the Slider element
  • CSS class name that will be
    applied to each Slide element
  • CSS class name that will be
    applied to Arrow Buttons element
  • CSS class name that will be
    applied to the Navigation Dots element
  • Selector used to select the Slider element
  • Selector used to select each Slide element

Download Source

Visit miSlider on GitHub

Responsive Menu

Posted on by Admin

jQuery Responsive Menu is a drop-down menu for responsive websites. It is a jQuery plugin that includes a JavaScript file and CSS file as well as sample HTML.

Demo

Visit responsive-menu.com to view a responsive demo

Features

Theme class options

Options: rm-lighten, rm-darken.
rm-lighten theme lightens menu item backgrounds and is best used if your design requires a dark menu background color.
rm-darken theme darkens menu item backgrounds and is best used if your design required a light menu background color.
You can set the menu background color to any color to work with the chosen theme.

jQuery Plugin Options

  • minWidth – Minimum width for expanded layout in pixels – String
  • transitionSpeed – The opening and closing speed of the menus in milliseconds
  • jqueryEasing – The jQuery easing function – used with jQuery transitions
  • css3Easing – The CSS3 transitions easing function – used with CSS3 transitions
  • toggleBtnBool – Use button as Toggle Link – instead of text
  • toggleSel – The Toggle Link selector
  • containerClass – The class the plugin adds to the container of the nav element
  • topMenuClass – The class the plugin adds to the top menu element
  • parentClass – The class applied to menu items that contain a sub-menu
  • expandedClass – The class applied to container element to trigger expanded layout
  • contractedClass – The class applied to container element to trigger contracted layout
  • animateClass – Use CSS3 animation/transitions class name
  • accelerateClass – Force GPU Acceleration class name
  • developmentMode – Use development mode – outputs information to console

Dependencies

jQuery, Modernizr (optional)

Task Managers

Gruntfile.js and package.json files are included for using Grunt.