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.
On Fri, Nov 9, 2018 at 7:59 PM Joshua Smith <[email protected]> wrote:
> 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
>
>
>
>
>
>
>
> On Friday, November 9, 2018 at 4:56:56 PM UTC-8, Joshua Smith wrote:
>>
>> 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>
>>
>>
>>
>> --
> 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 [email protected].
> To post to this group, send email to
> [email protected].
> 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
> <https://groups.google.com/d/msgid/google-visualization-api/8462297d-f0fb-4f66-9967-4b70104cc8ac%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
[email protected] <[email protected]> Cambridge MA
--
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 [email protected].
To post to this group, send email to [email protected].
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/CAOtcSJNVmZ0pPNgETvp5pWGpB1yjKe1oVsyuCJPw_%3DvX39nRGA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
