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
Related
I am using Google Chart API to create a time-line graph and want the strings underneath the title of the graph to continue to be at the same font size, irrespective of the graph being zoomed in or not.
Question:
After I zoom in into the graph the strings (Average Event ..., line 3) underneath the title default to the original size, how can I make it so that when zoomed in, or after zooming in these lines (Average Event ..., line 3) continue to stay in the original text size
Current Output:
Before zooming:
After zooming:
Ideal Output:
Relevant Research:
I could not find any reference, or anyone who had a similar issue.
MWE:
google.charts.load('current', {'packages':['corechart']})
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[new Date(2021, 11, 31, 0, 0, 0), 0, ''],
[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
[new Date(2021, 11, 31, 5, 56, 41), 0, ''],
[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
[new Date(2021, 11, 31, 12, 11, 5), 0, ''],
[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
[new Date(2021, 11, 31, 15, 14, 6), 0, ''],
[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]); //End data.addRows([])
var options = {
title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s\nline 3',
tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
width: 1100,
height: 500,
lineWidth: 1,
chartArea:{width: 900, height:150 },
series: { 0: { color: '#188785', areaOpacity: 1.0}},
legend: {position: 'none'},
enableInteractivity: true,
hAxis: {
title: 'Date \& Time',
titleTextStyle: {bold: false, italic: false},
format: 'dd/MM/yyyy HH:mm',
slantedText:true,
slantedTextAngle:90,
gridlines: {color: 'none'},
}, //End hAxis
vAxis: {
title: 'Events Triggered',
titleTextStyle: {bold: false, italic: false},
viewWindow: {min: 0, max: 1},
ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
gridlines: { color: 'transparent' }
}, //End vAxis
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 20.0,
}, //End explorer
}; //End var options
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
// listen for chart ready event
google.visualization.events.addListener(chart, 'ready', function () {
// get label copy to change
var labelContent = options.title.split('\n');
// get chart labels
var labels = chart.getContainer().getElementsByTagName('text');
// loop chart title lines, beginning with second line
for (var l = 1; l < labelContent.length; l++) {
// find chart label
for (var i = 0; i < labels.length; i++) {
if (labels[i].textContent === labelContent[l]) {
// reduce font size
var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
labels[i].setAttribute('font-size', currentFontSize - 4);
break;
}
}
}
});
chart.draw(data, options);
} //End drawChart()
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
since the chart does not register a "zoom" event,
we'll need to use a MutationObserver
which will let us know anytime the chart changes.
// listen for changes to the chart
var observer = new MutationObserver(setTitle);
observer.observe(chart.getContainer(), {
childList: true,
subtree: true
});
we'll create the MutationObserver during the 'ready' event.
after saving the original font size.
see following working snippet...
google.charts.load('current', {'packages':['corechart']})
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[new Date(2021, 11, 31, 0, 0, 0), 0, ''],
[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
[new Date(2021, 11, 31, 5, 56, 41), 0, ''],
[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
[new Date(2021, 11, 31, 12, 11, 5), 0, ''],
[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
[new Date(2021, 11, 31, 15, 14, 6), 0, ''],
[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]); //End data.addRows([])
var options = {
title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s\nline 3',
tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
width: 1100,
height: 500,
lineWidth: 1,
chartArea:{width: 900, height:150 },
series: { 0: { color: '#188785', areaOpacity: 1.0}},
legend: {position: 'none'},
enableInteractivity: true,
hAxis: {
title: 'Date \& Time',
titleTextStyle: {bold: false, italic: false},
format: 'dd/MM/yyyy HH:mm',
slantedText:true,
slantedTextAngle:90,
gridlines: {color: 'none'},
}, //End hAxis
vAxis: {
title: 'Events Triggered',
titleTextStyle: {bold: false, italic: false},
viewWindow: {min: 0, max: 1},
ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
gridlines: { color: 'transparent' }
}, //End vAxis
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 20.0,
}, //End explorer
}; //End var options
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
var origFontSize;
// listen for chart events
google.visualization.events.addListener(chart, 'ready', function () {
// save font size of chart label
var labels = chart.getContainer().getElementsByTagName('text');
origFontSize = parseInt(labels[0].getAttribute('font-size')) - 4;
setTitle();
// listen for changes to the chart
var observer = new MutationObserver(setTitle);
observer.observe(chart.getContainer(), {
childList: true,
subtree: true
});
});
function setTitle() {
// get label copy to change
var labelContent = options.title.split('\n');
// get chart labels
var labels = chart.getContainer().getElementsByTagName('text');
// loop chart title lines, beginning with second line
for (var l = 1; l < labelContent.length; l++) {
// find chart label
for (var i = 0; i < labels.length; i++) {
if (labels[i].textContent === labelContent[l]) {
// reduce font size
labels[i].setAttribute('font-size', origFontSize);
break;
}
}
}
}
chart.draw(data, options);
} //End drawChart()
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to remove labels(c1,c2,c3,c4) from my bars.
I tried styling with:
timeline: {barLabelStyle: ...}
but nothing works for me (I thought about set font color to color of bar, but docs says ,,You can't set the color of barLabel text."
jsfiddle: https://jsfiddle.net/550wb2t0/1/
You can use --> timeline: { showBarLabels: false }
google.charts.load('44', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Activity', 'Category', 'Start Time', 'End Time'],
['Sleep', 'c1',
new Date(2014, 10, 15, 12, 30, 0, 120),
new Date(2014, 10, 15, 14, 30, 20, 550)
],
['Eat Breakfast', 'c2',
new Date(2014, 10, 15, 12, 30, 55),
new Date(2014, 10, 15, 14, 31, 55)
],
['Commute Home', 'c3',
new Date(2014, 10, 15, 12, 29, 30),
new Date(2014, 10, 15, 14, 30, 0)
],
['Commute Home', 'c4',
new Date(2014, 10, 15, 14, 30),
new Date(2014, 10, 15, 18)
]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
c1: '#e63b6f',
c2: '#19c362',
c3: '#592df7',
c4: '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 1)]);
}
console.log(JSON.stringify(colors));
var options = {
height: 450,
colors: colors,
timeline: { showBarLabels: false }
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
<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.
I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.
Here is my code example with a single line based on a date and value to build the chart:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value');
data.addRow([new Date(2013, 3, 11), 10]);
data.addRow([new Date(2013, 4, 02), 650]);
data.addRow([new Date(2013, 5, 03), 55]);
data.addRow([new Date(2013, 6, 04), 95]);
data.addRow([new Date(2013, 7, 05), 400]);
data.addRow([new Date(2013, 8, 06), 600]);
data.addRow([new Date(2014, 0, 07), 800]);
data.addRow([new Date(2014, 1, 08), 900]);
data.addRow([new Date(2014, 2, 09), 3127]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip:{isHtml: true},
trendlines: {
0: {color: 'red'}
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
I wan't to do it like this image:Image_example
jsfiddle example: http://jsfiddle.net/w3ez9gwb/
Just add more columns of your data:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 100, 10],
[new Date(2013, 4, 02), 50, 650],
[new Date(2013, 5, 03), 70, 55],
[new Date(2013, 6, 04), 80, 95],
[new Date(2013, 7, 05), 50, 400],
[new Date(2013, 8, 06), 10, 600],
[new Date(2014, 0, 07), 20, 800],
[new Date(2014, 1, 08), 300, 900],
[new Date(2014, 2, 09), 100, 312]
]);
Then add the trendlines to your chart options like so:
var chartOptions = {
tooltip: {
isHtml: true
},
trendlines: {
0: {
color: 'red'
},
1: {
color: 'yellow'
},
},
...
};
Full example: JSFiddle
I want to make a chart that showing data with 4 month interval (3 period/year).
and i want the x-axis label showing the year and the period like image below:
http://i.stack.imgur.com/eerSy.png
what i've done so far :
var data = [[1262278800000,87.5],[1293814800000,750],[1325350800000,100],[1356973200000,25],[1371229200000,87.5],[1388422800000,0],[1388509200000,375],[1402765200000,100],[1419958800000,1000]];
var tahunsekarang=new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: { mode: "time",tickSize: [4, "month"] , timeformat: "%Y",panRange: [1262217600000, tahunsekarang]},
yaxis: {panRange: [0, 1500] },
pan: { interactive: true},
series: {lines: {show: true},points: {show: true}},
});
but since I made it pan: { interactive: true} so when i drag the chart, the tickline is always change value, it made the chartline not fit in the tick line
1) If you want fixed ticks when you drag the chart you have to give a fixed ticks array instead of the tickSize option.
2) To give the Roman number for the trimester you can use a tickFormatter function instead of the timeformat option.
New options object:
xaxis: {
mode: "time",
ticks: ticks,
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
See the code snippet below (or this fiddle) for a working example:
var data = [
[1262278800000, 87.5],
[1293814800000, 750],
[1325350800000, 100],
[1356973200000, 25],
[1371229200000, 87.5],
[1388422800000, 0],
[1388509200000, 375],
[1402765200000, 100],
[1419958800000, 1000]
];
var ticks = [
new Date(2010, 0, 1).valueOf(),
new Date(2010, 4, 1).valueOf(),
new Date(2010, 8, 1).valueOf(),
new Date(2011, 0, 1).valueOf(),
new Date(2011, 4, 1).valueOf(),
new Date(2011, 8, 1).valueOf(),
new Date(2012, 0, 1).valueOf(),
new Date(2012, 4, 1).valueOf(),
new Date(2012, 8, 1).valueOf(),
new Date(2013, 0, 1).valueOf(),
new Date(2013, 4, 1).valueOf(),
new Date(2013, 8, 1).valueOf(),
new Date(2014, 0, 1).valueOf(),
new Date(2014, 4, 1).valueOf(),
new Date(2014, 8, 1).valueOf(),
new Date(2015, 0, 1).valueOf(),
new Date(2015, 4, 1).valueOf(),
new Date(2015, 8, 1).valueOf(),
];
var tahunsekarang = new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: {
mode: "time",
//tickSize: [4, "month"],
ticks: ticks,
//timeformat: "%Y",
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
yaxis: {
panRange: [0, 1500]
},
pan: {
interactive: true
},
series: {
lines: {
show: true
},
points: {
show: true
}
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>
<div style="height: 400px; width: 600px;" id="chartTabamaProduktifitas"></div>