justgage
JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.
I am trying to get my gauges to show color by sector (i.e. on var g1 i would like green 0-10, orange 11-22 and red 23-34).
There is an option to do it, but there are no clear instructions for noobs like me.
Any help would be appreciated.
http://www.justgage.com
<script>
var g1 = new JustGage({
id: "score",
value: <?php
print $content['field_anger_score'][0]['#markup'];
?>,
min: 0,
max: 34,
title: "Your Anger Score",
levelColorsGradient: false
});
var g2 = new JustGage({
id: "passive-aggressive",
value: <?php
print $content['field_passive_aggressive_score'][0]['#markup'];
?>,
min: 0,
max: 14,
title: "Passive Aggressive"
});
var g3 = new JustGage({
id: "aggressive",
value: <?php
print $content['field_aggressive_score'][0]['#markup'];
?>,
min: 0,
max: 6,
title: "Aggressive"
});
var g4 = new JustGage({
id: "assertive",
value: <?php
print $content['field_assertive_score'][0]['#markup'];
?>,
min: 0,
max: 4,
title: "Assertive"
});
</script>
dfg
Source: (StackOverflow)
I'm using JustGage and Bootstrap and want to display some variable content in a Popover based on the value in the Javascript JustGage.
For example, if the value in the gauge is between 0 - 50, they get "Try harder", if it's between 50 - 200, they get "Well done", surfaced in the popover content.
- (You can see this by clicking on Gauge 1).
$(window).load(function() {
var gageValue1 = getRandomInt(0, 200)
var gageValue2 = getRandomInt(0, 200)
var gageValue3 = getRandomInt(0, 200)
var colorGradientRYG = ["#991D1D", "#9D1F1F", "#A22222", "#A62424", "#AB2727", "#B02929", "#B42C2C", "#B92E2E", "#BE3131", "#C23333", "#C73636", "#CC3939", "#CE4236", "#D14B33", "#D35530", "#D65E2D", "#D8672A", "#DB7127", "#DD7A24", "#E08321", "#E28D1E", "#E5961B", "#E8A019", "#E9A619", "#EBAD1A", "#ECB41A", "#EEBB1B", "#F0C21C", "#F1C81C", "#F3CF1D", "#F5D61E", "#F6DD1E", "#F8E41F", "#FAEB20", "#F4EB25", "#EEEB2B", "#E9EC31", "#E3EC36", "#DEEC3C", "#D8ED42", "#D3ED48", "#CDED4D", "#C8EE53", "#C2EE59", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BBED5C", "#B9EC59", "#B8EA56", "#B6E954", "#B4E851", "#B3E64E", "#B1E54B", "#AFE449", "#AEE246", "#ACE143", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#AAE03E", "#A9E03C", "#A8E03A", "#A8E037", "#A7E035", "#A6E033", "#A5E031", "#A5E02E", "#A4E02C", "#A3E02A", "#A3E028", "#A4E224", "#A5E520", "#A6E81D", "#A7EB19", "#A8EE15", "#A9F012", "#AAF30E", "#ABF60A", "#ACF907", "#ADFC03", "#AEFF00"]
var g1 = new JustGage({
id: "g1",
title: "Gage 1",
value: 92,
min: 0,
max: 200,
showMinMax: false,
levelColors: colorGradientRYG,
levelColorsGradient: false,
});
var g2 = new JustGage({
id: "g2",
title: "Gage 2",
value: 98,
min: 0,
max: 200,
showMinMax: false,
levelColors: colorGradientRYG,
levelColorsGradient: false,
});
var g3 = new JustGage({
id: "g3",
title: "Gage 3",
value: 77,
min: 0,
max: 200,
showMinMax: false,
levelColors: colorGradientRYG,
levelColorsGradient: false,
});
$(document).ready(function() {
$('#g1_refresh').bind('click', function() {
g1.refresh(getRandomInt(0, 200));
g2.refresh(getRandomInt(0, 200));
g3.refresh(getRandomInt(0, 200));
return false;
});
});
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
<link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>
<h3>How am i doing?</h3>
<div class="row-fluid">
<div class="span4">
<a class="tipsPopover" title="Tips" data-toggle="popover" data-placement="bottom" text-align="center" data-content="This will be some content including a helpful tip on how to improve, based on the value given.">
<div id="g1">
</div>
</a>
</div>
<div class="span4">
<div id="g2"></div>
</div>
<div class="span4">
<div id="g3"></div>
</div>
</div>
Here's what I have so far...
https://jsfiddle.net/e4v62nh6/1/
Source: (StackOverflow)
I'm trying to implement Gauge control with below code but not getting any output though when i try the same in html file, i get the output with 3 gauge's.
I changed to $(document).ready() instead of window.onload as mentioned in the link window.onload Not Working correclty. But it didn't help.
I'm beginner on Javascripts or JQuery. Please let me know how to achieve this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
text-align: center;
}
#g1, #g2, #g3 {
width:200px; height:160px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="raphael.2.1.0.min.js" type="text/javascript"></script>
<script src="justgage.1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var g1, g2, g3;
window.onload = function () {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(350, 980),
min: 350,
max: 980,
title: "Lone Ranger",
label: "miles traveled"
});
var g2 = new JustGage({
id: "g2",
value: 32,
min: 50,
max: 100,
title: "Empty Tank",
label: ""
});
var g3 = new JustGage({
id: "g3",
value: 120,
min: 50,
max: 100,
title: "Meltdown",
label: ""
});
setInterval(function () {
g1.refresh(getRandomInt(350, 980));
g2.refresh(getRandomInt(0, 49));
g3.refresh(getRandomInt(101, 200));
}, 2500);
};
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
</div>
</form>
</body>
</html>
Source: (StackOverflow)
Working with 'justGuage' http://justgage.com/ a js plugin and thought it would be neat if the user could update and save their respective interactions with the guage via the browser.
Noticed on the setup page the developer has the following...
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
This isn't a object right? It's just params which you input to change the look of the guage...
I thought i'd somehow hook into the justGuage object/plugin like this...
<script>
$('#increment').click(function (){
var upValue = g1.value;
return upValue++;
});
</script>
Bear with the above is sort of pseudo code based on me giving it a shot as I am a noob in js/jQuery...
Thanks in advance!
Source: (StackOverflow)
I need to create a gauge like the one in the image bellow.
I try to use the JustGage in order to make it, but I cannot find a way to render the down part of the gauge (red semi-circle in the image).
I'd like to use the JustGage. Does anybody know a way to draw a "mirrored" gauge using JustGage?
Is any other gauge capable to draw like in the image bellow?
Edit: css rotate doesn't help, because it reverses the drawing direction.
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
Example here: http://jsfiddle.net/R4R3N/52/
Source: (StackOverflow)
I am trying to create a directive for JustGauge in AngularJS. My html view is something like this:
<div id="guageContainer" class="row" ng-controller="guageCtrl">
<gauge ng-repeat="ind in indicators" model="ind"></gauge>
</div>
and my directive is:
angular.module("pgHome", [])
.directive("gauge", function ($compile) {
return {
restrict: "E",
scope: { model: "=model" },
compile: function (tElement, tAttrs, transclude) {
tElement.append('<div id="{{model.Name}}"></div>');
return {
post: function (scope, iElement, iAttrs, controller) {
console.log(scope.model.Name);
console.log($("#" + scope.model.Name).length);
var g = new JustGage({
id: scope.model.Name,
value: 348,
min: 120,
max: 400,
title: "test",
label: ""
});
}
};
}
};
});
When I load the page containing this directive, JustGauge raises an error saying that it can't find an element with corresponding id. Just to mention that the first console.log works well but the second console.log returns 0. Also I am new to angularjs and I couldn't solve this problem!
Source: (StackOverflow)
I am developing a fitness app in which i want to represent BMI through gage but didn't getting how to change the value of gage dynamically as well second problem is that when i am putting gage script on button click it giving me error "No element with id: "gauge" found!". Can anyone solve my both issues as i am new to JS. So enlighten me and correct me.
<html>
<head>
<script src="raphael.2.1.0.min.js"></script>
<script src="justgage.1.0.1.min.js"></script>
<script type="text/javascript">
function funky()
{
var weight=document.getElementById("weight");
var height=document.getElementById("height");
var heightDouble=height.value*height.value;
var bmi=weight.value/heightDouble;
document.getElementById("bmi").innerHTML=bmi;
cc();
}
</script>
</head>
<body>
<input type="text" id="weight"/>
<input type="text" id="height"/>
<input type="button" id="calculate" onClick="funky()"/>
<div id="bmi"></id>
<div id="gauge"></div>
<script>
function cc()
{
var g = new JustGage({
id: "gauge",
value: 10,
min: 0,
max: 100,
title: "Visitors"
});
}
</script>
</body>
</html>
Source: (StackOverflow)
Does anyone know how to make JustGage object responsive ?
Please Check the link below, I fix the issue with raphael but can't get do the same with JustGage:
window.onload = function () {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 4000),
min: 0,
max: 4000,
title: "Well over thousand",
label: ""
});
}
http://jsfiddle.net/ugFmE/
Source: (StackOverflow)
I'm using justGage (a plugin for generating and animating nice & clean dashboard gauges) to program some graphs - I need to be able to increase and decrease the value by clicking a button.
I can do this by using refresh (g1.refresh(20);) - but that makes the value 20...it doesn't increase it by 20.
Can anyone help please ?
Many thanks
Al
Source: (StackOverflow)
I'm currently using JustGage and think it's great. However I wish to have a scale that goes from high to low i.e. 100 - 0 rather than all the demo'd code which is low to high.
Is this possible? I have tried to read the documentation but can't seem to find anything for this.
Source: (StackOverflow)
I didn't go digging, because I don't think it matters what methods and so forth JustGage has, but I have this new object g.
var g = new JustGage({
id: "gauge",
value: 34,
min: 0,
max: 100,
});
My question is how do I retrieve the value parameter later in the script.
I thought that var value = g.value would work, but it doesn't.
Here is a bit of the justgage.js file:
JustGage = function(config) {
if (!config.id) {alert("Missing id parameter for gauge!"); return false;}
if (!document.getElementById(config.id)) {alert("No element with id: \""+config.id+"\" found!"); return false;}
var obj = this;
// configurable parameters
obj.config =
{
// id : string
// this is container element id
id : config.id,
// title : string
// gauge title
title : (config.title) ? config.title : "",
// titleFontColor : string
// color of gauge title
titleFontColor : (config.titleFontColor) ? config.titleFontColor : "#999999",
// value : int
// value gauge is showing
value : (config.value) ? config.value : 0,
Source: (StackOverflow)
I'm experimenting with Raphael, SVG, and rails. I want the gage to dynamically update as a progress indicator of sorts as each task is crossed off via the completed button.
Something like tasks completed/total task created.
Attached is the view in the browser and below is the show page.
<h1 class="page-header"> Getting it up</h1>
<div class="well span9 offset2">
<h2 class="page-header"><%= @list.name %></h2>
<h2 class="lead"><%= @list.description %></h2>
<div class="pull-right" id="smallbuddy" style="width:340px; height:200px;"></div>
<h3>Still Not Finished</h3>
<ul>
<% @list.tasks.incomplete.each do |task| %>
<li style="list-style:none"><%= task.description %> <%= button_to "Completed", complete_task_path(@list.id,task.id), :class =>"btn-mini" %></li>
<% end %>
</ul>
<hr>
<h3>Finished</h3>
<ul id="completed">
<% @list.tasks.completed.each do |task| %>
<li style="list-style:none; opacity:.5; text-decoration:line-through;"><em><%= task.description %></em></li>
<% end %>
</ul>
<hr>
<%= form_for [@list, @list.tasks.new] do |form| %>
<p><%= form.text_field :description %><%= form.submit %></p>
<% end %>
</div>
<span class="btn affix"><%= link_to "Back to all Installs", lists_url %></span>
<div>
</div>
<script>
var g = new JustGage({
id: "smallbuddy",
value: 27,
min: 0,
max: 100,
title: "Until Complete"
});
</script>
Do I need to manipulate the Raphael Lib? or the justgagejs lib?
Still working my way through it but some veteran advice to point me in the correct direction on how to achieve this would be helpful. Thanks in advance.
Source: (StackOverflow)
I try run justgage example using asp net, but i get error: "No element with id: gauge found ". ID is correct, so what is wrong.
<script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gauge" class="200x160px"></div>
</form>
</body>
</html>
Source: (StackOverflow)
I am making a graph using JustGage. Here is my javascript:
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "font awesome icon here"
});
};
Is it possible to get a font awesome icon in the title? I tried adding the unicode (), and that didn't work. I also tried copying and pasting in the icon and that just resulted in a square.
I want the icon above the graph, where there is currently a square:
Here's the demo code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" rel='nofollow' href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<title>Auto-adjust</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
text-align: center;
}
#g1, #g2, #g3 {
width:20em; height:15em;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="resources/js/raphael.2.1.0.min.js"></script>
<script src="resources/js/justgage.1.0.1.min.js"></script>
<script>
var g1, g2, g3;
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "trying to get font awesome here"
});
var g2 = new JustGage({
id: "g2",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "trying to get font awesome here"
});
var g3 = new JustGage({
id: "g3",
value: getRandomInt(0, 100),
min: 0,
max: 300
title: "trying to get font awesome here"
});
setInterval(function() {
g1.refresh(getRandomInt(50, 300));
g2.refresh(getRandomInt(50, 300));
g3.refresh(getRandomInt(0, 300));
}, 2500);
};
</script>
</head>
<body>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
</body>
</html>
Live demo: http://jsbin.com/layoku/1/edit?html,js,output
Source: (StackOverflow)
I have a JS variable valuePercent that I get its value from hdnParam.Value (string that is obtained from C#) but its not working. I convert the string to an int using ParseInt() but I get NaN on my output. Any ideas?
.ASPX.cs
string test = "67";
hdnParam.Value = test;
.ASPX
<%-- Hidden field to store string to be displayed in gage--%>
<input type="hidden" id="hdnParam" runat="server" clientidmode="Static" />
<script>
var valuePercent = document.getElementById("hdnParam").value;
var gg1 = new JustGage({
id: "gg1",
donut: 0,
title: "LAKELAND",
titleFontColor: "#000000",
min: 0,
max: 100,
labelFontColor: "#000000",
humanFriendlyDecimal: 1,
decimals: 1,
symbol: "%",
refreshAnimationType: "bounce",
gaugeWidthScale: 0.6,
customSectors: [{
color: "#ff0000",
lo: 0,
hi: 79
}, {
color: "#ffa500",
lo: 80,
hi: 89
}, {
color: "#1eae1e",
lo: 90,
hi: 100
}],
counter: true
});
function refreshDiv() {
gg1.refresh(parseInt(valuePercent)); //THIS DOES NOT WORK
gg1.refresh(45); //THIS WORKS
}
var myVar = setInterval(function () { refreshDiv() }, 1000);
</script>
Source: (StackOverflow)