Tag Archive | Jquery plugin

JQuery Horizontal Bar Chart Plugin

This is a very simple bar chart plugin using unordered lists and divs. You can populated the data either statically using data-dash attributes for the

  • items or you can add it inline in the data: option of the plugin. If you use the data-dash attributes the plugin assumes that it takes priority and overrides the data: option of the plugin. The plugin allows you to easily change css styles for the auto generated
  • ,
    and elements it creates. This is a very simple plugin with a handful of options. If you are looking for something really comprehensive this probably isn’t it. The purpose of this plugin is to quickly make a simple bar graph that shows a percentage based on some calculation. Essentially the value you supply for the bar is calculated against the size of the bar (either specified or auto generated based on element width). Obviously this could be extended quite a bit and rather easily so have at it. The reason I created this plugin is that the majority of the chart type plugins out there are far more complicated than I needed for this simple task. Hence the focus was to keep it as simple as possible while providing a handful of anticipated options for reuse in projects. The plugin does provide the ability to callback.

    Download: DOWNLOAD

    Below is an example of what it might look like.
    Quickbar Example

    First add some css. Again you can change the css style names to your liking in the plugin.


    .quickbar { padding: 0px; margin: 0px; list-style: none; } /* this is the actual ul */
    .quickbar li { padding: 5px 0px 5px 0px;}
    .quickbar-container { background-color: #F3F3F3; display: block; line-height: 20px; overflow: hidden; border: 1px solid #EAEAEA;
    border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; } /* this is the wrapper around the bar. */
    .quickbar-bar { background-color: #2E3192; width: 0px;} /* this is the bar itself you could use an image here if you wanted */
    .quickbar-title { padding: 3px; } /* this is the element above, left or below the bar.*/
    .quickbar-label { padding-left: 6px; float: left; position: relative; font-size: .9em; } /* this is the label that goes to the right or inside the bar */

    For the HTML markup you have two options the first couldn’t get any easier.

      The second utilizes data-dash attributes. If you are familiar with unobtrusive javascript these will make perfect sense. Hence if you rendered your markup and grabbed data from your database or something you can just add the attributes directly as opposed to supplying them in javascript. Just makes it handy.In this example you have to create the

    • elements. The title is what is displayed again on top, to the left or below the bar itself. The value is the integer value that will be used to calculate against the with of the element to properly show the percentage of use. The label is what shows inside the bar or to the right to further describe what the bar value means. For ex: 75% free. The width is a specified with. Yes you can have each
    • be a different width which is handy is some situations. The width can also be 0. You would need to create each li with:

      data-quickbar-title=”title”
      data-quickbar-value=”value”
      data-quickbar-label=”label”
      data-quickbar-width=”200″

      For the Javascrpt. Reference the plugin as you normal would for any plugin in your header tag.

      Wire up the plugin to your element.

      $(document).ready(function () {
      var chartData = [ { title: ‘your_title’, value: ‘your_value’, label: ‘your_label’, width: 200}, { title: ‘your_title2’, value: ‘your_value2’, label: ‘your_label2’, width: 200} ]
      $(‘.quickbar’).quickbar({
      styles: { container: ‘quickbar-container’, bar: ‘quickbar-bar’, title: ‘quickbar-title’, label: ‘quickbar-label’ },
      title: { visible: true, width: 50, position: ‘left’ }, // position options are ‘top’, ‘left’, ‘bottom’. Defaults: true, 50, ‘left’.
      label: { visible: true, width: 50, position: ‘right’ }, // position options are ‘inner’ or ‘right’. Defaults: true, 50, ‘right’.
      refresh: { btn: ‘.quickbar-refresh’, method: ”}, // this is only need to call a function to repopulate and reinit the plugin with new data.
      data: chartData, // this can be static, empty (if using data-dash attribute) or a function.
      animate: true, // can be true or false. Default: true.
      });
      });

      You could also use the built in destroy or reinit methods.

      $(‘.quickbar’).quickbar(‘destroy’); // destroys the plugin and removes any auto generated elements. (manual data-dash elements will NOT be removed).
      $(‘.quickbar’).quickbar(‘reinit’); // destroys and reinitializes the plugin.

      You could populate the data using an ajax call.

      function buildChart(){
      $.post(‘/your_path/method’, { variable: ‘variable’, variable2: ‘variable2’ },
      function (result){
      // creates a new quickbar.
      var opt = {
      title: { width: 100, position: ‘top’ },
      data: $.parseJSON(result)
      }
      var callback = function () { // some function. };
      $(‘.quickbar’).quickbar(opt, callback);
      }

      }

    • JQuery Hylite Plugin

      Wrote a little plugin this am to highlight rows of a table or unordered list. This has a little twist to it in that it has a couple of neat little features. Often we need to iterate over rows of data, maybe pullout a guid or index of the row and so on. This is a common task in just about every web application. So I quickly threw this one together. Obviously no guarantees and I’m sure it can be improved upon…feel free to do so.

      What can HyLite do?

      • – highlight a table or list row on hover.
      • – can set a row as selected and then toggle off when clicked again.
      • – when row is selected it can either simply change to the selected class or do a mild animation.
      • – can also animate use JQuery UI. simply pass in your effect and options or use the default pulsate effect.
      • – on hover or click a callback function can report back the index of the row, the guid if you specify the guid element to lookup, the total number of rows and the rows selected on clear.
      • – has two modes select and navigate. select will do just that, navigate will redirect to the url passed.
      • – query string params are supported too. you can pass in an array of key/values and they will be concatenated to the url. if you pass the key guid in the query string params it will if you’ve set the option find the guid element specified and use it, otherwise if it can’t find it, it will use the value you’ve passed.

      Download
      jquery-hylite-1.1.js

      jquery-hylite-1.1.min.js

       

      Instruction
      Nothing different here. Install the one of the above downloaded files in your script directory and then add a reference to the top of your page, master page, mvc shared layout etc. CSS styling is really straight forward. For what ever element you are iterating over just add three states in CSS. Your default, hover and selected states. You can also changes those class names to whatever you want, those are just the defaults so for example your CSS may look something like this:

      CSS

      .mylist
      {
          /* default style*/
      }
      
      mylist.hover
      
      {
          /* hover style*/
      }
      
      mylist.selected
      
      {
          /* selected style*/
      }

      HTML

      Your html is equally simplistic. Say you have an unordered list or table it would be something like the below:

      <ul class=”mylist”>
          <li>My first row of data<span class=”myguid”>100</span></li>
          <li>My second row of data<span class=”myguid”>101</span></li>
      </ul>

      PLUGIN

      *** obviously the below would be wrapped in pageLoad or $(document).ready()***

      – basic usage

      $(.mylist li).hylite();

      – animate using JQuery UI

      animation is only used when in select mode.

      $(.mylist li).hylite({
          uiAnimate: { enabled: true, effect: ‘pulsate’, opt: { times: 1 }, speed: 500 }
      });

      – turn animation off

      $(.mylist li).hylite({
          animate: false
      });

      – changing default selected and hover styles

      $(.mylist li).hylite({
          hoverStyle: ‘some-hover-style’,
          selectedStyle: ‘some-selected-style’
      });

      – navigate to new page after click

      onclick navigate to new page example url: ‘/mypage.html?key1=value&key2=value’

      $(.mylist li).hylite({
          mode: ‘navigate’,
          navParams: { url: ‘/mypage.html’, qsParams: { key1: ‘value’, key2: ‘value’ }
      });

      – using a unique identifier

      $(.mylist li).hylite({
          guidElement: ‘.myGuid’,
          }, myCallbackFunction
      );
      
      function myCallbackFunction (element, data){
          // using the above you could update an input for example anytime there is
          // a mouseover or click event. I like JSON that way it is always in that format no matter what I’m doing.
          // possible options when calling back from main init method are:
          // obj.index (index hovered or selected), obj.rows (total count), obj.guid (the guidElemement )
          // possible options when calling back from clear method (see below)
          // obj.rows, obj.selected (counts the rows that were selected that you’ve cleared)
          // these properties passed back could in part be accessed from the JQuery object that also gets
          // passed back in the init method. meaning element above represents $(this)
      
          var obj = $.parseJSON(data);
          alert(obj.index);
      }

      – clearing selected rows when in select mode

      $(.mylist li).hylite( ‘clear’, myClearCallback);
      
      function myClearCallback(data){
          var obj = $.parseJSON(data);
          alert(‘There were ‘ + obj.selected + ‘ rows cleared.’
      )