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>
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.