how to add simple option to chartjs correctly - chart.js

Question

Im using the following code for showing my graph of chart.js library:
HTML Part:
<div style="width:60%">
<div>
<canvas id="canvas_all" height="450" width="600"></canvas>
</div>
and the Script:
var lineChartDataAll = {
labels : <?php echo json_encode($all_date_label) ?>,
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : <?php echo json_encode($all_hum_data) ?>
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : <?php echo json_encode($all_temp_data) ?>
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
var ctx_all = document.getElementById("canvas_all").getContext("2d");
window.myLine = new Chart(ctx_all).Line(lineChartDataAll, {
responsive: true,
showXLabels: 10
});
}
Now, i have problems with this option: showXLabels: 10
Do i use this option in a correct way?
I want that there are only a view x (10) label on the x-axis ...thats the goal.
By now the graph is showing all x labels...

Answer 1

The option referenced in the (question) comments is from PR 521 that has not been merged into the main branch yet. This was later made into a PR 897, which too is yet to be merged.
So, if you want this feature, you should be using code from either of the above.
Here is a fiddle - http://jsfiddle.net/trhcafut/ that does just that. I just added the following block of code to the end (just scroll to the very end of the JS block), after Chart.Core and Chart.Line from the PR.
var lineChartData = {
labels : ["January", "February", "March", "April", "May", "June", "July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [28, 48, 40, 19, 86, 27, 90]
}
]
}
var ctx_all = $("#canvas_all").get(0).getContext("2d");
window.myLine = new Chart(ctx_all).Line(lineChartData, {
showXLabels: 3
});
Note that you won't be getting any changes made to Chart.js after the branch if you do this.