asked on

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

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

Chris Stanyon

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

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

maximus81

ASKER

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.

Chris Stanyon

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).

maximus81

ASKER

Instead of having a bar using an Image. Is that possible using Google?

Chris Stanyon

OK. I don't think so :(

Ray Paseur

This might be worth a look...
http://jpgraph.net/

binaryevo

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 Burke

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?

maximus81

ASKER

I would like it be an image that moves to a different point and the data will come from a mysql database.

ASKER CERTIFIED SOLUTION

Ovid Burke

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

maximus81

ASKER

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 Burke

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.

maximus81

ASKER

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

maximus81

ASKER

Perfect. That's all I can say.

maximus81

ASKER

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 Burke

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();
});

maximus81

ASKER

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.

maximus81

ASKER

I figured this out. I used background image in the second td instead of putting it in the css

Ovid Burke

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.