I want to disable my button if any of my .Info div contains <i> tag contains a specific class. I am trying to do it, but nothing works for me.
Here is my code:
$(document).ready(function() {
$(".Info").change(function() {
var str = "";
if ($("i.fa fa-times").length > 0) {
$('#jsbutton').attr('disabled', 'disabled');
} else {
$('#jsbutton').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<button class="btn btn-primary btn-block" type="submit" id="jsbutton">Add Purchase Order</button>
Try this script:
<script>
$(document).ready(function() {
if ($("div.info").find("i").hasClass("fa fa-times"))
{
$('#jsbutton').attr('disabled', 'disabled');
}
else
{
$('#jsbutton').prop("disabled", false);
}
});
</script>
Hope, this may be helpful for you.
jquery has the hasClass for such a thing
if ( $('.i').hasClass( "fa fa-times" ) ) {
when does 'info' change?
if any should contain 'i' then it doesn't matter who...
if( document.querySelectorAll('i').length ) jsbutton.disabled = true
or more simple
jsbutton.disabled = document.querySelectorAll('i').length
Try
if ($(".info").find("i.fa").length >= 0) {
$("#jsbutton").attr("disabled", true);
}
You need to make sure the info class is lowercase.
$('.info').on('click', function(e) {
You need a dot before your fa-times times class in the selector.
if ($('i.fa.fa-times').length > 0) // if ($('i').hasClass('fa-times'))
Demo
$(function() {
$('.info').on('click', function(e) {
if ($('i').hasClass('fa-times')) {
$('#jsbutton').attr('disabled', 'disabled');
} else {
$('#jsbutton').removeAttr('disabled');
}
});
});
.info:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<button class="btn btn-primary btn-block" type="submit" id="jsbutton">Add Purchase Order</button>
Related
I have a form which takes three values Roomname, Experience and Rating. This data is then submitted to a database. The issue I'm facing is through my Roomname and Rating is getting submitted perfectly, the data I enter in textarea is giving me empty result in database. I have tried every way but I'm not able to solve this issue. Only this is the issue, other code is working fine.
Please help!!!
Here is the code:
<?php
include 'db.php';
session_start();
error_reporting(0);
?>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!--User's CSS-->
<link rel="stylesheet" type="text/css" href="../css/feedback.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<!--Font Awesome JS-->
<script src="https://use.fontawesome.com/1033686ccb.js"></script>
<!--JQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<?php include 'inner-navbar.php';
error_reporting(0);
?>
</header>
<div class="container">
<div id="feedback">
<h3 class="mb-5">Your Feedback</h3>
<form method="post" id="feedback-form">
<div class="row mb-3">
<label class="col-sm-6 col-form-label">Room Name: </label>
<div class="col-sm-6">
<select name="selectedRoomName" id="selectedRoomName" class="form-control">
<?php
$selectQuery="SELECT*FROM bookings where firstname='".$_SESSION['firstname']."';";
$selectQueryResult=mysqli_query($conn,$selectQuery);
if($selectQueryResult){
while($row=mysqli_fetch_assoc($selectQueryResult)){
echo '<option value="'.$row["roomName"].'">'.$row["roomName"].'</option>';
}
}
?>
</select>
</div>
</div>
<div class="row mb-4">
<label class="col-sm-6 col-form-label">Your Experience: </label>
<div class="col-sm-6">
<textarea class="form-control" placeholder="Your Experience" name="experience" id="experience"></textarea>
</div>
</div>
<div class="row mb-5">
<label class="col-sm-6 col-form-label">Your Rating: </label>
<div class="col-sm-6">
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="0"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="1"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="2"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="3"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="4"></i>
</div>
</div>
<button type="submit" class="btn btn-outline-dark submit" name="submit" id="submit">Submit Feedback</button>
<?php
if(isset($_POST['rating'])){
$roomName=$_POST['selectedRoomName'];
$experience=$_POST['experience'];
$rating=$_POST['rating'];
$submitQuery="INSERT INTO feedback(roomName,experience,rating) VALUES('$roomName','$experience','$rating');";
$submitQueryRes=mysqli_query($conn,$submitQuery);
if($submitQueryRes){
echo '<script>alert("Your Feedback has been Successfully Submitted!");</script>';
}else{
echo '<script>alert("Error: '.$rating.'");</script>';
}
}
?>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var selectedRoomName=$("#selectedRoomName").val();
var experience=$("#experience").val();
var rating=-1;
$(document).ready(function(){
$('.fa-star').click(function(){
rating=parseInt($(this).data('index'));
});
$('.fa-star').mouseover(function(){
resetStarColors();
var value=parseInt($(this).data('index'));
for(var i=0;i<=value;i++){
$('.fa-star:eq('+i+')').css('color','#eb9e34');
}
});
$('.fa-star').mouseleave(function(){
resetStarColors();
if(rating!=-1){
for(var i=0;i<=rating;i++){
$('.fa-star:eq('+i+')').css('color','#eb9e34');
}
}
});
function resetStarColors(){
$('.fa-star').css('color','black');
}
$("#submit").click(function(){
$.ajax({
url:'feedback.php',
method:'POST',
data:{
selectedRoomName: selectedRoomName,
experience: experience,
rating: rating
},
success: function(){
alert(experience);
}
});
});
});
</script>
</html>
Move
var selectedRoomName=$("#selectedRoomName").val();
var experience=$("#experience").val();
inside your .click() method.
I am tryng to run a star rating component in the most simplest approach. I got most of the code from this link. But unfortunately, nothing appears in the page.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./rating-stars.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./rating-stars.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever1" class="rating-value" value="2.56">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever2" class="rating-value" value="1.9">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever3" class="rating-value" value="4.1">
</div>
</div>
</div>
</div>
</body>
</html>
and then a simple css file called as rating-stars.css:
.star-rating {
line-height:32px;
font-size:1.25em;
}
.star-rating .fa-star{color: yellow;}
and finally the javascript file is:
var $star_rating = $('.star-rating .fa');
var SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
$(document).ready(function() {
});
The problem is, no star appears in the page. I checked the console, and it seems that, everything is fine, and there is no error.
you can use the rateYo plugin
$(function () {
$(".rateyo").rateYo({
starWidth: "80px"
}).on("rateyo.change", function (e, data) {
var rating = data.rating;
$(this).parent().find('.result').text('rating :'+ rating);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
<div class="rateyo"
data-rateyo-rating="1.5"
data-rateyo-num-stars="5"></div>
<span class='result'>0</span>
</div>
It's using a custom font from fontawesome to create the stars (referenced from here: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css). The font is relative to that CSS file, so you either need to ensure you're including that file or that you have the fonts locally.
I don't see link to font awesome. There're multiple ways to add it check
http://fontawesome.io/get-started/
The simplest solution add between <head></head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
I have multiple instances of the HTML below:
<div class="col-md-4">
<div class="widget">
<div class="widget-head">
<a class="collapse" href="#"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
<span>Title</span>
<i class="fa fa-expand icon-spacer" aria-hidden="true" onclick="dosomething();"></i>
</div>
</div>
</div>
jQuery:
function dosomething() {
.widget above toggleClass('someClassHere');
}
I need to be able to click on dosomething and have a class toggled (added), to the nearest .widget above it.
How can I do this in jQuery?
You can use closest method of jQuery.
<i class="fa fa-expand icon-spacer" aria-hidden="true" onclick="dosomething(this);"></i>
function dosomething(obj) {
$(obj).closest('.widget').toggleClass('someClassHere');
}
You can use the onclick method to fire the event , and add class via jquery after a getSelectedElement
Use jQuery .closest()
$(function() {
$('.icon-spacer').click(function(e) {
e.preventDefault();
$(this).closest('.widget').toggleClass('red');
});
});
.red {
background: #f00;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="widget">
<div class="widget-head">
<a class="collapse" href="#"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
<span>Title</span>
</div>
</div>
</div>
i am trying to make a Menu as shown in below image
see this Link to go to its website i have copied some code ( HTML code and links to css and .js files) from there.
Here is my code :
<!DOCTYPE html>
<html>
<head>
<link href="scripts/gooey.min.css" rel="stylesheet" />
<script src="jquery-2.2.3.js"></script>
<script src="scripts/gooey.min.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#features" class="gooey-menu-item">
<i title="Features" class="fa fa-cog fa-2x"></i> Item 1
</a>
<a href="#h-spaced-menu" class="gooey-menu-item">
<i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>Item 2
</a>
<a href="#menu-v-example" class="gooey-menu-item">
<i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>Item 3
</a>
<a href="#docs" class="gooey-menu-item">
<i title="Docs" class="fa fa-book fa-2x"></i>Item 4
</a>
<a href="#event-api" class="gooey-menu-item">
<i title="Event API" class="fa fa-code fa-2x"></i>Item 5
</a>
<a href="#round" class="gooey-menu-item">
<i title="Round Menu" class="fa fa-circle fa-2x"></i>Item 6
</a>
</nav>
<script type="text/javascript">
$(function () {
$("#gooey-round").gooeymenu({
bgColor: "#ffc0cb",
contentColor: "white",
style: "circle",
circle: {
radius: 85
},
size: 80
});
});
</script>
</body>
</html>
I have downloaded all the required files and even linked required .css and .js files to my code but i don't know why it gives me error that " It doesn't contain property googymenu "
Can anyone please help me to implement this Menu item.
Thank you so much.
EDIT : Which file i need to add from all font-awesome files ?
Works fine , see the sample.
Edit
Added Font-Awesome and a bit of CSS to move the menu.
#gooey-upper{
left : 200px;
top : 50px;
}
Sample
$("#gooey-upper").gooeymenu({
bgColor: "#ff6666",
contentColor: "white",
style: "circle",
horizontal: {
menuItemPosition: "glue"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 80
},
margin: "small",
size: 90,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#e55b5b"
});
#gooey-upper{
left : 200px;
top : 50px;
}
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--font awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!--plugin style-->
<link rel="stylesheet" type="text/css" href="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/css/gooey.min.css">
<!--plugin js-->
<script type="text/javascript" src="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/js/gooey.min.js"></script>
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#features" class="gooey-menu-item">
<i title="Features" class="fa fa-cog fa-2x"></i>
</a>
<a href="#h-spaced-menu" class="gooey-menu-item">
<i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>
</a>
<a href="#menu-v-example" class="gooey-menu-item">
<i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>
</a>
<a href="#docs" class="gooey-menu-item">
<i title="Docs" class="fa fa-book fa-2x"></i>
</a>
<a href="#event-api" class="gooey-menu-item">
<i title="Event API" class="fa fa-code fa-2x"></i>
</a>
<a href="#round" class="gooey-menu-item">
<i title="Round Menu" class="fa fa-circle fa-2x"></i>
</a>
</nav>
I am new to angularjs and just started getting my hands dirty in it. I have downloaded angular-seed and started changing in it. I have a navbar which displays different html pages when user navigate. The problem is the page is getting loaded properly but i have some javascript in the script tag in that html page that is not loading, and its also not throwing any error in the console.
Here is my index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Here is my view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
Here is my view1.html which contains a javascript script tag in it:
<div class="row">
<div class="charts">
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-sign-in fa-3x" ></i>
</div>
<div id="stats1"class="stats_box">
<span class="info-box-text">Number of sign-ups</span>
<span id="sign-up" class="percent">56,000</span>
</div>
<i id="red" class="fa fa-circle-o text-red" value="11000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="12000"></i>
<i id="green" class="fa fa-circle-o text-green" value="13000"></i>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-user fa-3x"></i>
</div>
<div id="stats2" class="stats_box">
<span class="info-box-text">Daily active users</span>
<span id="active" class="percent">23,000</span>
</div>
<div class='firstbox' id='fb2' >
<i id="red" class="fa fa-circle-o text-red" value="21000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="22000"></i>
<i id="green" class="fa fa-circle-o text-green" value="23000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats3"class="stats_box">
<span class="info-box-text">Average time active</span>
<span class="percent">80,000</span>
</div>
<div class='firstbox' id='fb3'>
<i id="red" class="fa fa-circle-o text-red" value="31000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="32000"></i>
<i id="green" class="fa fa-circle-o text-green" value="33000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats4" class="stats_box">
<span class="info-box-text">Total time run</span>
<span class="percent">39,000</span>
</div>
<div class='firstbox' id='fb4' >
<i id="red" class="fa fa-circle-o text-red" value="41000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="42000"></i>
<i id="green" class="fa fa-circle-o text-green" value="43000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats5"class="stats_box">
<span class="info-box-text">Total distance covered</span>
<span id="distance"class="percent">20,000</span>
</div>
<div class='firstbox' id='fb5' >
<i id="red" class="fa fa-circle-o text-red" value="51000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="52000"></i>
<i id="green" class="fa fa-circle-o text-green" value="53000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-bolt fa-3x"></i>
</div>
<div id="stats6"class="stats_box">
<span class="info-box-text">10K activated</span>
<span id="activated"class="percent">26,000</span>
</div>
<div class='firstbox' id='fb6' >
<i id="red" class="fa fa-circle-o text-red" value="61000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="62000"></i>
<i id="green" class="fa fa-circle-o text-green"value="63000"></i>
</div>
</div>
<div class="clearfix"> </div>
</div><!--end charts-->
</div><!--end row-->
<script>
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>