CODEWITHSUNDEEP
javascriptangularjschartsgoogle-visualization
mrkibzk
mrkibzk

Reputation: 227

Google visualisation charts

I have a problem with position of my chart, I want to put chart a 100% width from begin to end.

enter image description here

my code

test.controller('testCtrl', ['$scope', function ($scope) {
console.log('test chart');
var data = google.visualization.arrayToDataTable([
    ['Minute', 'A', 'B', 'C', 'D', 'E', 'F'],
    ['0 min', 0.72, 0.64, 0.55, 0.47, 0.68, 0.39],
    ['', 0.62, 0.69, 0.65, 0.51, 0.66, 0.37],
    ['45 min', 0.69, 0.51, 0.55, 0.43, 0.54, 0.44],
    ['', 0.79, 0.68, 0.70, 0.57, 0.59, 0.41],
    ['90 min', 0.66, 0.71, 0.66, 0.58, 0.63, 0.48]
]);
var options = {
    width: '100%',
    height: '100%',
    curveType: 'function',
    chartArea: {
        width: '90%',
        height: '80%'
    },
    legend: {
        position: 'top'
    }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}]);

thanks for help!

Upvotes: 1

Views: 101

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

to stretch the lines to the edges of the chart area,
will need to use a continuous x-axis ('number', 'date', etc...),
vs. discrete ('string' values)

see following working snippet.
the values in the first column of the data table are changed to simple numbers (0-4)

then object notation is used to assign the labels,
using hAxis.ticks

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Minute', 'A', 'B', 'C', 'D', 'E', 'F'],
      [0, 0.72, 0.64, 0.55, 0.47, 0.68, 0.39],
      [1, 0.62, 0.69, 0.65, 0.51, 0.66, 0.37],
      [2, 0.69, 0.51, 0.55, 0.43, 0.54, 0.44],
      [3, 0.79, 0.68, 0.70, 0.57, 0.59, 0.41],
      [4, 0.66, 0.71, 0.66, 0.58, 0.63, 0.48]
  ]);
  var options = {
      width: '100%',
      height: '100%',
      curveType: 'function',
      chartArea: {
          width: '90%',
          height: '80%'
      },
      legend: {
          position: 'top'
      },
      hAxis: {
          ticks: [
              {v: 0, f: '0 min'},
              {v: 1, f: ''},
              {v: 2, f: '45 min'},
              {v: 3, f: ''},
              {v: 4, f: '90 min'}
          ]
      }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions