Hi Daniel, Thank you for the example. That should work for this diagram. I'm currently looking into alternatives for the radar / spider-chart, but would love to create this in Google Charts. Any news on that?
Thanks On Tuesday, May 31, 2016 at 4:48:19 PM UTC+2, Daniel LaLiberte wrote: > > The main problem is that you are assuming columns correspond to series. > But series skip the 'role' columns in between, so the 'area' series has > index 1. > > However, there appears to be a bug involving area series in that the > points will be drawn as well unless you set the pointSize to 0 at the top > level, and then > set it to a non-zero value inside your scatter series. > > I started with your code to create this example: > https://jsfiddle.net/dlaliberte/6t6eg65n/ > > On Mon, May 30, 2016 at 3:39 AM, Bram Patelski <[email protected] > <javascript:>> wrote: > >> 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] >> <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/dc904c3c-07bd-47c0-83f4-cf3d2da0706d%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-visualization-api/dc904c3c-07bd-47c0-83f4-cf3d2da0706d%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/5f61ab35-d284-471e-9fce-34ff1eac46e9%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
