Hisham February 2016

Adding annotation to the below pivoted column chart dynamically - google api

I've created the below code example which is showing the sales quantity for two products I need to display the quantity value on each column please help..

<html>
  <head>
  <style>
    #U{
        margin: 0 auto;
        width: 90%;
        height: 500px;
        color: black;
    }
    </style>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable({"cols":[{"label":"REPLACE DATE","type":"string"},{"label":"ITEM","type":"number"},{"label":"QUANTITY REPLACED","type":"number"}],"rows":[{"c":[{"v":"01\/29"},{"v":"IN-U-1"},{"v":11}]},{"c":[{"v":"01\/29"},{"v":"IN-U-1"},{"v":5}]},{"c":[{"v":"01\/30"},{"v":"IN-U-1"},{"v":136}]},{"c":[{"v":"01\/30"},{"v":"IN-U-2"},{"v":94}]},{"c":[{"v":"01\/31"},{"v":"IN-U-1"},{"v":130}]},{"c":[{"v":"01\/31"},{"v":"IN-U-2"},{"v":87}]},{"c":[{"v":"02\/01"},{"v":"IN-U-1"},{"v":127}]},{"c":[{"v":"02\/01"},{"v":"IN-U-2"},{"v":100}]},{"c":[{"v":"02\/02"},{"v":"IN-U-1"},{"v":114}]},{"c":[{"v":"02\/02"},{"v":"IN-U-2"},{"v":89}]},{"c":[{"v":"02\/03"},{"v":"IN-U-1"},{"v":131}]},{"c":[{"v":"02\/03"},{"v":"IN-U-2"},{"v":145}]},{"c":[{"v":"02\/04"},{"v":"IN-U-1"},{"v":142}]},{"c":[{"v":"02\/04"},{"v":"IN-U-2"},{"v":139}]},{"c":[{"v":"02\/05"},{"v":"IN-U-1"},{"v":12}]},{"c":[{"v":"02\/05"},{"v":"IN-U-2"},{"v":27}]},{"c":[{"v":"02\/06"},{"v":"IN-U-1"},{"v":146}]},{"c":[{"v":"02\/06"},{"v":"IN-U-2"},{"v":99}]},{"c":[{"v":"02\/07"},{"v":"IN-U-1"},{"v":219}]},{"c":[{"v":"02\/07"},{"v":"IN-U-2"},{"v":171}]}]});
    var options = {
            title: 'Sales',
            vAxis: {title: "Quantity", gridlines: { count:         

Answers


WhiteHat February 2016

See Labeling Bars...

Basically, just add another view column for the annotation...

{
  calc: 'stringify',  
  sourceColumn: 1,    // identify column value to be displayed
  type: 'string',     
  role: 'annotation'
}

In this case, you may need to create another view off of pivotedData

Post Status

Asked in February 2016
Viewed 2,334 times
Voted 11
Answered 1 times

Search




Leave an answer