• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 493
  • Last Modified:

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.
0
Oliver2000
Asked:
Oliver2000
  • 2
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now