Google Chart - tailoring views - column indexes 0-4 - javascript

In order to reduce the number of fetches from database, I fetch all my data at once, and then tailor it with different views for more charts. In this case I have data table with ten columns (from 0 to 9) and want to show column 0 as X axis, 1 as AreaChart and additional two columns as lines on Combo Chart. Everithing works if I take columns up to 4. If I take e.g. column 7 with view.setColumns Google gives error message "Invalid column index 7. Should be an integer in the range [0-4]." Why indexes only 0-4 !!!???
Here it is how it looks like:
google.charts.load('current',{callback:init,'packages':['corechart'],'language':'hr'});
function init()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Relativna promjena');
data.addColumn('number','Kontinuiranost promjene');
data.addColumn('number','Prosjek obični u preth. 5 dana');
data.addColumn('number','Prosjek težinski u preth. 5 dana');
data.addColumn('number','Trend prema preth. 5 dana');
data.addColumn('number','Prosjek obični u preth. 10 dana');
data.addColumn('number','Prosjek težinski u preth. 10 dana');
data.addColumn('number','Trend prema preth. 10 dana');
data.addRows([
[new Date('2017-07-07'),11.92850,-0.13,-1,-3,-2.33333,11.96977,-5.5,-4,11.93431],
[new Date('2017-07-10'),11.94040,0.1,0,-3,-2.33333,11.9698,-5.5,-4,11.93224],
[new Date('2017-07-11'),11.96360,0.19,1,-3,-2.33333,11.95871,-5.5,-4,11.94423],
[new Date('2017-07-12'),11.95520,-0.07,0,-3,-2.33333,11.94968,-5.5,-4,11.96142],
[new Date('2017-07-13'),11.93310,-0.18,-1,-3,-2.33333,11.96335,-5.5,-4,11.97571],
[new Date('2017-07-14'),11.94130,0.07,0,-3,-2.33333,11.95136,-5.5,-4,11.97237],
[new Date('2017-07-17'),11.89760,-0.37,-1,-3,-2.33333,11.93811,-5.5,-4,11.96705],
[new Date('2017-07-18'),11.91230,0.12,0,-3,-2.33333,11.89439,-5.5,-4,11.93777],
[new Date('2017-07-19'),11.93750,0.21,1,-3,-2.33333,11.89151,-5.5,-4,11.91419],
[new Date('2017-07-20'),11.96080,0.2,2,-3,-2.33333,11.9183,-5.5,-4,11.9194],
[new Date('2017-07-21'),12.01040,0.41,3,-3,-2.33333,11.95357,-5.5,-4,11.93201],
[new Date('2017-07-24'),12.03320,0.19,4,-3,-2.33333,12.02595,-5.5,-4,11.95908],
[new Date('2017-07-25'),12.06780,0.29,5,-3,-2.33333,12.06525,-5.5,-4,11.99299],
[new Date('2017-07-26'),12.06780,0,5,-3,-2.33333,12.10184,-5.5,-4,12.04073],
[new Date('2017-07-27'),12.09690,0.24,6,-3,-2.33333,12.10942,-5.5,-4,12.07929],
[new Date('2017-07-28'),12.11120,0.12,7,-3,-2.33333,12.1175,-5.5,-4,12.11609],
[new Date('2017-07-31'),12.11100,-0,0,-3,-2.33333,12.13091,-5.5,-4,12.14988],
[new Date('2017-08-01'),12.14890,0.31,1,-3,-2.33333,12.12988,-5.5,-4,12.16061],
[new Date('2017-08-02'),12.06400,-0.7,0,-3,-2.33333,12.16005,-5.5,-4,12.17619],
[new Date('2017-08-03'),12.10260,0.32,1,-3,-2.33333,12.09797,-5.5,-4,12.14875]]);
var ComboOpt = {
height: 400,
annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}, highContrast: true},
animation:{ duration: 500, easing: 'out', startup: true },
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, gridlines: {count: 30}, showTextEvery: 7},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'bottom'},
series: {0: {type: 'area', color: "blue", pointsVisible: true},
1: {type: 'line'},
2: {type: 'line'}}
};
var view1a = new google.visualization.DataView(data);
view1a.setColumns([0,1,{sourceColumn:1,role:'annotation'},3,4]);
var chart1a = new google.visualization.ComboChart(document.getElementById('Chart1a'));
chart1a.draw(view1a,ComboOpt);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="Chart1a"></div>

there is a bug when using a DataView with animation.startup: true
an easy fix, while keeping animation on startup,
is to convert the view back to a data table --> view1a.toDataTable()
which can be done when drawing the chart...
chart1a.draw(view1a.toDataTable(),ComboOpt);
see following working snippet...
google.charts.load('current',{callback:init,'packages':['corechart'],'language':'hr'});
function init()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Relativna promjena');
data.addColumn('number','Kontinuiranost promjene');
data.addColumn('number','Prosjek obični u preth. 5 dana');
data.addColumn('number','Prosjek težinski u preth. 5 dana');
data.addColumn('number','Trend prema preth. 5 dana');
data.addColumn('number','Prosjek obični u preth. 10 dana');
data.addColumn('number','Prosjek težinski u preth. 10 dana');
data.addColumn('number','Trend prema preth. 10 dana');
data.addRows([
[new Date('2017-07-07'),11.92850,-0.13,-1,-3,-2.33333,11.96977,-5.5,-4,11.93431],
[new Date('2017-07-10'),11.94040,0.1,0,-3,-2.33333,11.9698,-5.5,-4,11.93224],
[new Date('2017-07-11'),11.96360,0.19,1,-3,-2.33333,11.95871,-5.5,-4,11.94423],
[new Date('2017-07-12'),11.95520,-0.07,0,-3,-2.33333,11.94968,-5.5,-4,11.96142],
[new Date('2017-07-13'),11.93310,-0.18,-1,-3,-2.33333,11.96335,-5.5,-4,11.97571],
[new Date('2017-07-14'),11.94130,0.07,0,-3,-2.33333,11.95136,-5.5,-4,11.97237],
[new Date('2017-07-17'),11.89760,-0.37,-1,-3,-2.33333,11.93811,-5.5,-4,11.96705],
[new Date('2017-07-18'),11.91230,0.12,0,-3,-2.33333,11.89439,-5.5,-4,11.93777],
[new Date('2017-07-19'),11.93750,0.21,1,-3,-2.33333,11.89151,-5.5,-4,11.91419],
[new Date('2017-07-20'),11.96080,0.2,2,-3,-2.33333,11.9183,-5.5,-4,11.9194],
[new Date('2017-07-21'),12.01040,0.41,3,-3,-2.33333,11.95357,-5.5,-4,11.93201],
[new Date('2017-07-24'),12.03320,0.19,4,-3,-2.33333,12.02595,-5.5,-4,11.95908],
[new Date('2017-07-25'),12.06780,0.29,5,-3,-2.33333,12.06525,-5.5,-4,11.99299],
[new Date('2017-07-26'),12.06780,0,5,-3,-2.33333,12.10184,-5.5,-4,12.04073],
[new Date('2017-07-27'),12.09690,0.24,6,-3,-2.33333,12.10942,-5.5,-4,12.07929],
[new Date('2017-07-28'),12.11120,0.12,7,-3,-2.33333,12.1175,-5.5,-4,12.11609],
[new Date('2017-07-31'),12.11100,-0,0,-3,-2.33333,12.13091,-5.5,-4,12.14988],
[new Date('2017-08-01'),12.14890,0.31,1,-3,-2.33333,12.12988,-5.5,-4,12.16061],
[new Date('2017-08-02'),12.06400,-0.7,0,-3,-2.33333,12.16005,-5.5,-4,12.17619],
[new Date('2017-08-03'),12.10260,0.32,1,-3,-2.33333,12.09797,-5.5,-4,12.14875]]);
var ComboOpt = {
height: 400,
annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}, highContrast: true},
animation:{ duration: 500, easing: 'out', startup: true },
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, gridlines: {count: 30}, showTextEvery: 7},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'bottom'},
series: {0: {type: 'area', color: "blue", pointsVisible: true},
1: {type: 'line'},
2: {type: 'line'}}
};
var view1a = new google.visualization.DataView(data);
view1a.setColumns([0,1,{sourceColumn:1,role:'annotation'},3,7]);
var chart1a = new google.visualization.ComboChart(document.getElementById('Chart1a'));
chart1a.draw(view1a.toDataTable(),ComboOpt);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="Chart1a"></div>

Related

How to stop font size defaulting after zooming in on a google chart

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>

How would I be able display the title in two lines with a different font size for each line?

I am using Google Chart API to create a time-line graph and want to modify the title of the graph into two lines.
Question:
How would I be able display the two lined chart title, with different font sizes.
Current Output:
Ideal Output:
Relevant Research:
The only thing I could find was was someone trying to do this with a pie chart, but I tried and couldn't make it work.
Two line title in google chart api
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',
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
}; //End var options
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
} //End drawChart()
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
unbeknownst to the other answer, modifications to the chart,
should only be made on the chart's 'ready' event.
else, the elements may not exist yet, when the modification is tried.
here, we determine the text content of the label we want to change.
find the label containing the content,
then reduce the font size of the element.
// listen for chart ready event
google.visualization.events.addListener(chart, 'ready', function () {
// get label copy to change
var labelContent = options.title.substring(options.title.indexOf('\n') + 1);
// get chart labels
var labels = chart.getContainer().getElementsByTagName('text');
// find chart label
for (var i = 0; i < labels.length; i++) {
if (labels[i].textContent === labelContent) {
// reduce font size
var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
labels[i].setAttribute('font-size', currentFontSize - 4);
break;
}
}
});
note: the font size may vary, depending on the size of the chart.
unless the font size is explicitly set in the chart options.
also, the event listener must be assigned after the chart is created,
and before the chart is drawn.
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',
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
}; //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.substring(options.title.indexOf('\n') + 1);
// get chart labels
var labels = chart.getContainer().getElementsByTagName('text');
// find chart label
for (var i = 0; i < labels.length; i++) {
if (labels[i].textContent === labelContent) {
// reduce font size
var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
labels[i].setAttribute('font-size', currentFontSize - 4);
break;
}
}
});
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
for multiple lines, use the split method, instead of substring.
then change the font size of all matching labels, except the first.
// 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;
}
}
}
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\nLine 4\nLine 5',
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
}; //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);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

i have faced the issue while creating triple y-axis

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>

Prevent rounding of datetime column in Google graphs X axis

I have a working google chart that shows data for the last 24 hours, one data set for each hour (ex 01:00 to 01:59...etc). Now I am trying to modify it to make it show data for the last 24 hours but in 60 minutes chuncks starting from the current time (ex 17:20 to 18:19... etc). This is the code I am working on (https://jsfiddle.net/70boo2ss/):
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'Col 1');
data.addColumn('number', 'Col 2');
data.addColumn('number', 'Percentage');
data.addRows([
[new Date(1454963244*1000),329,35,10.64],
[new Date(1454959644*1000),17,1,5.88],
[new Date(1454956044*1000),60,24,40.00],
[new Date(1454952444*1000),60,24,40.00],
[new Date(1454948844*1000),60,24,40.00],
[new Date(1454945244*1000),60,24,40.00],
[new Date(1454941644*1000),60,24,40.00],
[new Date(1454938044*1000),60,24,40.00],
[new Date(1454934444*1000),60,24,40.00],
[new Date(1454930844*1000),60,24,40.00],
[new Date(1454927244*1000),60,24,40.00],
[new Date(1454923644*1000),60,24,40.00],
[new Date(1454920044*1000),60,24,40.00],
[new Date(1454916444*1000),60,24,40.00],
[new Date(1454912844*1000),60,24,40.00],
[new Date(1454909244*1000),60,24,40.00],
[new Date(1454905644*1000),60,24,40.00],
[new Date(1454902044*1000),60,24,40.00],
[new Date(1454898444*1000),60,24,40.00],
[new Date(1454894844*1000),60,24,40.00],
[new Date(1454891244*1000),60,24,40.00],
[new Date(1454887644*1000),60,24,40.00],
[new Date(1454884044*1000),60,24,40.00],
[new Date(1454880444*1000),60,24,40.00],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 3);
var options = {
width: 1600,
height: 500,
backgroundColor: '#f1f1f1',
colors: ['#ff851b', '#03a9f4', '#8dc859'],
chartArea: {top:50, left:50, width: 1500},
hAxis: {format: 'h:mma', textStyle: { fontSize: '12' }, gridlines: { count: 24 }},
vAxes:[
{ },
{ gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
max:100,
min:0
}}],
series:[
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:1}
]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
As you can see on jsfiddle, the graphical data gets offset to the correct datetime chunks of 60mins, but the horizontal axis starts at :00
How do I make the horizontal axis start the same as the graphical representation instead of :00?
You can set your own ticks and viewWindow: {min: lowest_date_in_data} for the hAxis.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'Col 1');
data.addColumn('number', 'Col 2');
data.addColumn('number', 'Percentage');
data.addRows([
[new Date(1454963244*1000),329,35,10.64],
[new Date(1454959644*1000),17,1,5.88],
[new Date(1454956044*1000),60,24,40.00],
[new Date(1454952444*1000),60,24,40.00],
[new Date(1454948844*1000),60,24,40.00],
[new Date(1454945244*1000),60,24,40.00],
[new Date(1454941644*1000),60,24,40.00],
[new Date(1454938044*1000),60,24,40.00],
[new Date(1454934444*1000),60,24,40.00],
[new Date(1454930844*1000),60,24,40.00],
[new Date(1454927244*1000),60,24,40.00],
[new Date(1454923644*1000),60,24,40.00],
[new Date(1454920044*1000),60,24,40.00],
[new Date(1454916444*1000),60,24,40.00],
[new Date(1454912844*1000),60,24,40.00],
[new Date(1454909244*1000),60,24,40.00],
[new Date(1454905644*1000),60,24,40.00],
[new Date(1454902044*1000),60,24,40.00],
[new Date(1454898444*1000),60,24,40.00],
[new Date(1454894844*1000),60,24,40.00],
[new Date(1454891244*1000),60,24,40.00],
[new Date(1454887644*1000),60,24,40.00],
[new Date(1454884044*1000),60,24,40.00],
[new Date(1454880444*1000),60,24,40.00],
]);
// build ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 3);
var options = {
width: 1600,
height: 500,
backgroundColor: '#f1f1f1',
colors: ['#ff851b', '#03a9f4', '#8dc859'],
chartArea: {top:50, left:50, width: 1500},
hAxis: {
format: 'h:mma',
textStyle: { fontSize: '12' },
gridlines: { count: 24 },
ticks: ticks, // set ticks
// set min window
viewWindow: {min: data.getValue(data.getNumberOfRows() - 1, 0)}},
vAxes:[
{ },
{ gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
max:100,
min:0
}}],
series:[
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:1}
]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Multiple trendlines in Google Charts

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

Categories