How to group Json data based on Month and plot it using google chart

Question

I am using google chart plugin to plot a area chart,by using JSON data as show below code, which contains value and a date by the chart should be printed based on month.

Link show in image enter image description here

how to plot the chart based on month using google chart

is it possible to do it with google charts buit in features and need to write some customized javascript for that achive?

<script type="text/javascript">
google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Date', 'value'],
        [
            "1/Jan/2017",
            28
        ],
        [
            "5/Feb/2019",
            174
        ],
        [
            "8/Mar/2017",
            150
        ],
        [
            "2/Apr/2019",
            174
        ],
        [
            "18/May/2019",
            100
        ],
        [
            "22/Jun/2019",
            5
        ],
        [
            "30/Jul/2019",
            178
        ],
        [
            "28/Aug/2019",
            59
        ],
        [
            "1/Sep/2019",
            87
        ],
        [
            "10/Oct/2019",
            50
        ],
        [
            "15/Nov/2019",
            123
        ],
        [
            "20/Dec/2019",
            108
        ]


    ]);

    var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Date',
            titleTextStyle: {
                color: '#333'
            }
        },
        curveType: 'function',
        legend: {
            position: 'bottom'
        },
        pointSize: 5,
        dataOpacity: 0.5,
        vAxis: {
            minValue: 0
        }

    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

<div id="chart_div" style="width: 100%; height: 500px;"></div>

Answer 1

in order to format the x-axis as a date,
need to convert the first column in the data table from a string to an actual date...

we can use a data view with a calculated column to convert the date...

var view = new google.visualization.DataView(data);
view.setColumns([{
  type: 'date',
  label: 'Date',
  calc: function (dt, row) {
    return new Date(dt.getValue(row, 0));
  }
}, 1]);

also, since the data is not in order by date, we can convert the view back to a data table and sort it...

data = view.toDataTable();
data.sort([{column: 0}]);

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'value'],
    [
      "1/Jan/2017",
      28
    ],
    [
      "5/Feb/2019",
      174
    ],
    [
      "8/Mar/2017",
      150
    ],
    [
      "2/Apr/2019",
      174
    ],
    [
      "18/May/2019",
      100
    ],
    [
      "22/Jun/2019",
      5
    ],
    [
      "30/Jul/2019",
      178
    ],
    [
      "28/Aug/2019",
      59
    ],
    [
      "1/Sep/2019",
      87
    ],
    [
      "10/Oct/2019",
      50
    ],
    [
      "15/Nov/2019",
      123
    ],
    [
      "20/Dec/2019",
      108
    ]
  ]);
    

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    type: 'date',
    label: 'Date',
    calc: function (dt, row) {
      return new Date(dt.getValue(row, 0));
    }
  }, 1]);
  data = view.toDataTable();
  data.sort([{column: 0}]);

  var options = {
    chartArea: {bottom: 56},
    title: 'Company Performance',
    hAxis: {format: 'MMM', title: 'Date',  titleTextStyle: {color: '#333'} },
    curveType: 'function',
    legend: { position: 'bottom'},
    pointSize: 5,
    dataOpacity: 0.5,
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>