CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user2986042
user2986042

Reputation: 1280

How to customize Google barchart_material chart?

I am creating a chart using google chart with barchart_material type .

Here is the HTML code from 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2014', 1000, 400],
          ['2015', 1170, 460],
          ['2016', 660, 1120],
          ['2017', 1030, 540]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

This is working fine Demo .

I want to customize this graph my requirements are :

When i change my alignment to

<div id="barchart_material" style="width: 700px; height: 400px;"></div>

I can see only 3 horizontal counts . I want to add more counts . I got some code after searching for vertical counts and horizontal counts like : vAxis: { minValue: 0, gridlines: { color: '#f3f3f3', count: 6 } }

But this is not working now . Any problems . How can i change this graph to new level ? need to change the bar color , add label etc. Any suggestions ?

Upvotes: 0

Views: 151

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You can use HighCharts for your puprose, it provides lot of options to customize,

Same chart using Highcharts:

  $scope.chartXLabels = ['Year', 'Sales', 'Expenses'];
  $scope.chartSeries = [
  {
    "name": "2014",
    "data": [1000, 400]
  },
  {
    "name": "2015",
    "data": [ 1170, 460]
  },
  {
    "name": "2017",
    "data": [ 1170, 460]
  }
];


  console.log($scope.chartSeries);
  $scope.chartConfig = {
    options: {
      chart: {
        type: 'line'
      },
      plotOptions: {

      },
      yAxis: {
        title: {
          text: 'Usage'
        }
      }
    },
    xAxis: {
      title: {
        text: 'Date'
      },
      categories: $scope.chartXLabels
    },
    series: $scope.chartSeries,
    title: {
      text: 'User Usage Monthly'
    },
    credits: {
      enabled: false
    },
    loading: false
  }

Here is a sample.

Upvotes: 2

Related Questions