CODEWITHSUNDEEP
javascriptjqplot
jonadev95
jonadev95

Reputation: 367

jqplot draw vertical line in graph

My program is drawing a graph with the following (comparable) source code from the jqplot page. The goal is to draw a vertical line at position x in the graph. I followed up the guide an examples on the jqplot page, but it didn't draw the line, just the graph.

Is someone experienced with that? Or could tell me how the options/calls should be to get the line in the graph?

Example-code:

$(document).ready(function(){
  var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
      // Give the plot a title.
      title: 'Plot With Options',
      // You can specify options for all axes on the plot at once with
      // the axesDefaults object.  Here, we're using a canvas renderer
      // to draw the axis label which allows rotated text.
      axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      // An axes object holds options for all axes.
      // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
      // Up to 9 y axes are supported.
      axes: {
        // options for each axis are specified in seperate option objects.
        xaxis: {
          label: "X Axis",
          // Turn off "padding".  This will allow data point to lie on the
          // edges of the grid.  Default padding is 1.2 and will keep all
          // points inside the bounds of the grid.
          pad: 0
        },
        yaxis: {
          label: "Y Axis"
        }
      }
    });
});

Upvotes: 1

Views: 2793

Answers (1)

Anish Nair
Anish Nair

Reputation: 3368

Adding this to your existing code should help you draw a vertical line.

CODE:

canvasOverlay: {
   show: true,
   objects: [
       {verticalLine: {
           name: 'stack-overflow',
           x: 4, // x-axis position where you want to draw the vertical line.
           lineWidth: 6,
           color: 'rgb(100, 55, 124)',
           shadow: false
       }}
    ]
}

You can set the 'x' to a desired value of your choice.

IMP: In order for the canvasOverlay to work, you must include the jqplot.canvasOverlay.min.js file, else it will not work.

Here's a working fiddle: jqPlot - Draw vertical line on the graph

I included the following files in code above(JS Fiddle). You can also refer to the External Resources section on the left pane in JSFiddle.

  • jquery.jqplot.min.js
  • jquery.jqplot.min.css
  • jqplot.canvasOverlay.min.js
  • jqplot.canvasAxisLabelRenderer.min.js
  • jqplot.canvasTextRenderer.min.js

jqPlot Example here - jqPlot Canvas Overlay

Hope it helps :-)

Upvotes: 4

Related Questions