How to limit xAxis label in Chart.Js 1.0.2?

Question

I am trying to plot a twitter streaming ,tweet sentiment score on per minute basis using ChartJs 1.0.2 .The xlables are getting overlapped after sometime. How can i plot the graph for a limited number of xAxis Labels to avoid the overlap. I am using Apache Zeppelin and AngularJs interpreter for the plotting. The code is as follows.

    lineChartData = {}; //declare an object
    lineChartData.labels = []; //add 'labels' element to object (X axis)
    lineChartData.datasets = []; //add 'datasets' array element to object



    //FIRST GRAPH: score
    var line = 0
    y = [];
    lineChartData.datasets.push({}); //create a new line dataset
    dataset = lineChartData.datasets[line]
    dataset.fillColor = "rgba(0, 0, 0, 0)";
    dataset.strokeColor = "rgba(75,192,192,0.4)";
    dataset.lineColor = "rgba(75,192,192,0.4)";
    dataset.label = "Score"
    dataset.data = []; // value data

    angular.forEach(newValue, function(x) {

        y.push(x._3); 
        if (line === 0)
            lineChartData.labels.push(x._2); //adds x axis labels
    }) 

    lineChartData.datasets[line].data = y; //send new line data to dataset

    //end FIRST GRAPH: score






   var options = {

      responsive: true,

        animation: false,


        multiTooltipTemplate: function(dataset) {
            //console.log(dataset)
          return dataset.datasetLabel+ " : " + dataset.value ;
          dataset.strokeColor='red';
                   } ,


    }

    ctx = canvas.getContext("2d");
    myLineChart = new Chart(ctx).Line(lineChartData, options);
    var legend = myLineChart.generateLegend();
    $("#legendDiv").html(legend);
    //document.getElementById("legendDiv").innerHTML = legend;

})
 }


if (window.L) {
initMap();
 } else {
console.log('Loading Leaflet library');
var sc = document.createElement('script');
sc.type = 'text/javascript';
sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js';
sc.onload = initMap;
sc.onerror = function(err) { alert(err); }
document.getElementsByTagName('head')[0].appendChild(sc);
}

Answer 1

I can think of following ways.

• Get only the data for limited time window to the variable but not get all data.
• Group the data to large time point
• Example the data for certain interval

BTW, It might be worth to wrap the code which convert to data to visualisation. It will be easier to change to a different chart or use different plot option.

If you don't have strong preference for chart.js, check spark-highcharts to see if it meets your plot needs, or create a similar wrapper to chart.js.