Hi Eunice, Your data and options seem to work fine in this jsfiddle: https://jsfiddle.net/dlaliberte/4xpyg6ys/
I added a height option to make enough room for the chart. On Tue, Apr 12, 2016 at 2:47 AM, Kaiyi Chen <[email protected]> wrote: > Hello, > > I am trying to generate the json files that I could use to make a google > material bar chart. > > I want to show a comparison on three different sets of data like the > following screen shot shows (which is generated using a regular array). > > > <https://lh3.googleusercontent.com/-L5OO9MYgafQ/VwyVxMWKuJI/AAAAAAAAAD4/6d9b_NLGamw4mVsgiHUyF-XIm2Ees1LvwCLcB/s1600/Screen%2BShot%2B2016-04-12%2Bat%2B1.24.52%2BAM.png> > > I tried to write a similar json file as the array does for the previous > graph, but it ended up like > > > <https://lh3.googleusercontent.com/-6i9h98H0KVU/VwyWRTBtsCI/AAAAAAAAAD8/d_MliIKutRUXIjlrckxbjFyf-_wgBWRfACLcB/s1600/Screen%2BShot%2B2016-04-12%2Bat%2B1.31.12%2BAM.png> > > Here is my json file: > > > { > > "cols":[ > > {"id":"type","label":"Sensor Type","type":"string"}, > > {"id":"hum","label":"Humidity","type":"number"}, > > {"id":"temp","label":"Temperature","type":"number"}, > > {"id":"light","label":"Light","type":"number"} > > ], > > "rows":[ > > > {"c":[{"v":"Average"},{"v":26.371523433721},{"v":26.671470588235},{"v":9.3347814338235}]}, > > {"c":[{"v":"Maximum"},{"v":26.829065672},{"v":27.25},{"v":27.46580625}]}, > > {"c":[{"v":"Minimum"},{"v":26.004174242},{"v":26.25},{"v":0}]} > > ] > > } > > > And the javascript code I use this file to generate the graph: > > > var responseText = JSON.parse(event.target.responseText); > > // Create our data table out of JSON data loaded from server. > > var data = new google.visualization.DataTable(responseText); > > setTimeout(getData, 5000); > > > var options = { > > chart: { > > title: "Summary", > > subtitle: 'Average, Minimum and Maximum Data of the zone' > > }, > > bars: 'horizontal', // Required for Material Bar Charts. > > series: { > > 0: { axis: 'Average' }, > > 1: { axis: 'Maximum' }, > > 2: { axis: 'Minimum' } > > }, > > axes: { > > x: { > > humidity: {side: 'top', label: 'Humidity (%)'}, // Bottom > x-axis. > > temperature: {side: 'top', label: 'Temperature (Celsius)'}, // > Top x-axis. > > light: {side: 'top', label: 'Light (Lux)'} > > } > > } > > }; > > > var chart = new > google.charts.Bar(document.getElementById('chart_div')); > > chart.draw(data, options); > > > The graph is showing the average/min/max value of the humidity, > temperature and light. Is this the issue with the material graph? Or is it > because I did the json in wrong format? > > Thank you very much for your help. > > Eunice > > -- > 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/4c3f9895-d401-449a-9d92-93c004b55049%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/4c3f9895-d401-449a-9d92-93c004b55049%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]> 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/CAOtcSJPDuqE%2BGvY9UFhV-rrzdzMaQ3zkxuU5_YO9qTtt5Nm9nQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
