histogram chart labels

49 views
Skip to first unread message

Patrick Beaudan

unread,
Mar 20, 2016, 11:38:44 AM3/20/16
to google-visua...@googlegroups.com
Hello,
I have a couple of questions on the histogram chart, I attach an example below.
The first question is about the legend. It seems to automatically include "(count)". How can I remove that?
The second question is about coloring the latest event, in the chart below it is the latest annual period. I colored it blue but had to use a stacked chart approach where every value is 0 (so it does not appear) except at the location in the distribution that equals the latest value, where I give it a value sufficient that it is visible on the chart. I've also used a stacked chart approach to color the negative / positive values red / green respectively. This approach fouls up the values on the Y axis since it adds stacked chart values only for the purpose of coloring.

Is there a better way to specify the color of the bars in the distribution? I attach my code here:

function drawChart() {      
    var chartRoutine = 'chart_histogram_annual';
    var elementID = 'chart_histogram_annual';
    var chartTitle = 'Distribution of Annual Returns';   // Title used in pdf presentation
   
    
    $.ajax({          
        url: "/emotomy/charts/chart_handler.php?chart=" + chartRoutine,          
        dataType:"json",          
        success: function (jsonData) {      
            var data = new google.visualization.DataTable(jsonData);   // Create our data table out of JSON data loaded from server.
            
            var options = {   // Set chart options 
                histogram: { lastBucketPercentile: 2, hideBucketItems: 'true'}, // compute bucket sizes ignoring the top and bottom X%
                legend: {position: 'top', maxLines: 2 },
                'hAxis': {textStyle: {fontSize:10, color:'black', bold:'true'}, viewWindowMode: 'maximized'},
                'vAxis': {textStyle: {fontSize:10, color:'black'}},
                'fontName':'Trebuchet MS', 
                isStacked: true,
                'colors': ['green', 'red', '#3366CC'],
                interpolateNulls: false           
            }; 
            
            var chart = new google.visualization.Histogram(document.getElementById(elementID));  // Instantiate chart  
            
            chart.draw(data, options);   // draw chart, passing in some options. 
        } 
    });  
}    




Inline image 1


On Tue, Mar 15, 2016 at 11:31 AM, 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com> wrote:
There is no automatic way other than what I suggested as a work around in https://jsfiddle.net/dlaliberte/99qd9pn2/.  We need to make a change so something like this is done internally, but we have bigger plans for BubbleChart so this change will probably have to wait.

On Tue, Mar 15, 2016 at 1:58 PM, Patrick Beaudan <pbb...@gmail.com> wrote:
Hi Dan,

Is there a way to ensure the bubble chart boundaries don't cut off the bubbles? I attach a chart example as a png.
My code is as follows. Thanks very much!


 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
var jsonData = $.ajax({          
 url: "../../charts/chart_handler.php?chart=chart_bondRisk",          
 dataType:"json",          
 async: false          
}).responseText;  
var data = new google.visualization.DataTable(JSON.parse(jsonData));  // Create our data table out of JSON data loaded from server.           
var options = {
 hAxis: {title: 'Current allocation to bonds', minValue:-10},
 vAxis: {title: 'Loss', maxValue:2},
 chartArea: {top:10, left:100},
 legend: {textStyle: {fontSize: 11}},
 tooltip: {textStyle: {color: '#000000', fontSize: 11, fontName: "Trebuchet MS"}},
 sizeAxis: {minSize:15, maxSize:30},
 bubble: {textStyle: {fontSize: 11, fontName: "Trebuchet MS"}}
};
 
var chart = new google.visualization.BubbleChart(document.getElementById('chart'));
chart.draw(data, options);
// track user selection
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
 var selection = chart.getSelection();   // only 1 item selected at a time with bubble charts
  //   strategy = '{row:' + selection[0].row + '}';
 strategy = data.getValue(selection[0].row,3); // return symbol from chart data table
  //   alert('Selected ' + strategy + ' as your champion portfolio?');
 window.location.href = "chart_bondRisk.php?strategy=" + strategy;  // transfer to processing page
}
 }








On Tuesday, March 8, 2016 at 4:33:30 PM UTC-8, asingular wrote:
Hello all,

I am using the first example on this page: https://developers.google.com/chart/interactive/docs/gallery/bubblechart#overview and it looks good. But I have one issue. I am using the following code to zoom.
explorer: { actions: ['dragToZoom', 'rightClickToReset'] } 

The zoom function works as expected, but the bubble on the far right gets cut off on the top right side. That doesn't happen if I take out explorer: { actions: ['dragToZoom', 'rightClickToReset'] } . 

Anyone know how I can fix it without hAxis.maxValue and vAxis.maxValue? That is not an option since the data is too dynamic.

thanks,
Joe

--
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/48be10d6-f80a-409c-85c2-07817d2490fa%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

--
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/d_oiVe9KIcY/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/CAOtcSJMm_ni8ffmKdyw0UakT1Q3xqdvhT4AWD_BAg6saGP4cJw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.



--
 
Best Regards,
Patrick Beaudan

Daniel LaLiberte

unread,
Mar 21, 2016, 2:14:37 PM3/21/16
to Google Visualization API
Hi Patrick,

You might be better off doing your own bucketing and just use a column chart, which you can customize in all the usual ways.  The Histogram uses the ColumnChart internally, but doesn't pass all the options through that it might.  In particular, the options you want are not available.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CACmakz81KeU0SRfoAczjB_kKV-a5qx9k11-3opn5zqhZkXVv5g%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Patrick Beaudan

unread,
Mar 21, 2016, 10:22:27 PM3/21/16
to Google Visualization API
Dan, understood, thank you.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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.



--

--
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/d_oiVe9KIcY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@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.



--
 
Best Regards,
Patrick Beaudan

--
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-visualization-api+unsub...@googlegroups.com.



--
Reply all
Reply to author
Forward
0 new messages