CODEWITHSUNDEEP
javascriptsvggoogle-visualizationjsapi
Sashant Pardeshi
Sashant Pardeshi

Reputation: 1095

Plot vertical lines with different colors on area chart, google charts

I am trying to plot an area chart which have vertical lines for each date. I want to represent each line with different color.

Please refer image below for details.

enter image description here

Please check my code below. $session variable contains the json data which represents 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 js fiddle - http://jsfiddle.net/sashant9/24qo18to/1/

Upvotes: 3

Views: 2014

Answers (2)

davidkonrad
davidkonrad

Reputation: 85568

In chrome developer tools you can investigate the rendered <svg> and find the xPath for the annotation line(s) (vertical lines). In your example it 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 annotation line color (or anything else) in a ready 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
});

enter image description here

demo -> http://jsfiddle.net/eLpkm14L/

Remember that if you change anything in the chart, the <svg> structure will change too. But with some little practice it becomes quite easy to find the xPath and "translate" it to a little useful script as above. I have the feeling that you want to have multiple vertical lines with different colors. Then there will just be a collection of <rect>'s instead of 1, you can target individually.

Update. As I wrote above, in case of multiple annotation lines you just have a collection of <rect>'s :

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');     
   }     
});

enter image description here

forked fiddle -> http://jsfiddle.net/zcb9bk68/

Upvotes: 2

Patel
Patel

Reputation: 1478

You need stemColor property of annotations to color those lines.

annotations: {
    stemColor: 'red'
}

Here is the updated Fiddle. For more options to edit the annotations, find the documentation here

Upvotes: 2

Related Questions