jqPlot horizontal line at the correct date

Hi Experts,

I use the jquery jqplot plugin which works already perfect with the following code:

 
var plot1 = $.jqplot('chart1', [2015/03/29,50,2015/04/02,50,2015/03/30,50,2015/03/31,93], { 
	  animate: true,
	  animateReplot: true,
	  title:'LAST 7 DAYS', 
	  seriesDefaults: {
        showMarker:true,
        fill: false,
        color: '#0a901a',
        rendererOptions: {
              smooth: true
          },
        pointLabels: {
          show: true,
          edgeTolerance: 5
        },
         trendline: {
				color: '#407EC9',
				label: 'Reputation Trend',
                showLabel: true,
				show: true,
				type: 'linear'
			}
        },
      axes: { 
          xaxis: { 
	      //label: "Week Date",
              renderer: $.jqplot.DateAxisRenderer,
	      tickInterval: '1 days',
	      tickOptions:{formatString:'%#d/%#m/%Y'} 
          }, 
          yaxis: { 
              label: "Historical Reputation",
              max:99,
              min:97,
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer
          } 
      },
      highlighter: {
      show: false
    },
    cursor: {
      show: true,
      tooltipLocation:'sw'
    },
    });  

Open in new window


The problem is that I would like to include inside the graph a horizontal line at a specific date (in this example 2015/04/02. I tried the code below (*which I found somewhere) but I did not get it work because I dont know where to place this code exactly or if it is even correct.

canvasOverlay: {
            show: true,
            objects: [
                {dashedVerticalLine: {
                    name: 'Created day',
                    x: 2015/04/02,
                    lineWidth: 5,
                    dashPattern: [16, 12],
                    lineCap: 'round',
                    yOffset: '20px',
                    color: 'rgb(66, 98, 144)',
                    shadow: false
                }}
            ]
        }

Open in new window


Thank you for your help in advance.
Oliver2000Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
this is just an additional property - BUT to work it must be in the correct format which means a date type has to be created.
This works locally on my machine:
<!DOCTYPE HTML>
<html>
<head>
	<title>jqPlot - EE Date vertical line</title>
	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
	<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
	<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasOverlay.min.js"></script>	
	<script type="text/javascript">
		var plot1 = null;
		$(document).ready(function() {
			var lineData = [['2015-03-29 08:00AM',50],['2015-04-02 08:00AM',50],['2015-03-30 08:00AM',50],['2015-03-31 08:00AM',93]];
			plot1 = $.jqplot('chart1', [lineData], { 
				grid: {
					drawGridlines: true
				},
				animate: true,
				animateReplot: true,
				title:'LAST 7 DAYS', 
				seriesDefaults: {
					showMarker:true,
					fill: false,
					color: '#0a901a',
					rendererOptions: {
						smooth: true
					},
					pointLabels: {
						show: true,
						edgeTolerance: 5
					},
					trendline: {
						color: '#407EC9',
						label: 'Reputation Trend',
						showLabel: true,
						show: true,
						type: 'linear'
					}
				},
				axes: { 
					xaxis: { 
						//label: "Week Date",
						renderer: $.jqplot.DateAxisRenderer,
						tickInterval: '1 days',
						tickOptions:{formatString:'%#d/%#m/%Y'} 
					}, 
					yaxis: { 
						label: "Historical Reputation",
						max:99,
						min:0,
						labelRenderer: $.jqplot.CanvasAxisLabelRenderer
					} 
				},
				highlighter: {
					show: false
				},
				cursor: {
					show: true,
					tooltipLocation:'sw'
				},
				canvasOverlay: {
					show: true,
					objects: [
						{	horizontalLine: {
								name: 'barney',
								y: 40,
								lineWidth: 6,
								color: 'rgb(100, 55, 124)',
								shadow: false
						}},
						{	dashedVerticalLine: {
								name: 'bam-bam',
								x: new Date(2015,3,1,0,0,0),
								lineWidth: 5,
								dashPattern: [16, 12],
								lineCap: 'round',
								yOffset: '20px',
								color: 'rgb(0, 255, 0)',
								shadow: false
						}}
					]
				}
			});  
		});  
	</script>
</head>
<body>
<div id="chart1" width="500px" height="400px"></div>
</body>
</html>

Open in new window

HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Oliver2000Author Commented:
Hi Rainer,

Your solution works perfect. I messed up the format as you said. I wonder about the strange behaviour in the format because 2015,3,1,0,0,0 suppose to be 1.March 2015 but the line appear actually in 1. April instead. Looks like 0 is January in this case.
0
Rainer JeschorCommented:
Hi,
yes, JavaScript date type month is zero based.
For date handling I normally use an additional library called moment.js.
0
Oliver2000Author Commented:
Thank you Rainer, this was the perfect help. I did not know the fact that Javascript date works with 0 and in my tests I guess I never got a line also simple because I was always in the wrong month :)

Now working perfect with your DEMO and explanations. Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.