Displaying Discrete Text Units on the Y-axis for Continuous Data

15 views
Skip to first unread message

Michael Dorfman

unread,
May 15, 2017, 2:47:30 PM5/15/17
to Google Visualization API
Hello,

I have a dashboard setup similar to this: http://jsfiddle.net/asgallant/ZmVcZ/ and am hoping to create a column chart of forecasted precipitation intensity over time.  My data set being passed to the graph is in reflectivity values, ranging between -20 and 100 dbz, but I am hoping to have more user-friendly units displayed on the Y axis (eg "light, medium, heavy").  In addition, I am hoping to color-code the bars to colors consistent to the weather radar (eg bars that are displaying "heavy" precipitation should be red).  
So, two questions; 

1) Is there an easy way to display a numeric dataset with the labels on the Y-axis being descriptors for specific buckets of that data?
2) Is there any way to change the color of the columns to match the value of each column?

Thank you in advance!

Here is my code so far:
        
       
var dashboard = new google.visualization.Dashboard(
            document
.getElementById('dashboard'));


       
var control = new google.visualization.ControlWrapper({
           
'controlType': 'ChartRangeFilter',
           
'containerId': 'control',
           
'options': {
               
// Filter by the date axis.
               
'filterColumnIndex': 0,
               
'ui': {
                   
'chartType': 'LineChart',
                   
'chartOptions': {
                       
'chartArea': {'width': '90%'},
                       
'hAxis': {
                           
'format': ['yyyy-MM-dd']
                       
}
                   
}
               
}
           
}
       
});


       
var chart = new google.visualization.ChartWrapper({
           
'chartType': 'LineChart',
           
'containerId': 'chart',
           
'options': {
               
'chartArea': {'height': '80%', 'width': '90%'},
               
'hAxis': {
                   
'gridlines': {
                       
'units': {
                           
'format': ['hh:mm aa']
                       
}
                   
}
               
},
               
'legend': {'position': 'none'}
           
}
       
});


       
var data = new google.visualization.DataTable();
        data
.addColumn('datetime', 'Date');
        data
.addColumn('number', 'Observed Reflectivity');
        data
.addColumn('number', 'Forecasted Reflectivity');
       
       
for (i = 0; i < formattedObservedData.length; i++) {
            data
.addRow([new Date(formattedObservedData[i][0]),dbzToIntensityBucket(formattedObservedData[i][1]),null]);
       
}
       
       
for (i = 0; i < formattedForecastedData.length; i++) {
            data
.addRow([new Date(formattedForecastedData[i][0]),null,dbzToIntensityBucket(formattedForecastedData[i][1])]);
       
}
       
        dashboard
.bind(control, chart);
        dashboard
.draw(data);
       

Reply all
Reply to author
Forward
0 new messages