I am creating an area chart using angular-google-chart . I am trying to show different colors for a specific area. But you can see an area of red and green lines (areas) that overlap with a blue area. Is there something wrong with the configuration?
"data": { "cols": [{ "id": "date", "label": "Date", "type": "string", "p": {} }, { "id": 'sd0', "label": 'sdo', "type": "number", "p": {} }, { "id": 'sd1', "label": 'sd1', "type": "number", "p": {} }, { "id": 'sd2', "label": 'sd2', "type": "number", "p": {} }, { "id": 'sd3', "label": 'sd3', "type": "number", "p": {} }, { "id": 'sd1Neg', "label": 'sd1Neg', "type": "number", "p": {} }, { "id": 'sd2Neg', "label": 'sd2Neg', "type": "number", "p": {} }, { "id": 'sd3Neg', "label": 'sd3Neg', "type": "number", "p": {} }], "rows": $scope.dataMap }, "options": { "isStacked": "false", 'displayAnnotations': true, 'legend': { 'position': 'bottom' }, "fill": 20, "displayExactValues": true, "vAxis": { "title": 'Weight' }, "hAxis": { "title": "Age", "slantedText": false, /* Enable slantedText for horizontal axis */ // "slantedTextAngle": 90 }, 'chartArea': { 'width': '82%', 'height': '70%', 'top': '15%', 'left': '15%', 'right': '3%', 'bottom': '30%' }, 'pointSize': 2, 'annotation': { 'alwaysOutside': true, 'textStyle': { 'fontSize': 17, 'auraColor': '#eee', 'annotationsWidth': 25, 'color': '#eee' } }, 'series': { 0: { areaOpacity: 1}, 1: { areaOpacity: 1}, 2: { areaOpacity: 1}, 3: { areaOpacity: 1}, 4: { areaOpacity: 1}, 5: { areaOpacity: 1}, 6: { areaOpacity: 1} }, 'colors': ['#FF0000','#FF0000','#00FF00','#0000FF','#00FF00','#0000FF','#FFFFFF'] },
In $scope.dataMap I have $scope.dataMap data from arrays:
for(var i=0;i<$scope.data.sd0.length;i++){ $scope.dataMap.push({ c: [{ v: $scope.gData.sd0[i].month }, { v: $scope.gData.sd0[i].value }, { v: $scope.gData.sd1[i].value }, { v: $scope.gData.sd2[i].value }, { v: $scope.gData.sd3[i].value }, { v: $scope.gData.sd1Neg[i].value }, { v: $scope.gData.sd2Neg[i].value }, { v: $scope.gData.sd3Neg[i].value }] }); }
$scope.gData is the object I get from the mail request and contains arrays of values. There are 7 arrays of values, the JSON structure is the same for all
"sd0": [ { "month": "0", "value": "2.1" }, { "month": "1", "value": "2.9" }, { "month": "2", "value": "3.8" }, { "month": "3", "value": "4.4" } ..... ]