Question

I have a line chart that displays the data from a Google Spreadsheet, the datetime data is being updated every 3 to 4 seconds and I want the chart to only display some of it, like the hour for example. I can't use any of the highstocks funcionalities because it doesn't support the Google Spreadsheet service, at least that I know and feeding the CSV or JSON to highchart doesnt update automatically. Again, as far as I know.

So I'm stuck with Highcharts line chart, but I dont want the X axis to look so crowded. Take a look at the fiddle. http://jsfiddle.net/AYYCv/167/light/ And there's only little data.

Highcharts.setOptions({
chart: {
    zoomType: 'x'
},
plotOptions: {
    series: {
        visible: false,
    }

},
    legend: {
    enabled: true,
    align: 'right',
    backgroundColor: '#FFFFFF',
    borderColor: 'white',
    borderWidth: 2,
    layout: 'vertical',
    verticalAlign: 'top',
    y: 100,
},
title: {
    text: 'Produccion de Energía Solar'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    title: {
        text: 'Magnitud'
    }
}

});
$('#container4').highcharts({
data: {
    googleSpreadsheetKey: '0Aj8kPfvDA7mOdHpVMDVFbktmM0E4YjFIUkVUVC1RYlE'
},
plotOptions: {
    series: {
        visible: false
    }
}
 function(chart) {
chart.series[0].show();   
});`
Was it helpful?

Solution

You can increase tickInterval parameter

OTHER TIPS

Change the XAxis like this... It will rotate labels to specified degrees

xAxis: {
    type: 'datetime', labels:{rotation: -40}
  },

Thisl link helps for date formating http://api.highcharts.com/highstock#xAxis.dateTimeLabelFormats

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