Related
I have this Google chart and I cannot get the lower part (where date and time is) to show hours from 00 to 23, it always shows it with AM/PM.
I mean the area that is always visible, the other value that apepars on tooltip was formated OK, but not that lower part.
What am I doing wrong ?
I tried by that dateformatter code (it only seems to affect the tooltip date value).
And by this (not doing anything):
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
The jsfiddle
<script>
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
[new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
[new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
[new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
[new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
[new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
[new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
[new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
legend: {position: 'none'},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temp'},
1: {axis: 'Humidity'},
},
axes: {
y: {
Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
}
drawMaterialChart();
}
</script>
when drawing a material chart,
need to convert the options using static method --> google.charts.Line.convertOptions
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
this will ensure the supported options are included properly,
see following working snippet...
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({
pattern: 'dd/MM/yyyy HH:mm'
});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {
count: 15
}
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temp'
},
1: {
axis: 'Humidity'
},
},
axes: {
y: {
Temp: {
label: 'Temps (Celsius)',
range: {
max: 15,
min: 40
}
},
Humidity: {
label: 'Humidity (%)',
range: {max: 30, min: 90 }
},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity
I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)
use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to send null of Timeofday for represent empty value into Google charts but it throw error to me.
Cannot read property 'length' of null
How do I add null value of Timeofday type? This is my code.
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('timeofday', 'A');
data.addColumn('timeofday', 'B');
data.addRows([
[new Date(2016, 06, 1), [02, 51, 56], [02, 51, 56]],
[new Date(2016, 06, 2), [02, 51, 56], [02, 51, 56]],
[new Date(2016, 06, 3), null, [02, 51, 56]],
[new Date(2016, 06, 4), [02, 51, 56], [02, 51, 56]],
]);
var options = {
chart: {
title: 'Test',
subtitle: 'test'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
I expect my chart to be this, But in Timeofday type.
using a Core Chart vs. a Material Chart works...
you can use the following option to get the look and feel close to a Material Chart
theme: 'material'
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('timeofday', 'A');
data.addColumn('timeofday', 'B');
data.addRows([
[new Date(2016, 06, 1), [02, 51, 56], [02, 52, 56]],
[new Date(2016, 06, 2), [02, 51, 56], [02, 52, 56]],
[new Date(2016, 06, 3), null, [02, 52, 56]],
[new Date(2016, 06, 4), [02, 51, 56], [02, 52, 56]],
[new Date(2016, 06, 5), [02, 51, 56], [02, 52, 56]],
]);
var options = {
chart: {
title: 'Test',
subtitle: 'test'
},
theme: 'material',
width: 900,
height: 500
};
var chartCore = new google.visualization.LineChart(document.getElementById('linechart_core'));
chartCore.draw(data, options);
var chartMatl = new google.charts.Line(document.getElementById('linechart_material'));
chartMatl.draw(data, google.charts.Line.convertOptions(options));
},
packages: ['corechart', 'line']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart_core"></div>
<div id="linechart_material"></div>
i have faced the problem while creating triple y-axis in google charts .
The problem is space between right side axis. could you please help me.
i provided the following code snippet. In result, right y-axes are merged .could you provide what is way to give space /gap between them to look good. Thank you
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2},
3: {targetAxisIndex: 3}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'},
2: {title: 'third'},
3: {title: 'foruth'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div"></div>
i'm thinking this feature was intended for no more than two vAxes,
although it does appear to work, there aren't any config options to handle this
if you must have three, try textPosition
have one 'in' and the other 'out'
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
chartArea: {
width: '50%'
},
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2}
},
vAxes: {
0: {
textPosition: 'out',
title: 'Temps (Celsius)'
},
1: {
textPosition: 'in',
title: 'Daylight',
viewWindow: {
max: 30
}
},
2: {
textPosition: 'out',
title: 'third',
viewWindow: {
max: 40
}
}
},
hAxis: {
ticks: [
new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
My fiddle : https://jsfiddle.net/vbdy7fLe/1/
I'm trying to use google column chart and display multiple fields of data and by date. But I'm not sure why it doesn't display 02 Jan 2015 and 04 Jan 2015.
The data is there and here is my js code :
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['date', 'person A', 'person B'],
[new Date(2015, 0, 1), 1, 4, ],
[new Date(2015, 0, 2), 1, 4, ],
[new Date(2015, 0, 3), 6, 11, ],
[new Date(2015, 0, 4), 10, 5, ],
[new Date(2015, 0, 5), 10, 5, ]
]);
var options = {
chart: {
title: 'Meeting by weeks'
},
bars: 'vertical',
height: 400,
colors: ['#3498db', '#9b59b6', '#16a085'],
hAxis: {
format: 'dd MMM yyyy'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
It's not showing because googles function to draw the chart has decided that there is not enough space to write text on every single column.
Either try the setting for hAxis.slantedTextor try making your chart wider.