I have the following code and json file. I'd like to change the hAxis to date, but nothing seems to work. I've tried format:'MMM-dd' in data options, but it doesn't work. Is it something about the json structure that Im parsing?
There are some array structure in Google Chart using new Date(Y, m, d). Do I have to use that? Or is there a way to adapt my script to date format? Thanks!
JSON file:
{
"RAIL3": {
"2021-02-12": "20.18",
"2021-02-11": "19.81",
"2021-02-10": "20.13",
"2021-02-09": "20.85",
"2021-02-08": "21.35",
"2021-02-05": "21.35",
"2021-02-04": "21.50",
"2021-02-03": "21.70",
"2021-02-02": "20.77",
"2021-02-01": "21.10",
"2021-01-29": "20.30",
"2021-01-28": "20.92",
"2021-01-27": "20.74",
"2021-01-26": "20.67",
"2021-01-22": "20.85",
"2021-01-21": "20.89",
"2021-01-20": "21.03",
"2021-01-19": "21.10",
"2021-01-18": "20.92",
"2021-01-15": "21.21",
"2021-01-14": "20.74"
},
"ABEV3": {
"2021-02-12": "14.79",
"2021-02-11": "14.95",
"2021-02-10": "15.01",
"2021-02-09": "14.96",
"2021-02-08": "14.94",
"2021-02-05": "15.52",
"2021-02-04": "15.60",
"2021-02-03": "15.68",
"2021-02-02": "15.61",
"2021-02-01": "15.60",
"2021-01-29": "15.11",
"2021-01-28": "15.54",
"2021-01-27": "15.39",
"2021-01-26": "15.40",
"2021-01-22": "15.15",
"2021-01-21": "15.61",
"2021-01-20": "16.02",
"2021-01-19": "16.27",
"2021-01-18": "16.22",
"2021-01-15": "15.95",
"2021-01-14": "16.26"
},
"BBAS3": {
"2021-02-12": "33.75",
"2021-02-11": "33.94",
"2021-02-10": "33.81",
"2021-02-09": "34.28",
"2021-02-08": "33.87",
"2021-02-05": "33.96",
"2021-02-04": "34.19",
"2021-02-03": "34.33",
"2021-02-02": "34.06",
"2021-02-01": "34.29",
"2021-01-29": "33.86",
"2021-01-28": "34.54",
"2021-01-27": "33.59",
"2021-01-26": "32.79",
"2021-01-22": "33.69",
"2021-01-21": "34.18",
"2021-01-20": "34.53",
"2021-01-19": "35.32",
"2021-01-18": "35.93",
"2021-01-15": "36.30",
"2021-01-14": "37.46"
}
}
Html+JS file:
<!DOCTYPE html>
<html>
<head>
<title>Google Chart test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "json_file.json",
dataType: "json",
async: false
}).responseJSON;
var key = "ABEV3";
var ar = Object.entries(jsonData[key]).map(([a, b]) => [(a), Number(b)]);
var data = new google.visualization.DataTable();
var options = {
legend: 'none',
colors: ['#00FF00'],
smoothLine: true,
width: 400,
height: 400,
'chartArea': {
'backgroundColor': {
'fill': 'transparent'
}
},
vAxis: {
baselineColor: 'transparent',
gridlines: {
color: '#f3f3f3',
}
},
hAxis: {
format: 'dd/MM/yy'
},
};
data.addColumn('string', 'date');
data.addColumn('number', 'value');
data.addRows(ar);
data.sort([{column: 0}]);
var container = document.getElementById('chart_div')
var chart = new google.visualization.AreaChart(container);
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 100%"></div>
</body>
</html>
For the formatter to work you need to ensure your date values are Date objects and the column type is "date".
Example: https://codepen.io/alexpetergill/pen/c4d97e495fe4ce259dadc9ccb0451c03
At the moment, you are using "strings".
See this line:
var ar = Object.entries(jsonData[key]).map(([a, b]) => [new Date(a), Number(b)]);
And also see this line:
data.addColumn('date', 'date');