Avatar of maximus81
maximus81
Flag for United States of America 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
PHPJavaScriptCSS

Avatar of undefined
Last Comment
Ovid Burke

8/22/2022 - Mon
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).
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
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/
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Ovid Burke

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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();
});
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.