Google Charts: Does not show all Abels and the chart gets pasted at the top

Asked

Viewed 567 times

2

   
 function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Day');
        data.addColumn('number', 'AVG Position');
        data.addRows([
            [new Date('2015-04-14'),2.3],
            [new Date('2015-04-13'),2.6],
            [new Date('2015-04-12'),2.7],
            [new Date('2015-04-11'),2.8],
            [new Date('2015-04-10'),2.7],
            [new Date('2015-04-09'),2.6],
            [new Date('2015-04-08'),0.0],
            [new Date('2015-04-07'),0.0],
            [new Date('2015-04-06'),2.7],
            [new Date('2015-04-05'),2.2]
        ]);
    
    var formatadata = new google.visualization.DateFormat({pattern: 'dd/MM',  timeZone: 0}).format(data, 0);
    
    var options = {
          title: 'AVG Position',
          theme: 'maximized',
          chartArea: {width: '100%', height: '100%'},
          legend: {position: 'none'},
          width: 600, height: 250,
          hAxis: { format: 'dd/MM' },
          pointSize: 5
        };
    
    chart = new google.visualization.AreaChart(document.getElementById('chart')).draw(data, options);
 
}

drawChart();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
</script>
<div id="chart"></div>

Problems:

1) The line is very glued at the top, necessary to pass the mouse to get an idea of what the highest values are. Even taking away the Settings of Theme and chartarea, the graph remains glued to the top. I would like to leave a slack to improve the graph view. I could set a value using max and min, but the values are not predefined.

2) Does not show start and end date, already tried with showEvery:1 and nothing.

1 answer

1

 chartArea: {width: '100%', height: '100%', left: 10, top: 20},

  • the top and left just reposition Chart inside the div, having no practical effect.

  • TOP does not 'detach' the Top Hart, avoiding sticking together ?

  • the post has been edited, the code included and the fiddle has been removed. Look how strange is the graphic: https://jsfiddle.net/snkfqfhy/

  • I did a gambiarra vAxis: { maxValue: (data.getColumnRange(1).max + (data.getColumnRange(1).max / 10))},

  • It can be like this: title: 'AVG Position',&#xA;chartArea: {top: 20},&#xA;hAxis: { format: 'dd/MM' },&#xA;pointSize: 5,&#xA;vAxis: {minValue: 0}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.