Plot vertical lines with different colors on area chart, google charts
I am trying to plot an area chart that has vertical lines for each date. I want to represent each line in a different color.
See below for details.
Please check my code below. $ session contains json data that represents the graph.
$session =
[["Date",{"role":"annotation"},"Value"],["2015-06-07",null,861],["2015-06-08",null,1381],["2015-06-09",null,2351],["2015-06-10",null,2125],["2015-06-11",null,1970],["2015-06-12",null,1745],["2015-06-13",null,1079],["2015-06-14",null,1087],["2015-06-15",null,2221],["2015-06-16",null,2176],["2015-06-17","Test ",1918],["2015-06-18",null,1826],["2015-06-19",null,1720],["2015-06-20",null,937],["2015-06-21",null,1094],["2015-06-22",null,2170],["2015-06-23",null,2085],["2015-06-24",null,1952],["2015-06-25",null,1865],["2015-06-26",null,1674],["2015-06-27",null,977],["2015-06-28",null,1005],["2015-06-29",null,2130],["2015-06-30",null,1913],["2015-07-01",null,1774],["2015-07-02",null,1891],["2015-07-03",null,1572],["2015-07-04",null,979],["2015-07-05",null,1024],["2015-07-06",null,2163],["2015-07-07",null,2041]]
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawVisualization() {
var session_data = <?php echo $session_data; ?>;
for (var index = 0; index < session_data.length; index++) {
session_data[index][0] = new Date(session_data[index][0]);
}
var data = google.visualization.arrayToDataTable(session_data);
var chart = new google.visualization.AreaChart(document.querySelector('#linechart_material'));
chart.draw(data, {
width: 1600,
height: 600,
annotation: {
1: {
style: 'line',
color: 'black'
},
2:{
style: 'line',
color: 'blue'
}
},
vAxis: {
gridlines: {
color: 'none'
},
baselineColor: 'green'
},
hAxis: {
gridlines: {
color: 'none'
}
},
series: {
0: {color: '#e7711b'},
1: {color: '#e2431e'},
2: {color: '#f1ca3a'},
3: {color: '#6f9654'},
4: {color: '#1c91c0'},
5: {color: '#43459d'},
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});
</script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
Please check the js fiddle - http://jsfiddle.net/sashant9/24qo18to/1/
source to share
In Chrome developer tools you can examine the mapped <svg>
and find xPath for annotation line (s) (vertical lines). In your example, this gives something like
//*[@id="linechart_material"]/div/div[1]/div/svg/g[2]/g[1]/g[4]/rect
With this information, you can now change the color of the annotation line (or whatever) in the out-of-the-box handler:
google.visualization.events.addListener(chart, 'ready', function() {
var rect = document.getElementById('linechart_material')
.querySelector('svg')
.querySelector('g:nth-of-type(2)')
.querySelector('g:nth-of-type(1)')
.querySelector('g:nth-of-type(4)')
.querySelector('rect')
rect.setAttribute('stroke', '#FF0000'); //red color
rect.setAttribute('stroke-width', '5'); //just to emphasize the point
});
demo -> http://jsfiddle.net/eLpkm14L/
Remember that if you change anything in the diagram, the structure <svg>
will also change. But with a little practice, it becomes fairly easy to find xPath and "translate" it into a slightly useful script like above. I have a feeling that you want multiple vertical lines with different colors. Then there will be only collection <rect>
instead of 1, you can customize targeting individually.
Update . As I wrote above, in the case of multiple lines of annotation, you only have a collection <rect>
:
google.visualization.events.addListener(chart, 'ready', function() {
var rects = document.getElementById('linechart_material')
.querySelector('svg')
.querySelector('g:nth-of-type(2)')
.querySelector('g:nth-of-type(1)')
.querySelector('g:nth-of-type(4)')
.querySelectorAll('rect')
for (var i=0;i<rects.length;i++) {
rects[i].setAttribute('stroke', getRandomColor());
rects[i].setAttribute('stroke-width', '5');
}
});
forked fiddle -> http://jsfiddle.net/zcb9bk68/
source to share