GithubHelp home page GithubHelp logo

kapantzak / barindicator Goto Github PK

View Code? Open in Web Editor NEW
27.0 27.0 19.0 94 KB

This is a jQuery plugin that helps you visualize numeric data (percentage or absolute numbers) in to bars.

License: MIT License

CSS 19.88% HTML 49.37% JavaScript 30.75%

barindicator's People

Contributors

kapantzak avatar nickkolok avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

barindicator's Issues

Default mid-point bar wrong when using numType: absolute

Here's an example of the mid bar not working correctly when numMax is 50 or below (actually it doesn't work for anything below 100 it seems). Not only is the bar at the wrong place, but when <50, the bar is off the chart. My use case: I need bars to represent heights of people in a competition. I effectively want the bar to range from 36 inches to 48 inches.

var opt = { numType: 'absolute', numMin:0, numMax:50, numMinLabel: true, numMaxLabel:true };
$('#bar1').barIndicator(opt);

49

fail1


40


var opt = { numType: 'absolute', numMin:0, numMax:48, numMinLabel: true, numMaxLabel:true };
$('#bar1').barIndicator(opt);
fail2

On loadData method: console error

Uncaught TypeError: newNum.replace is not a function

--> loadNewData() --> storedData['num'] = newNum.replace('%',''); (error in this line)

New line:

storedData['num'] = parseFloat(newNum);

Plugin does not work with Chrome

It does not work with Chrome Version 51 it works perfect with Firefox. There is no error on console simply inner bar is not displayed (no width param is set)

Average group class

Give the option to pass a class into the options object (avgGroupClass) in order to calculate the average of this group

Hover will also be triggered when the label's "real" position is passed

Like the title says, when I take a label with a bigger size - for example with an image - the hover event won't be only triggered when I pass the mlHoverRange in the bar; the hover event also starts when I pass the "real" position of the image/milestone label.

I can't even hack myself into this with z-indexes.

new Jquery

Hi, the getPluginData getter method doesn't work with Jquery version 3..

Average calculator

Calculate the average amount of the given group and display it on a milestone on each bar.

Min - Max label

Display a min / max label on the min/max value of a given group --> OK
--> Bug: onlimLabelPos: 'title'

Data attributes

Enable data attributes feature (pass options via data attributes)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.