• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 952
  • Last Modified:

just gauge loop

I cant seem to get this to loop just gauge I need to create them dynamically
here what I tried
<script>

for (var i=0;i<cars.length;i++)
{ 
 var g = new JustGage({
    id: "gauge", 
    value: 67, 
    min: 0,
    max: 100,
    title: "Conversion rate"
	
  }); 
  
  
  }
 
</script>

Open in new window

0
beridius
Asked:
beridius
  • 2
1 Solution
 
Meir RivkinFull stack Software EngineerCommented:
what is not working for you?
if u wanna have multiple gage divs in your page then first create the external div:
<div id="gauge_list"></div>

Open in new window

then in the loop create div for each new gage, assign the id accordingly and append to the external div:
<script>
for (var i=0;i<cars.length;i++)
{ 
//create new gage
 var g = new JustGage({
    id: "gauge"+i, 
    value: 67, 
    min: 0,
    max: 100,
    title: "Conversion rate"	
  }); 

//create new gage div
var newgageDiv = '<div id=' + g.id +' class="200x160px"></div>';

//add new gage div to page
$('#gauge_list').append(newgageDiv); 
  }
 
</script>

Open in new window

0
 
beridiusAuthor Commented:
I tried you script and I must be doing something wrong as did not work  here my whole page
<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>
<div id="gauge_list"></div>
<script>
for (var i=0;i<cars.length;i++)
{ 
//create new gage
 var g = new JustGage({
    id: "gauge"+i, 
    value: 67, 
    min: 0,
    max: 100,
    title: "Conversion rate"	
  }); 

//create new gage div
var newgageDiv = '<div id=' + g.id +' class="200x160px"></div>';

//add new gage div to page
$('#gauge_list').append(newgageDiv); 
  }
 
</script>

Open in new window

0
 
Meir RivkinFull stack Software EngineerCommented:
here the whole page.
make sure to place the gage javascript files in the same folder where your html.
<HTML>
<head>
<title>Gauge Page</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script src="raphael.2.1.0.min.js"></script>
<script src="justgage.1.0.1.min.js"></script>
<div id="gauge_list"></div>
<script>
for (var i=1;i<4;i++)
{ 
	//create new gage div
	var newgageDiv = '<div id=gauge' + i +' class="50x40px"></div>';

	//add new gage div to page
	$('#gauge_list').append(newgageDiv); 
	
	//create new gage
	var g = new JustGage({
		id: "gauge"+i, 
		value: i*10, 
		min: 0,
		max: 100,
		title: "Conversion rate " +i	
	}); 
}
</script>
</body>

</HTML>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now