javascript - Angular Charts with some especial requirements -

i using angular charts in order achieve want, yesterday did it, client wants changes, here data receiving:

{   "12-15-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 8,         "real": 1       }     }   },   "12-16-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 18,         "real": 1       }     }   },   "12-17-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 1,         "amount": 22       },       "clicks": {         "total": 12,         "real": 1       }     }   },   "12-18-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 6,         "real": 1       }     }   },   "12-19-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 12,         "real": 1       }     }   },   "12-20-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 10,         "real": 1       }     }   },   "12-21-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 1,         "amount": 22       },       "clicks": {         "total": 1,         "real": 1       }     }   },   "12-22-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 1,         "amount": 150       },       "clicks": {         "total": 1,         "real": 1       }     }   },   "12-26-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 4,         "real": 1       }     }   },   "12-28-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 1,         "real": 1       }     }   },   "12-29-2015": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 1,         "real": 1       }     }   },   "01-03-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 2,         "real": 1       }     }   },   "01-04-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 3,         "real": 1       }     }   },   "01-05-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 6,         "real": 1       }     }   },   "01-06-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 6,         "real": 1       }     }   },   "01-10-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 1,         "real": 1       }     }   },   "01-11-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 2,         "real": 1       }     }   },   "01-14-2016": {     "55f6de98f0a50c25f7be4db0": {       "conversions": {         "total": 0,         "amount": 0       },       "clicks": {         "total": 22,         "real": 1       }     }   } } 

and here code using render data in chart, playing "conversions : {} part of object, contains total , amount

    .then(function(data) {                 $scope.labels = object.keys(data);       $scope.seriesconv = ["amount", "total"];       $scope.dataconv = $scope.seriesconv.map(function(serie) {         return $scope.labels.map(function(label) {           $scope.trafficsource = object.keys(data[label])[0];           return data[label][$scope.trafficsource].conversions[serie];         });       });     } 

and here html

  <canvas id="line" class="chart chart-line" height="100"           chart-data="dataconv" chart-labels="labels"           chart-series="seriesconv">   </canvas> 

this result

one of requirements should display "amount" property in chart, means grey line should disappear chart, , other requirement need put in tooltip see there:

$ amount (total) in case $150 (1)

so, recommend me in case ? there way ?

remove total chars simple removing "total" seriesconv array. since it's 1 serie, can simpler:

.then(function(data) {             $scope.labels = object.keys(data);   $scope.seriesconv = ["amount"];   $scope.dataconv = [$scope.labels.map(function(label) {     $scope.trafficsource = object.keys(data[label])[0];     return data[label][$scope.trafficsource].conversions.amount;   })]; } 

to use custom format inside tooltip can use tooltiptemplate option chart.js:

$scope.chartoptions = {   tooltiptemplate: "$<%= value %>", }; 

then add chart-options="chartoptions" canvas element.

note it's possible edit existing label, can't add new data tooltip (the total example).

to able add new data you'll have use (much complex) customtooltips option. luck that.

also, please read docs , try playing around. forum question programming, not asking others job.