Hi Daniel, Okay, I've got the x-axis intervals, but I can't get the area-chart added to the chart. Should I just add the max as value? Somehow the chart doesn't list the values as an area:
<div> <div id="chart_div" style="height: 500px; width: 1400px;"></div> </div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <script type="text/javascript"> google.charts.load('current', { 'packages' : [ 'corechart' ] }); google.charts.setOnLoadCallback(drawChart); var redCross = 'point { size: 15; shape-type: star; shape-sides: 4; shape-dent: 0.1; fill-color: #ff0000;}'; var greyCross = 'point { size: 10; shape-type: star; shape-sides: 4; shape-dent: 0.1; fill-color: #999999; }' function drawChart() { var data = google.visualization.arrayToDataTable( [ ['Birth', 'Score', {'type': 'string', 'role': 'style'}, 'Area' ], [ new Date(2016, 4, 15), 0.128, redCross, null], [ new Date(2016, 5, 23), 0.13, redCross, null ], [ new Date(2016, 7, 11), 0.135, redCross, null ], [ new Date(2016, 7, 15), 0.142, redCross, null ], [ new Date(2016, 8, 16), 0.152, redCross, null ], [ new Date(2016, 8, 28), 0.157, redCross, null ], [ new Date(2016, 11, 3), 0.153, redCross, 0.2 ], [ new Date(2016, 11, 6), 0.16, redCross, 0.2 ], [ new Date(2016, 11, 14), 0.169, redCross, 0.2 ], [ new Date(2016, 12, 15), 0.175, redCross, null ], [ new Date(2016, 3, 30), 0.134, greyCross, null ], [ new Date(2016, 4, 14), 0.148, greyCross, null ], [ new Date(2016, 4, 15), 0.140, greyCross, null ], [ new Date(2016, 4, 25), 0.15, greyCross, null ], [ new Date(2016, 4, 27), 0.152, greyCross, null ], [ new Date(2016, 4, 28), 0.142, greyCross, null ] ] ); var options = { hAxis : { title: 'Birth', titleTextStyle: {color: '#333'}, gridlines: { count: -1 } }, vAxis : { title : 'Score', viewWindow:{ max:0.1, min:0.25 } }, colors: ['#33bb33'], pointSize: 10, seriesType: 'scatter', series: { 0: { pointShape: {type: 'star', dent: 0.2, sides: 4 } }, 1: { pointShape: {type: 'star', dent: 0.2, sides: 4 } }, 2: { }, 3: { type: 'area' } }, trendlines: { 0: {}}, legend : 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById( 'chart_div')); chart.draw(data, options); } </script> On Friday, May 27, 2016 at 5:10:41 PM UTC+2, Daniel LaLiberte wrote: > Hi Bram, > > We don't have a way of highlighting the background, but you can get the > same effect by drawing an "area" series with nulls everywhere except for > the interval you want to highlight. > > With a 'date' or 'datetime' type axis, it is possible to draw the tick > labels between the gridlines, at least in some situations. See this > example: https://jsfiddle.net/dlaliberte/ksnd7abx/1/ > Dates and times are drawn in different ways depending on the scale. > Unfortunately, the context of the current year is not always displayed, but > you can add something to your axis title instead. > > See more about formatting ticks for dates and times here: > https://developers.google.com/chart/interactive/docs/datesandtimes#formatting-axis-gridline-and-tick-labels > > > > On Fri, May 27, 2016 at 10:04 AM, Bram Patelski <[email protected] > <javascript:>> wrote: > >> Hi, >> >> Anyone know how to highlight a part of the chart's background as a >> vertical column? >> >> I'm building a PoC for a scatter-chart where I need to plot crosshairs on >> a timeline. >> It displays a timespan of about a year ranging 12 months, with somewhere >> around 2/3 of the chart, we display the current month. >> May also need to figure out a way to display intervals on the x-axis >> instead of dates, with the month's name in the middle. >> Is there a way to highlight the current month or any month? It's >> perfectly fine to give some x-axis coordinates that should be highlighted. >> >> Kind regards, >> Bram >> >> -- >> 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] >> <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> 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/d7bee590-a9fd-41a5-b522-2bd37d7703f5%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-visualization-api/d7bee590-a9fd-41a5-b522-2bd37d7703f5%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] <javascript:> 5CC, 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/2d2cdb1c-7384-42ec-a6e6-33214abe6fd2%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
