Json files for material charts

[Kaiyi Chen]

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).

I tried to write a similar json file as the array does for the previous graph, but it ended up like

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

[Daniel LaLiberte]

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.

--
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/4c3f9895-d401-449a-9d92-93c004b55049%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Kaiyi Chen]

I found I made a stupid mistake on calling the wrong son file. And I  do think I need the height and width option of this graph.

Thank you very much for your help. :)

Eunice

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/8xZmAsHxuPY/unsubscribe.
To unsubscribe from this group and all its topics, 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/CAOtcSJPDuqE%2BGvY9UFhV-rrzdzMaQ3zkxuU5_YO9qTtt5Nm9nQ%40mail.gmail.com.