CODEWITHSUNDEEP
chartsjqplot
Watchmaker
Watchmaker

Reputation: 5308

Draw vertical lines in jqplot chart which x axe has Date format

I have a jqPlot chart with X axe has the following format:

xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                          formatString: '%Y-%m-%d \n %H:%M'
                          },
             min: minimo,
             max: maximo,
       }

I am not able to draw vertical lines in my chart with the plugin $.jqplot.CanvasOverlay.VerticalLine, like it is shown in this example: example canvas-overlay jqPlot I've tried the example on its own and works but in my case, since my chart has a format in the x axe I was only able to make it work with horizontal lines, but not with vertical lines.

This is what I have tried for now: 

verticalLine: {
                    name: 'barney',
                    x: "2011-01-07 16:10:00.000",
                    lineWidth: 6,
                    color: 'rgb(100, 55, 124)',
                    shadow: false
                }

I also assigned the x value to a variable and x: "2011-01-07 \n 16:10:00.000" but still didn't work. Maybe I just should do it drawing another jqPlot chart on top of the one I already have. But I would like to avoid that solution if possible and prefer the VerticalLine approach.

Upvotes: 0

Views: 1565

Answers (2)

Watchmaker
Watchmaker

Reputation: 5308

Well, I also wanted more than just one vertical line. So I had to create a list of objects for the VerticalLines.

var dates_vertical=[/*Array wit Dates*/];
var objects_vertical=[];
function create_vertical_lines() {
  for (var j = 0; j < dates_vertical.length ; j++) {
   objects_vertical[j]= new Object({ "verticalLine": {     
   "x": new $.jsDate(dates_vertical[j]).getTime(),
   "color": "red", 
   "lineWidth": 4 
   } 
 });
};

Besides in my CanvasOverlay I wrote:

canvasOverlay: {
          show: true,
          objects: objects_vertical
      }

Thanks!!

Upvotes: 0

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

Jqplot is expecting a numerical value and not a string (even for date) and can't convert the value you pass from string to a date.

You can jsDate object in jqplot to convert your date string to a numerical value : 

x : new $.jsDate( '2011-01-07 16:10:00.000').getTime()

Upvotes: 5

Related Questions