Chart displaying a time schedule

[Klaus HParticipant]

Hi,

I am looking to create a specific kind of chart and I am wondering if this is somehow possible with jqxChart. I am trying to visualize a production schedule for a period of time including break times.

The X-Axis would be days and the Y-Axis would be the time of day from midnight to midnight and I want to display a time period as a bar and leaving break times blank. So I have an array of products I want to assign a color to and I have the data for the chart with a product a start time and an end time. The same product can occur on the same day multiple times, because it can be interrupted by a shift break. There is no overlap in times, so one bar per day should be okay. It would somewhat like the jqxScheduler but as a graph.

Is this possible and if so, could you point me in the right direction or should I look for an alternative?

Best Regards
Klaus

[HristoParticipant]

Hello Klaus,

I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_color_bands.htm?light
If this does not what do you want to achieve please provide us with more details.
You could use it for a base and try to modify it.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Klaus HParticipant]

Hello Hristo,

thank you for your input.

I think rangedcolum is the correct type of chart. If I comment out the orientation then that’s a basis for what I look for. But the different columns should not be next to each other but in one line from top to bottom. And there could be two or three occurances of the same product on the same day.

So the basic data would look something like:
{ type=”product1″, start=”2021-02-01 00:00:00″, end=”2021-02-01 06:00:00″},
{ type=”product1″, start=”2021-02-01 06:30:00″, end=”2021-02-01 08:00:00″},
{ type=”product2″, start=”2021-02-01 08:00:00″, end=”2021-02-01 09:00:00″},
{ type=”product2″, start=”2021-02-01 09:30:00″, end=”2021-02-01 10:30:00″},
{ type=”product3″, start=”2021-02-01 10:30:00″, end=”2021-02-01 15:00:00″}
…

The type defines the color, the data is prepared so start and end are in the same day, the overlap to the next day is a seperate entry. I have no problem to manipulate the data to fit it to a certain structure. The number of occurances per day can be flexible due to break time interruptions. So the easiest way would be to drav a range from start to end in a specified color, but I have no problem to handle the data dynamically and transform it on the fly in order to fit it into the chart. But I need the X-Axis as Day and the Y-Axis as time of day, everything in one column and several occurances of each color/product per day. Just like a jqxScheduler with product being the color coded room and no overlapping meaning one column (edit: like a stacked column, with spacing or I would provide the break times as entries).

I hope my wish is clear. I could provide you with a screenshot of an example, but I cannot attach an image here.

Best Regards
Klaus

[HristoParticipant]

Hello Klaus,

I think you could rotate the axis.
If you want to be stacked then you should add two or more series in one seriesGroups element from the array.
Like as in this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_stacked_series.htm?light
Also, I would like to suggest you look at this blog post:
https://www.jqwidgets.com/gantt-chart/
In case you like it then you maybe find this demo helpful, too.

As you described each one next series should be in the same line (the series should be glued to each other) the better option should be the jqxScheduler as you mentioned.
With the timelineWeekView type, please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-timeline-views-resources.htm?light

You could share an image in the https://postimages.org/ or any other suitable place for you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Klaus HParticipant]

Hello Hristo,

thank you for your reply. I had looked at all the examples before. The Timelineview of the Scheduler missed the time of the day in the examples I saw. The Gantt Chart looked complex and good, but did not necessarily do, what I want to achieve.

But I played around with jqxDraw a little bit and found a good basis that I can work with.

Here’s what I came up with as a rough example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxDraw - Basic shapes drawing example</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>

    <style type="text/css">
    .smallText
    {
        font-size:10px;
        font-family: Sans-Serif;
    }
    .largeText
    {
        font-size:16px;
        font-family: Sans-Serif;
    }
	
	.jqx-fill-state-normal-custom
	{
		background: none!important;
	}
	
	.jqx-tooltip-main-custom
	{
		border: 0px!important;
	}
	
	.jqx-tooltip-text-custom
	{
		padding: 0px;
		border: 2px solid white!important;
	}
	
	.popup
	{
		background-color: white; 
		padding: 10px; 
		border-width: 5px;
		border-style: solid;
		color: black; 
		opacity: 1
	}
	
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#container').jqxDraw();

            var renderer = $('#container').jqxDraw('getInstance');
            var size = renderer.getSize();
			
            var borderElement = renderer.rect(0, 0, size.width, size.height, { stroke: 'black', fill: 'transparent' });
			
			var paddingtop = 50;
			var paddingleft = 60;
			var paddingbottom = 70;
			var paddingright = 10;
			
			var borderleft = paddingleft;
			var borderright = size.width - paddingright;
			var bordertop = paddingtop;
			var borderbottom = size.height - paddingbottom;
			
			renderer.rect(borderleft, bordertop, borderright-borderleft, borderbottom-bordertop, { stroke: 'black', fill: 'transparent' });

			var hourheight = (borderbottom - bordertop) / 24;
			console.log(hourheight);
			
			renderer.text("00:00", 10, bordertop-5, undefined, undefined, 0, { 'class': 'smallText' }, false, 'center', 'top', 'centermiddle');
			renderer.text("24:00", 10, borderbottom-5, undefined, undefined, 0, { 'class': 'smallText' }, false, 'center', 'top', 'centermiddle');
			
			for(var i = 1; i < 24; i++)
			{
				var line_y = bordertop + i*hourheight;
			
				renderer.line(borderleft, line_y, borderright, line_y, { stroke: 'red', 'stroke-width': 0.2 });
				var hourtext = "";
				var hourtext = String(i);
				if(i < 10)
					hourtext = "0" + String(i);
				hourtext += ":00";
				
				renderer.text(hourtext, 10, line_y-5, undefined, undefined, 0, { 'class': 'smallText' }, false, 'center', 'top', 'centermiddle');
			}
			
            var dataByDay = [
					{ day: '2021-02-01'},
					{ day: '2021-02-02'},
					{ day: '2021-02-03'},
					{ day: '2021-02-04'},
					{ day: '2021-02-05'},
					{ day: '2021-02-06'},
					{ day: '2021-02-07'},
					{ day: '2021-02-08'},
					{ day: '2021-02-09'},
					{ day: '2021-02-10'},
					{ day: '2021-02-11'},
					{ day: '2021-02-12'},
					{ day: '2021-02-13'},
					{ day: '2021-02-14'},
					{ day: '2021-02-15'},
					{ day: '2021-02-16'},
					{ day: '2021-02-17'},
					{ day: '2021-02-18'},
					{ day: '2021-02-19'},
					{ day: '2021-02-20'},
					{ day: '2021-02-21'},
					{ day: '2021-02-22'},
					{ day: '2021-02-23'},
					{ day: '2021-02-24'},
					{ day: '2021-02-25'},
					{ day: '2021-02-26'},
					{ day: '2021-02-27'},
					{ day: '2021-02-28'}
            ];
			
			var daywidth = (borderright - borderleft) / dataByDay.length;
			console.log(daywidth);
			for(var i = 0; i < dataByDay.length; i++)
			{
				var line_x = (i+1)*daywidth;
				line_x += borderleft;
				console.log("line_x: " + line_x);
				renderer.line(line_x, bordertop, line_x, borderbottom, { stroke: 'blue', 'stroke-width': 0.2 });
				
				var coord_x = (i)*daywidth;
				coord_x += borderleft;
				
				renderer.text(dataByDay[i].day, coord_x-12, size.height-10, undefined, undefined, 270, { 'class': 'smallText' }, false, 'center', 'top', 'left');
			}
			
			var x_left = 0 + borderleft + 5; // 5 = Puffer;
			var x_right = daywidth + borderleft - 5;
			var y_top = bordertop;
			var y_bottom = 4*hourheight + y_top;
			
			// params: x, y, width, height, attributes
            var rect1 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'yellow', 'stroke-width': 0.25  });
			$(rect1).jqxTooltip({ content: '<div class="popup" style="border-color: yellow;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});
			
			y_top = 4*hourheight + bordertop;
			y_bottom = 2*hourheight + y_top;
			var rect2 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'orange', 'stroke-width': 0.25 });
			$(rect2).jqxTooltip({ content: '<div class="popup" style="border-color: orange;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});
			
			y_top = 6.5*hourheight + bordertop;
			y_bottom = 2.5*hourheight + y_top;
			var rect3 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'orange', 'stroke-width': 0.25 });
			$(rect3).jqxTooltip({ content: '<div class="popup" style="border-color: orange;">Some Text part 2</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});

			y_top = 9*hourheight + bordertop;
			y_bottom = 3*hourheight + y_top;
			var rect4 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'green', 'stroke-width': 0.25 });
			$(rect4).jqxTooltip({ content: '<div class="popup" style="border-color: green;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});

			y_top = 13*hourheight + bordertop;
			y_bottom = 8*hourheight + y_top;
			var rect5 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'red', 'stroke-width': 0.25 });
			$(rect5).jqxTooltip({ content: '<div class="popup" style="border-color: red;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});

            renderer.refresh();
        });
    </script>
</head>
<body class='default'>
    <div id='container' style="width:1050px; height:800px">
    </div>
</body>
</html>

I did some tweaking to the jqxTooltip (which only seems to work with position mouse) and need a better way to calculate the coordinates, but I think this will eventually get me there.

Best Regards
Klaus

[HristoParticipant]

Hello Klaus,

Thank you for your contribution to the community.
If you know the coordinates of the wanted place of the tooltip then you could use the open method.
You could set in it two additional arguments for the coordinates.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts