when I draw chart using jqplot, both end point of the chart does not show label, and I am not sure why. Please help
Here is my code (self-contained code, with all resources loaded)
JavaScript
x
115
115
1
<html>2
<head>3
</head>4
<body>5
<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{"data":[[843,1312,745,683,832,829,772,740,792,672,550,323]],"dateFull":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]],"tick":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]]}" class="soluongdonhangngay170" style="display:none;"> 6
<div style="height: 550px" class="soluongdonhangngay170170" />7
8
9
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.js"></script> 10
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jquery.jqplot.js?ln=js"></script> 11
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.dateAxisRenderer.js?ln=js"></script> 12
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.categoryAxisRenderer.js?ln=js"></script> 13
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.logAxisRenderer.js?ln=js"></script> 14
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasTextRenderer.js?ln=js"></script> 15
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasAxisTickRenderer.js?ln=js"></script> 16
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasAxisLabelRenderer.js?ln=js"></script> 17
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.highlighter.js?ln=js"></script> 18
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.pointLabels.js?ln=js"></script> 19
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.enhancedLegendRenderer.js?ln=js"></script> 20
<script>21
jQuery(function(){22
var labels = ["Đơn Hàng Theo Ngày"];23
alert(jQuery(".soluongdonhangngay170").val());24
displayLineChartWithToggleLegend($(".soluongdonhangngay170").val(),$(".soluongdonhangngay170170"), labels, "Số Lượng Đơn Hàng Ngày");25
});26
27
function displayLineChartWithToggleLegend(data, target, label, chartTitle){28
if(data === "") return;29
var chartJsonData = $.parseJSON(data);30
var dataPlot = chartJsonData.data;31
var ticks = chartJsonData.tick;32
var showPointLabel = true;33
if(chartJsonData.data.length > 4){34
showPointLabel = false;35
}36
target.jqplot(dataPlot, {37
title: chartTitle,38
animate: true,39
axesDefaults: {40
labelRenderer: $.jqplot.CanvasAxisLabelRenderer41
},42
seriesDefaults: {43
showMarker: true44
},45
legend: {46
show: true,47
renderer: $.jqplot.EnhancedLegendRenderer,48
placement: "outsideGrid",49
labels: label,50
location: "ne",51
rowSpacing: "5px",52
rendererOptions: {53
// set to true to replot when toggling series on/off54
// set to an options object to pass in replot options.55
seriesToggle: 'normal',56
seriesToggleReplot: {resetAxes: true}57
}58
},59
axes: {60
xaxis: {61
label: 'Date',62
ticks: ticks, 63
tickInterval: 20,64
tickOptions: {65
showGridline: false,66
angle: -60,67
fontFamily: 'Helvetica',68
fontSize: '8pt'69
}, 70
}71
},72
grid: {73
drawBorder: false,74
shadow: false,75
// background: 'rgba(0,0,0,0)' works to make transparent.76
background: "white"77
},78
series: [79
{80
pointLabels: {81
show: showPointLabel82
},83
rendererOptions: {84
// speed up the animation a little bit.85
// This is a number of milliseconds.86
// Default for a line series is 2500.87
animation: {88
speed: 200089
},90
smooth: true91
}92
}93
]94
});95
96
target.bind('jqplotDataMouseOver', function(ev, seriesIndex, pointIndex, data) {97
var idx = seriesIndex;98
$('tr.jqplot-table-legend').removeClass('legend-row-highlighted'); 99
$('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');100
$('tr.jqplot-table-legend').eq(idx).addClass('legend-row-highlighted');101
var dateFull = chartJsonData.dateFull;102
$(this).find(".jqplot-title").html(dateFull[data[0] - 1][1] + " - " + data[1]);103
$('tr.jqplot-table-legend').eq(idx).children('.jqplot-table-legend-label').addClass('legend-text-highlighted'); 104
});105
106
target.bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {107
$('tr.jqplot-table-legend').removeClass('legend-row-highlighted'); 108
$('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');109
$(this).find(".jqplot-title").html(chartTitle); 110
});111
}112
</script>113
</body>114
</html>115
Advertisement
Answer
I have this issue before but my X-Axis values was numbers and fixed it by adding ratio (Adjustment) about 20% from the max value to just gain more space and that did the trick Here I recommend you to add one more value in the X Values(X Ticks) without a related Value in the Y Values (ticks) to extend (add more space) the X Axis (if you have the same issue with Y Axis use the same technique) Have a look Here on Plunker
JavaScript
1
2
1
<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{"data":[[843,1312,745,683,832,829,772,740,792,672,550,323]],"dateFull":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"],[13,"13/06"]],"tick":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]**,[13,"13/06"]**]}" class="soluongdonhangngay170" style="display:none;"> 2
Hope this help.