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 screen1screen2

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

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -