user2986042 user2986042 - 1 month ago 7
Javascript Question

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 :


  • I need to change the 1k , 2.k to normal values like 100MB , 200 MB
    like this .

  • Next i need to increase the vertical counts , and horizontal counts .

  • Then i need to remove
    Year
    from the Chart . I need only 2 prams
    Sales
    and
    expense
    .

  • Next how can i change the bar color ? and can i add a label inside a
    Graph ?



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 ?

Answer

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.