Code: <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 Monday, May 30, 2016 at 9:38:58 AM UTC+2, Bram Patelski wrote: > > 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, <span style="color: #066;" > -- 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/dc904c3c-07bd-47c0-83f4-cf3d2da0706d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
