Line chart options not being applied

Joshua Smith

unread,

Nov 9, 2018, 7:56:56 PM11/9/18

to Google Visualization API

Hi,

I'm having a problem with a line chart where some of the options are not being applied.

Here is a jsfiddle - http://jsfiddle.net/joshuajsmith/3yakgucq/

Also for reference, the code is below.

I wonder if it has to do with the actual name of the property - they all have a dot in the middle. For example:

'backgroundColor.stroke': '#000000',

I'm not sure I'm specifying that correctly - ie using the tics around the property name. If I leave those out, then the browser gives me a javascript error - "SyntaxError: missing : after property id". It's interpreting just "backgroundColor" as the property and ".stroke" causes the error.

Am I specifying that correctly by using tics?

I did see that some properties only display for charts with a "Discreet" or with a "Continuous" axis. So I tried properties that work for only one of those as well as both, but still the same problem.

Thanks in advance for your help!

Josh

<head>  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawJoinRenewChart);
    function drawJoinRenewChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Joins');
        data.addColumn({type:'string', role:'tooltip'});
        data.addColumn('number', 'Renewals');
        data.addColumn({type:'string', role:'tooltip'});
        data.addRows([
                ['Jan', 719, 'Joins - Jan\'16 - 719', 964, 'Renewals - Jan\'16 - 964'],
                ['', 595, 'Joins - Feb\'16 - 595', 873, 'Renewals - Feb\'16 - 873'],
                ['', 670, 'Joins - Mar\'16 - 670', 990, 'Renewals - Mar\'16 - 990'],
                ['Apr', 606, 'Joins - Apr\'16 - 606', 781, 'Renewals - Apr\'16 - 781'],
                ['', 613, 'Joins - May\'16 - 613', 442, 'Renewals - May\'16 - 442'],
                ['', 519, 'Joins - Jun\'16 - 519', 655, 'Renewals - Jun\'16 - 655'],
                ['Jul', 509, 'Joins - Jul\'16 - 509', 683, 'Renewals - Jul\'16 - 683'],
                ['', 556, 'Joins - Aug\'16 - 556', 657, 'Renewals - Aug\'16 - 657'],
                ['', 583, 'Joins - Sep\'16 - 583', 684, 'Renewals - Sep\'16 - 684'],
        ]);
        var options = {
            title: 'Total Joins and Renewals Each Month',
            legend: { position: 'top' },
            backgroundColor: 'beige',
            chartArea: { width:'75%', height:'60%', left: 100 },
            pointSize: 3,
           
            // the following options seem to not be working
            'hAxis.textStyle': { color: 'black', fontName: 'Arial', fontSize: 8, bold: false, italic: false },
            'backgroundColor.stroke': '#000000',
            'backgroundColor.strokeWidth': 3,
            'chartArea.backgroundColor': 'lightblue',
            'hAxis.gridlines': {color: '#000', count: 8},
            'hAxis.gridlines.color': 'black',
            'hAxis.gridlines.count': 12,
            'hAxis.slantedTextAngle': 45,
            'vAxis.gridlines': {color: '#000', count: 8},
        };

        var chart = new google.visualization.LineChart(document.getElementById('join_renew_chart_div'));
        chart.draw(data, options);
    }
</script>
</head>
<html>
  <div id="join_renew_chart_div" style="width: 500px; height: 300px"></div>
</html>

Joshua Smith

unread,

Nov 9, 2018, 7:59:30 PM11/9/18

to Google Visualization API

I forgot to add ...

Here's the google documentation page that I'm using for the api reference:

https://developers.google.com/chart/interactive/docs/gallery/linechart

Thanks,

Josh

Daniel LaLiberte

unread,

Nov 9, 2018, 8:24:41 PM11/9/18

to google-visua...@googlegroups.com

The documentation uses a short-cut notation to describe options that are in nested substructures. So 'hAxis.textStyle' is really 'hAxis': { 'textStyle': ... }. etc. Sorry for the confusion.

--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8462297d-f0fb-4f66-9967-4b70104cc8ac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com Cambridge MA

Joshua Smith

unread,

Nov 13, 2018, 2:14:36 PM11/13/18

to Google Visualization API

Ah - no probs - thanks for the explanation!

I changed it to the following and it works:

hAxis : { textStyle : { color: 'black', fontName: 'Arial', fontSize: 15, bold: true, italic: false } } ,

However ... in case you have time for a related question ...

I'm trying to implement hAxis.gridlines in a similar way but that isn't working ...

I've tried adding this line ...

hAxis : { gridlines : { color: 'black' , count : 8 } },

And also this ....

hAxis : { textStyle : { color: 'black', fontName: 'Arial', fontSize: 15, bold: true, italic: false } ,
gridlines : { color: 'black' , count : 8 } } ,

But neither will show the gridlines.

**Note - I see in the documentation that hAxis.gridlines is only supported for a "continuous" axis.

I *think* my chart *is* a continuous axis because type of my data column is "number"

data.addColumn('number', 'Joins');

Am I doing that correctly?

I've updated my jsFiddle accordingly - http://jsfiddle.net/joshuajsmith/3yakgucq/

Thanks in advance for your help.

Josh

--
Daniel LaLiberte
dlali...@Google.com Cambridge MA

Kent Hendrix

unread,

Nov 30, 2018, 9:32:03 PM11/30/18

to Google Visualization API

Here is a set of new options that gets you most of the way there.

title: 'Total Joins and Renewals Each Month',

legend: { position: 'top' },

chartArea: { width:'75%', height:'60%', left: 100, backgroundColor: 'lightblue' },

pointSize: 3,

// the following options seem to not be working

hAxis:{

textStyle: { color: 'black', fontName: 'Arial', fontSize: 14, bold: true, italic: false },

slantedText:true,

slantedTextAngle: 45

},

vAxis:{

gridlines: {color: 'black', count: 8}

},

backgroundColor:{fill: 'beige',stroke: '#000000',strokeWidth: 3},

The hAxis gridlines only work on a continuous axis. so those won't apply.

You might have more success there if you change it to a month number that is continuous and label them well, then it would be continuous and the gridlines would work.

Cheers.

Reply all

Reply to author

Forward