Highlighting a column (current) month on x-axis of a scatter-chart
Bram Patelski
Daniel LaLiberte
--
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/d7bee590-a9fd-41a5-b522-2bd37d7703f5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Bram Patelski
<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 <bram.p...@gmail.com> 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 google-visualization-api+unsub...@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/d7bee590-a9fd-41a5-b522-2bd37d7703f5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Bram Patelski
<div>
[ new Date(2016, 4, <span style="color: #066;"
Daniel LaLiberte
--
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/dc904c3c-07bd-47c0-83f4-cf3d2da0706d%40googlegroups.com.
Bram Patelski
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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/dc904c3c-07bd-47c0-83f4-cf3d2da0706d%40googlegroups.com.