We help IT Professionals succeed at work.

Looking for an easy way to create a chart using images with dynamic data from a mysql database

maximus81
maximus81 asked
on
440 Views
Last Modified: 2012-06-01
I am looking for an easy way to create a chart with images. How I need to set this up is each department will be on this chart and if they have an accident the image on the left moves. Everyone will be listed on this and they can see where they are at. Anyone got an ideas how I could do this? Thanks
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Have you checked out Google Charts - lots of options on charts type and can use dynamic data

https://developers.google.com/chart/

Author

Commented:
I found http://www.highcharts.com/ which works really well but have no idea instead of using a bar to use an image that moves.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Not sure what you mean by 'image that moves'

Google Charts is free, by the way - highcharts isn't (unless your site is non-commercial (personal, school, non-profit etc).

Author

Commented:
Instead of having a bar using an Image. Is that possible using Google?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
OK. I don't think so :(
Most Valuable Expert 2011
Author of the Year 2014

Commented:
This might be worth a look...
http://jpgraph.net/
Google charts is a great free one as another expert has already mentioned.  One that ive personally had experience with in the PHP world is fusion charts.  

http://www.fusioncharts.com
Ovid BurkeConsultant Instructor

Commented:
1. Do you want a background image for your bars? or do you want an image that moves to a different point on a certain line/axis?
2. Whatever your answer to (1), where is the data about accidents coming from or where is it stored?

Author

Commented:
I would like it be an image that moves to a different point and the data will come from a mysql database.
Consultant Instructor
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
This is what I have so far. This should works for what I need but I have one question. How do I extend the bar?

<!DOCTYPE HTML>
<html>
<head>
<title>EE Image Chart Example</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.extend({
	graphicPosition: function( inc, department ) { // inc = number of pixels by which to move image for each accident
		var num = $(department).attr('data-num');
		var pos = ( inc * num );
		var img = $(department).next('td').children('div').children('img');
		//alert( num );
		img.css( { 'left': pos + 'px' } );
	}
});
jQuery(document).ready(function($) {
	$('#accident-chart').ready(function() {
		$('.department').each(
			function() {
				$.graphicPosition( 1, this );
			}
		);
	});
});
</script>
<style>
table {
	border-collapse: separate;
	border-spacing: 0px;
}
.bars {
	background-image:url('road.png');
background-color:#cccccc;
}
.department {
	width: 150px;
	padding: 60px 6px;
}
.imagewrap {
	width: 500px;
	padding: 0 !important;
}
.imagewrap div {
	width: 500px;
	position: relative;
}
.dep-image {
	position: absolute;
	left: 0;
	top: -60px;
	border: 0px solid #FFF;
}
</style>
</head>

<body>
<table id="accident-chart">
	<tr class="bars">
		<td class="department" id="department-1" data-num="5">
			User 1
		</td>
		<td class="imagewrap">
			<div><img src="truck.png" class="dep-image"></div>
		</td>
	</tr>
	<tr class="bars">
		<td class="department" id="department-2" data-num="10">
			User 2
		</td>
		<td class="imagewrap">
			<div><img src="truck.png" class="dep-image"></div>
		</td>
	</tr>
	<tr class="bars">
		<td class="department" id="department-3" data-num="25">
			User 3
		</td>
		<td class="imagewrap">
			<div><img src="truck.png" class="dep-image"></div>
		</td>
	</tr>
</table>
</body>
</html>

Open in new window

Ovid BurkeConsultant Instructor

Commented:
You can increase the width property in these css rules...
.imagewrap {
	width: 500px;
	padding: 0 !important;
}
.imagewrap div {
	width: 500px;
	position: relative;
}

Open in new window

Or, you can rewrite them like this...
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
}
.imagewrap {
	width: auto;
	padding: 0 !important;
}
.imagewrap div {
	width: inherit;
	position: relative;
}

Open in new window

Note the width of the 'bars' would be constrained by the overall width of your application and/or browser window.

Author

Commented:
That is perfect. Thank you so much for this. Saved me a lot of time.

Author

Commented:
Perfect. That's all I can say.

Author

Commented:
I have one other question. How do I remove the image in the first <td> from not showing. i would like the first cell just white and then the second cell the image.

<!DOCTYPE HTML>
<html>
<head>
<title>EE Image Chart Example</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.extend({
	graphicPosition: function( inc, department ) { // inc = number of pixels by which to move image for each accident
		var num = $(department).attr('data-num');
		var pos = ( inc * num );
		var img = $(department).next('td').children('div').children('img');
		//alert( num );
		img.css( { 'left': pos + 'px' } );
	}
});
jQuery(document).ready(function($) {
	$('#accident-chart').ready(function() {
		$('.department').each(
			function() {
				$.graphicPosition( 1, this );
			}
		);
	});
});
</script>
<style>
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0px;
}
.bars {
background-image:url('road.png');
background-color:#cccccc;

}
.department {
	width: 200px;
	padding: 10px 6px;

}
.imagewrap {
	width: auto;
	padding: 0 !important;
}
.imagewrap div {
	width: inherit;
	position: relative;
}
.dep-image {
	width: 115px;
	height: 70px;
	position: absolute;
	left: 0;
	top: -35px;
	border: 0px solid #FFF;
}
</style>
</head>

<body>
<table id="accident-chart" border="1">
	<tr class="bars">
		<td class="department" id="department" data-num="50">
			<h4>User 1 - 1</h4>
		</td>
		<td class="imagewrap">
			<div><img src="ats_truck.png" class="dep-image"></div>
		</td>
	</tr>
</table>
</body>
</html>

Open in new window

Ovid BurkeConsultant Instructor

Commented:
Try:
jQuery(document).ready(function($) {
      $('#accident-chart').ready(function() {
            $('.department').each(
                  function() {
                        $.graphicPosition( 1, this );
                  }
            );
      });
      
      /* Hides images according to their index:
       0 = 1st image, 1 = 2nd image, 2 = 3rd image, ...
      */
      $('img', '#accident-chart').eq(0).hide();
});

Author

Commented:
This just disables the truck image that moves. I'm looking to remove the bar image in the first cell. I am using an image called road.png that fills the bars but only want it displayed in the second cell. Is that possible? Thanks for all your help with this.

Author

Commented:
I figured this out. I used background image in the second td instead of putting it in the css
Ovid BurkeConsultant Instructor

Commented:
OK... I think I misunderstood what you wanted. It's great that you sorted it out. But you can also consider applying the background image to the .imagewrap {} rule in the CSS.

Happy to help.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.