Feature request: custom properties in pie/doughnut charts

[jedwards1211]

I was trying to do this (note Laravel templates are mixed in):

      var byClassChart = new Chart(ctx).Doughnut([
        @foreach ($allocations[$account->id]['by_class'] as $row)
          {
            value: ({{ $row['actual_dollars'] }}).toFixed(2),
            percent: ({{ $row['target_percent'] }}),
            color: colors[color],
            highlight: lightColors[color++],
            label: "{{ $row['asset_class_name'] }}"
          },
        @endforeach
      ], chartOptions); 

      var chartOptions = {
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=formatDollars(value)%> (<%=percent%>%)",
        animation: false,
        responsive: true
      };

However in the console I see that percent is not defined when the template is processed. Why sanitize extra properties out of the JSON passed to the chart? It would be much more convenient if I could do this than anything else.

[etimberg]

@tannerlinsley has some plans for this in v2.0.

[jedwards1211]

Cool. In the meantime I figured out how to work around by overriding addData to extend the segment with the special properties like this. Do you think it would cause any problems if we made all the core addData functions work this way? I don't see how extra properties would interfere with anything. I'd be happy to work on a pull request if you think it's likely to get merged. But maybe there's something I don't know about?

      Chart.types.Doughnut.extend({
        name: "DoughnutAlt",
        addData: function(segment, atIndex, silent){
          var index = atIndex || this.segments.length;
          this.segments.splice(index, 0, new this.SegmentArc(Chart.helpers.extend(segment, {
            outerRadius : (this.options.animateScale) ? 0 : this.outerRadius,
            innerRadius : (this.options.animateScale) ? 0 : (this.outerRadius/100) * this.options.percentageInnerCutout,
            fillColor : segment.color,
            highlightColor : segment.highlight || segment.color,
            showStroke : this.options.segmentShowStroke,
            strokeWidth : this.options.segmentStrokeWidth,
            strokeColor : this.options.segmentStrokeColor,
            startAngle : Math.PI * 1.5,
            circumference : (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
          })));
          if (!silent){
            this.reflow();
            this.update();
          }
        }
     });

[tannerlinsley]

The way it's looking, addData is being deprecated in 2.0, as the data
config object is watched for changes and will be able to handle new data as
well. 2.0 will also natively handle custom userData for a variety of
purposes.

On Tue, Jun 9, 2015 at 3:11 PM Andy Edwards notifications@github.com
wrote:

Cool. In the meantime I figured out how to work around by overriding
addData to extend the segment with the special properties like this. Do
you think it would cause any problems if we made all the core addData
functions work this way? I don't see how extra properties would interfere
with anything. I'd be happy to work on a pull request if you think it's
likely to get merged. But maybe there's something I don't know about?

  Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    addData: function(segment, atIndex, silent){
      var index = atIndex || this.segments.length;
      this.segments.splice(index, 0, new this.SegmentArc(Chart.helpers.extend(segment, {
        outerRadius : (this.options.animateScale) ? 0 : this.outerRadius,
        innerRadius : (this.options.animateScale) ? 0 : (this.outerRadius/100) * this.options.percentageInnerCutout,
        fillColor : segment.color,
        highlightColor : segment.highlight || segment.color,
        showStroke : this.options.segmentShowStroke,
        strokeWidth : this.options.segmentStrokeWidth,
        strokeColor : this.options.segmentStrokeColor,
        startAngle : Math.PI * 1.5,
        circumference : (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
      })));
      if (!silent){
        this.reflow();
        this.update();
      }
    }
 });

—
Reply to this email directly or view it on GitHub
#1185 (comment).

[jedwards1211]

I see, fair enough. Thanks!

[etimberg]

Closing since a nice extension for v1 is provided. In v2, the tooltip callbacks have the ability to get the entire data object. See the tooltip hooks sample