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


i've created below code example showing sales quantity 2 products need display 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: 6 }},             haxis: {title: "per day"},             //is3d: 'true',             chartarea: {'top': '30','left':'100'},             bar: { groupwidth: "80%" },             //annotations.alwaysoutside: true,             backgroundcolor: "transparent"         };      /* pivot data table      * set column first column in view,       * have separate out c values own columns      * according value of b, using dataview calculated columns      */      // values in column b     // sorts values in lexicographic order, if need different order have build array appropriately     var distinctvalues = data.getdistinctvalues(1);      var viewcolumns = [0];     var groupcolumns = [];     // build column arrays view , grouping     (var = 0; < distinctvalues.length; i++) {         viewcolumns.push({             type: 'number',             label: distinctvalues[i],             calc: (function (x) {                 return function (dt, row) {                     // return values of c rows b = distinctvalues[i] (passed closure via x)                     return (dt.getvalue(row, 1) == x) ? dt.getvalue(row, 2) : null;                 }             })(distinctvalues[i])         });         groupcolumns.push({             column: + 1,             type: 'number',             label: distinctvalues[i],             aggregation: google.visualization.data.sum         });     }      var view = new google.visualization.dataview(data);     view.setcolumns(viewcolumns);      // next, group view on column a, gets pivoted data     var pivoteddata = google.visualization.data.group(view, [0], groupcolumns);       var chart = new google.visualization.columnchart(document.getelementbyid('u'));     chart.draw(pivoteddata, options, {});  }     </script>   </head>   <body>         <div id="u"></div>   </body> </html> 

please help... in advance, best regards, hisham

see labeling bars...

basically, add view column annotation...

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

in case, may need create view off of pivoteddata


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -