Question

I am in the process of developing dynamically Slope & Flat Chart using JQplot for Bus Time Table.
According to my requirement, apart from the plotted chart I want to plot some dotted lines on the graph. For this I am using horizontalLine, verticalLine and line of canvasOverlay statically.
I want to draw these lines dynamically. The number of lines and all the required points will come from an xml file itself respectively.
As per my understanding the canvasOverlay is taking horizontalLine, verticalLine and line as array objects with some properties. I want to pass these objects from dynamically created array, but I am not able to achieve these lines.
Any solutions to my queries are highly appreciated.

Answer 1

Here’s a fiddle to explain how draw a line with canvasOverlay:

$.jqplot.tickNumberFormatter = function(format, val) {
  if (typeof val == 'number') {
    if (val == "3.0") {
      return String("High");
    } else if (val == "2.0") {
      return String("Medium");
    } else if (val == "1.0") {
      return String("Low");
    } else return String(" ");
  } else {
    return String(val);
  }
};


BuildReadinessGraph();


function BuildReadinessGraph() {

  var grid = {
    gridLineWidth: 1.5,
    gridLineColor: 'rgb(235,235,235)',
    drawGridlines: true
  };
  var data = [
    ['2012-09-13', 1],
    ['2012-10-22', 2],
    ['2012-01-12', 3]
  ];

  $.jqplot.postDrawHooks.push(function() {
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back  
    $(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front         
    $(".jqplot-highlighter-tooltip").css('z-index', '2');
    $(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
  });

  $.jqplot('ChartDIV', [data], {
    series: [{
      showMarker: true
    }],
    seriesDefaults: {
      showMarker: true,
      pointLabels: {
        show: true
      }
    },
    grid: grid,
    highlighter: {
      sizeAdjust: 10,
      show: true,
      tooltipLocation: 'n',
      useAxesFormatters: true
    },

    tickOptions: {
      formatString: '%d'
    },
    canvasOverlay: {
      show: true,
      objects: [{
          line: {
            start: [new Date('2012-05-01').getTime(), 0],
            stop: [new Date('2012-05-10').getTime(), 0],
            lineWidth: 1000,
            color: 'rgba(255, 0, 0,0.45)',
            shadow: false,
            lineCap: 'butt'
          }
        }

      ]
    },
    axes: {
      xaxis: {
        label: 'Dates',
        renderer: $.jqplot.DateAxisRenderer,
        rendererOptions: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer
        },
        tickOptions: {
          formatString: '%d/%m/%Y',
          angle: -30,
          fontFamily: 'Arial',
          fontSize: '13px',
          fontWeight: 'bold'
        },
        min: "01-01-2012",
        tickInterval: '2 month',
        labelOptions: {
          fontFamily: 'Arial',
          fontSize: '14pt',
          fontWeight: 'bold',
          textColor: '#0070A3'
        }
      },
      yaxis: {
        label: 'Levels',
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
        tickOptions: {
          formatter: $.jqplot.tickNumberFormatter // my formatter
        },
        rendererOptions: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer
        },
        labelOptions: {
          fontFamily: 'Arial',
          fontSize: '14pt',
          fontWeight: 'bold',
          textColor: '#0070A3',
          angle: -90
        }

      }
    }
  });


};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasOverlay.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.highlighter.js"></script>

<div id="ChartDIV"> </div>

With interesting code of “line” creation :

  grid:                 
            {
                drawGridLines: true,        // whether to draw lines across the grid or not.
                gridLineColor: '#cccccc',   // Color of the grid lines.
                backgroundColor: "#eee",
                borderColor: '#999999',     // CSS color spec for border around grid.
                borderWidth: 2.0,           // pixel width of border around grid.
                shadow: true,               // draw a shadow for grid.
                shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
                shadowOffset: 1.5,          // offset from the line of the shadow.
                shadowWidth: 3,             // width of the stroke for the shadow.
                shadowDepth: 3,             // Number of strokes to make when drawing shadow.
                                            // Each stroke offset by shadowOffset from the last.
                shadowAlpha: 0.07,          // Opacity of the shadow
            },
            canvasOverlay: {
                show: true,
                objects:

                        [
                            {
                                line:
                                {
                                    start : [new Date('2012-01-12').getTime(),20],                                                
                                    stop : [new Date('2012-01-13').getTime(),20],                                                
                                    lineWidth: 1000,
                                    color: 'rgba(255, 0, 0,0.45)',
                                    shadow: false,
                                    lineCap : 'butt'
                                }
                            },                                    
                            {
                                line:
                                {
                                    start : [new Date('2012-01-13').getTime(),20],                                                
                                    stop : [new Date('2012-01-14').getTime(),20],                                                
                                    lineWidth: 1000,
                                    color: 'rgba(255, 0, 0,0.45)',
                                    shadow: false,
                                    lineCap : 'butt'
                                }
                            }
                        ]
            } 

The idea would be to add a “line” section and call the plot.replot(); method to redraw the graph.
You could populate an array with your line points like this :

var myArrayPoints = Array();

var myArrayPoints.push({     line:
                                {
                                    start : [new Date('2012-01-12').getTime(),20],                                                
                                    stop : [new Date('2012-01-13').getTime(),20],                                                
                                    lineWidth: 1000,
                                    color: 'rgba(255, 0, 0,0.45)',
                                    shadow: false,
                                    lineCap : 'butt'
                                }
                            });

//Used in JQPlot like that
canvasOverlay: {
                show: true,
                    objects: [ myArrayPoints ]
               }