Question

I have a graph with 4 different lines plotted using jqplot. I don't really want to create a legend so I wanted to label each line. I saw that there's a feature called pointLabels however, my labels aren't showing.

//function for the line graph
    $(document).ready(function () {

        var yticks = ['Early Definition', 'Pre Alpha', 'Alpha', 'Beta', 'PV', 'Sprint To Launch'];

        var line1 = [[0, 1, null], [10.4, 2, null], [20.8, 3, null], [31.2, 4, null], [41.6, 5, 'FFD'], [52, 6, null]];
        var line2 = [[0, 1, null], [10.4, 1, null], [20.8, 2, null], [31.2, 3, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
        var line3 = [[0, 1, null], [10.4, 2, null], [20.8, 4, null], [31.2, 5, null], [41.6, 6, 'Customer 1']];
        var line4 = [[0, 1, null], [10.4, 1, null], [20.8, 1, null], [31.2, 1, null], [41.6, 4, 'Customer 1'], [52, 5, null]];

        var plot3 = $.jqplot('linegraph', [line1, line2, line3, line4],
          {
              title: 'All Companies',
              // Series options are specified as an array of objects, one object
              // for each series.
              series: [
                  {
                      // Change our line width and use a diamond shaped marker.
                      lineWidth: 4,
                      markerOptions: { style: 'dimaond' },
                      //color: '#FFFFFF'
                  },
                  {
                      // Don't show a line, just show markers.
                      // Make the markers 7 pixels with an 'x' style
                      lineWidth: 4,
                      markerOptions: { size: 7, style: "x" }
                  },
                  {
                      // Use (open) circlular markers.
                      lineWidth: 4,
                      markerOptions: { style: "filledCircle" }
                  },
                  {
                      // Use a thicker, 5 pixel line and 10 pixel
                      // filled square markers.
                      lineWidth: 4,
                      markerOptions: { style: "filledSquare", size: 10 }
                  },
                  {
                      pointLabels: { show: true, location: 's', ypadding: 3 }
                  },
              ],

              axes: {
                  xaxis: {
                      renderer: $.jqplot.DateAxisRenderer,
                      label: 'Work Weeks',
                      max: 55,
                      min: 0,
                      tickOptions: {
                          formatString: '%.0f',
                      },
                  },
                  yaxis: {
                      label: 'Phases',
                      renderer: $.jqplot.CategoryAxisRenderer,
                      ticks: yticks
                  }
              },
          }
        );

    });

I've made sure that I've included the script for the pointLabels too:

<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
Was it helpful?

Solution

You should move the point label options outside of the series array and into a seriesDefaults section:

seriesDefaults: {
    pointLabels: { show: true, location: 's', ypadding: 3 }
}

Updated fiddle here: http://jsfiddle.net/R6sFn/3/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top