How to make a SERIES line dashed in Google Line Chart?

791 views
Skip to first unread message

A. Farber

unread,
Jun 26, 2013, 8:47:46 AM6/26/13
to google-visua...@googlegroups.com

Hello!

In Google Line Chart how do you make a series line dashed?

For example the red line (called "Row B") in the screenshot below?


Below is my very simple test code, just open it in a browser and it will work instantly.

Please note that the usual suggestion to add certainty role:

    {"p":{"role":"certainty"},"label":"Dashed","type":"boolean"}

doesn't help here, because it would make dashed (parts of) the both lines (the rows "A" and "B").

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

        var data = {"rows":[
        {"c":[{"v":"C"},{"v":-43},{"v":-42}]},
        {"c":[{"v":"D"},{"v":-49},{"v":-39}]},
        {"c":[{"v":"E"},{"v":-49},{"v":-48}]},
        {"c":[{"v":"F"},{"v":-50},{"v":-49}]},
        {"c":[{"v":"G"},{"v":-57},{"v":-56}]}],

        "cols":[
        {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
        {"p":{"role":"data"},"label":"Row A","type":"number"},
        {"p":{"role":"data"},"label":"Row B","type":"number"}]};

        function drawCharts() {
            var x = new google.visualization.DataTable(data);

            var options = {
                title: 'How to make red line dashed?',
                width: 800,
                height: 600
            };

            var chart = new google.visualization.LineChart(document.getElementById('test'));
            chart.draw(x, options);
        }

        $(function() {
            google.setOnLoadCallback(drawCharts);
        });

</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

Thank you
Alex

P.S. I've also asked this question at Stackoverflow:
http://stackoverflow.com/questions/17318961/how-to-make-a-series-line-dashed-in-google-line-chart


Sergey Grabkovsky

unread,
Jun 26, 2013, 9:46:53 AM6/26/13
to google-visua...@googlegroups.com
Hi! I'm not entirely sure why you say that the certainty role doesn't work for you, since it works on a per-series basis. Here is a jsfiddle that shows this with your data. Is there any reason why this doesn't fit your needs?

- Sergey



--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Alexander Farber

unread,
Jun 26, 2013, 12:03:39 PM6/26/13
to google-visua...@googlegroups.com
Hello Sergey and others,

On Wed, Jun 26, 2013 at 3:46 PM, Sergey Grabkovsky <gra...@google.com> wrote:
Hi! I'm not entirely sure why you say that the certainty role doesn't work for you, since it works on a per-series basis. Here is a jsfiddle that shows this with your data. Is there any reason why this doesn't fit your needs?
On Wed, Jun 26, 2013 at 8:47 AM, A. Farber <alexande...@gmail.com> wrote:
I just don't understand, why the "certainty" row, 
that you've added only affects the "row A" series.... 

How do you make both series dashed then?
I've tried but failed here: http://jsfiddle.net/xhwJM/2/

Regards
Alex

asgallant

unread,
Jun 26, 2013, 12:26:41 PM6/26/13
to google-visua...@googlegroups.com
The certainty column applies to the column immediately preceeding it in the DataTable, so to make both lines dashed, you need to add the second certainty column after the first series, like this: http://jsfiddle.net/asgallant/xhwJM/4/
Reply all
Reply to author
Forward
0 new messages