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
Post a Comment