I am trying to do something similar but my data is coming from an encoded
json string. How can I encode { role: 'annotation' } in the following code
on the first line: array('Kwd' => 'Keywords','type' => 'string'),
//keywords for annotation
A working example would be a great help. Thanks
$table = array();
$table['cols'] = array(
/* define your DataTable columns here
* each column gets its own array
* syntax of the arrays is:
* label => column label
* type => data type of column (string, number, date, datetime, boolean)
*/
array('Kwd' => 'Keywords','type' => 'string'), //keywords for annotation
array('pos0' =>'position0','type' => 'string'),
array('pos1' =>'position1','type' => 'number'),
On Tuesday, January 5, 2016 at 12:11:59 PM UTC-8, Bori Konstantinov wrote:
>
> Hi all,
>
> I have a question regarding annotation labels on a StackedBar Chart. I
> currently have annotated stack bar where the labels are on the inside. But
> I may have situations where a bar segment may be pretty small, and hence
> the label might not actually fit inside the segment. In this situation, I
> am looking to have the label appear right above that specific segment with
> a line pointing from that label to the segment, so it's clear what segment
> that label is for.
>
> <html>
> <head>
> <!--Load the AJAX API-->
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript">
>
> // Load the Visualization API and the piechart package.
> google.load('visualization', '1.0', {'packages':['corechart']});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.setOnLoadCallback(drawChart);
>
> // Callback that creates and populates a data table,
> // instantiates the pie chart, passes in the data and
> // draws it.
> function drawChart() {
>
> // Create the data table.
> var data = google.visualization.arrayToDataTable([
> [ 'Discount Amount',
> 'No Discount', { role: 'annotation' } ,
> '1% - 10%', { role: 'annotation' } ,
> '11% -24%', { role: 'annotation' } ,
> '25-49%', { role: 'annotation' } ,
> '50%+', { role: 'annotation' } ,
> 'Unsure', { role: 'style' },{ role: 'annotation' } ],
> ['Overall average discount',14, '14%', 15, '15%', 10,'10%', 10,
> '10%', 13, '13%', 39,'opacity: 0.2','39%'],
> ['NetApp', 13,'13%', 9, '9%', 13, '13%', 13, '13%', 35, '35%',1,
> 'opacity: 0.2','1%'],
> ['EMC', 7, '7%', 13, '13%', 7, '7%', 7, '7%', 13, '13%', 53,
> 'opacity: 0.2','53%'],
> ['Synology',33, '33%', 33,'33%',0,'',0,'',17,'17%',17, 'opacity:
> 0.2','17%'],
> ['Dell',0,'',0,'',0,'',20,'20%',0,'',80, 'opacity: 0.2','80%']
> ]);
>
> var options = {
> title: 'Discount threshold',
> width: 1000,
> height: 600,
> legend: { position: 'top', maxLines: 6 },
> bar: { groupWidth: '50%' },
> isStacked: 'percent',
> colors: ['#00CDCD', '#EEAD0E', '#FF00FF', '#32CD32', '#CD0000',
> '#808080'],
> hAxis: { textPosition: 'none', gridlines:{color:'transparent'}},
> annotations: { position: 'top'}
> };
>
> // Instantiate and draw our chart, passing in some options.
> var chart = new
> google.visualization.BarChart(document.getElementById('chart_div'));
> chart.draw(data, options);
> }
> </script>
> </head>
>
> <body>
> <!--Div that will hold the pie chart-->
> <div id="chart_div"></div>
> </body>
> </html>
>
> This code produces the attached bar graph. As you can see, there is a very
> small segment on the NetApp row (very last segment) which I've hard-coded
> to have a 1% percentage. This segment is obviously too small have the
> percentage fit inside, so I would like to have a appear above that segment
> with a line connecting. I know of the 'annotation.alwaysOutside'
> configuration I can enable, but that applies that to all the labels, but
> I'm only concerned with the label that fit the above description. Would
> this require some sort of secondary helper function? Any suggestions?
>
> Thank you very much!
>
>
> <https://lh3.googleusercontent.com/-a-s4yyQrxjs/VowiHO432qI/AAAAAAAAAq4/YCWbInvSfyw/s1600/Screen%2BShot%2B2016-01-05%2Bat%2B3.05.12%2BPM.png>
>
--
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/748520b8-59cb-4d2c-bff9-14887597ded9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
