javascript - Line chart auto scaling -
i'm using google visualization charts in grails app. i'm using line chart present data behaves oddly when add alot rows data here screens
how prevent such scalling ? woudl scalling same when have alot data , none data. don't mean length of chart because natural gets bigger when add more data, size of labels haxis
labels , vaxis label getting bigger without reason here how created chart
visualization.draw(visualization_data, {width: 55840, title: 'wykres wydajno\u015bci', vaxis: {textposition: 'in'}, haxis: {direction: 1, slantedtext: true, slantedtextangle: 90}, pointsize: 10, chartarea: {top: 10, width: '50%', height: '50%', left: 10}, legend: {position: 'right'}});
and styling
#linechart { overflow-x: scroll; overflow-y: hidden; width: 100%; height: 500px; }
you can use textstyle
option on both axis' set fontsize
textstyle: { fontsize: 12 }
see following working snippet...
(but width: 55840
seems wide??)
google.charts.load('current', { callback: function () { var data = new google.visualization.datatable(); data.addcolumn('date', 'date'); data.addcolumn('number', '2005'); data.addcolumn('number', '2006'); data.addrows([ [new date('01/01/2016'), 200, 210], [new date('01/02/2016'), 190, 220], [new date('01/03/2016'), 205, 200], [new date('01/04/2016'), 220, 230], [new date('01/05/2016'), 212, 210], [new date('01/06/2016'), 185, 193], [new date('01/07/2016'), 196, 207], [new date('01/08/2016'), 200, 210], [new date('01/09/2016'), 190, 220], [new date('01/10/2016'), 205, 200], [new date('01/11/2016'), 220, 230], [new date('01/12/2016'), 212, 210], [new date('01/13/2016'), 185, 193], [new date('01/14/2016'), 196, 207], [new date('01/15/2016'), 200, 210], [new date('01/16/2016'), 190, 220], [new date('01/17/2016'), 205, 200], [new date('01/18/2016'), 220, 230], [new date('01/19/2016'), 212, 210], [new date('01/20/2016'), 185, 193], [new date('01/21/2016'), 196, 207], [new date('01/22/2016'), 200, 210], [new date('01/23/2016'), 190, 220], [new date('01/24/2016'), 205, 200], [new date('01/25/2016'), 220, 230], [new date('01/26/2016'), 212, 210], [new date('01/27/2016'), 185, 193], [new date('01/28/2016'), 196, 207], [new date('01/29/2016'), 200, 210], [new date('01/30/2016'), 190, 220], [new date('01/31/2016'), 205, 200] ]); var options = { width: 55840, height: 800, title: 'wykres wydajno\u015bci', vaxis: { textposition: 'in', textstyle: { fontsize: 12 } }, haxis: { direction: 1, slantedtext: true, slantedtextangle: 90, textstyle: { fontsize: 12 } }, pointsize: 10, chartarea: {top: 10, width: '50%', height: '50%', left: 10}, legend: {position: 'right'} }; var chart = new google.visualization.linechart(document.getelementbyid('linechart')); chart.draw(data, options); }, packages: ['corechart'] });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="linechart"></div>
Comments
Post a Comment