CODEWITHSUNDEEP
jqueryjqplot
pramodh
pramodh

Reputation: 1329

How to draw Horizontal line on a graph using JQPlot Where Y axis is in time range

I am trying to draw a graph where x axis is date and y-axis is time in hours.

This is the code 

var line3 = [['02/01/2012 00:00:00', '02/01/2012 01:00:00'], ['02/02/2012 00:00:00', '02/01/2012 06:00:00'], ['02/03/2012 00:00:00', '02/01/2012 06:00:00'], ['02/04/2012 00:00:00', '02/01/2012 06:00:00']];
  var plot2 = $.jqplot('chart1', [line3], {
    title:'Mouse Cursor Tracking',
    axes:{
      xaxis:{
          min:'2012-02-01',
      max:'2012-02-10',
      Label: 'Day',
      renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            formatString:'%b %#d'
          },
          tickInterval:'1 day'
      },
      yaxis:{
    min:'2012-02-01 00:00:00',
    max:'2012-02-01 24:00:00',
    Label: 'Time',
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{
          formatString:'%H'
        },
        tickInterval:'2 hour'
      }
    },
    highlighter: {
      show: false
    },
    cursor: {
      show: true,
      tooltipLocation:'sw'
    },
    canvasOverlay: {
      show: true,
      objects: [
        {horizontalLine: {
          name: 'pebbles',
          y: '2012-02-01 05:00:00',
          lineWidth: 3,
          color: 'rgb(100, 55, 124)',
          shadow: true,
          lineCap: 'butt',
          xOffset: 0
        }}
      ]
    }           
  });

I am trying to draw a line where y = 05:00 hours. And that is not working.

Have you faced this issue before? Any kind of input would be great.

Upvotes: 1

Views: 4917

Answers (1)

Kryptic
Kryptic

Reputation: 1952

This seems to be a bug in the way jqplot maps y coordinates to pixel coordinates. It's expecting a numerical value in the same unit as the date (not a string), and it's not converting the value you pass in, but rather turning into NaN. Try out this fun example: 

canvasOverlay: {
  show: true,
  objects: [
    {horizontalLine: {
      name: 'pebbles',
      y: 1328158800000 - 30000000,
      lineWidth: 3,
      color: 'rgb(100, 55, 124)',
      shadow: true,
      show: true,
      lineCap: 'butt',
      xOffset: 0
    }}
  ]
}

Pulled from your example, this draws a line below the max of your data set.

You can use the built in jsDate object in jqplot to convert your date string to a numerical value. Replace the current line with the date, like this: 

y: new $.jsDate( '2012-02-01 05:00:00').getTime(),

This works as you would want it to.

If you don't mind, file a bug report at https://bitbucket.org/cleonello/jqplot/issues and hopefully it will be fixed.

Upvotes: 2

Related Questions