275
Views
11
Comments
Solved
Pie Chart show data label
Question

I make a new pie chart, send it a series of data with names in point and series names, a tooltip value and a color.  On the setup of the graph I set show data labels to true.  When it renders it has the colors and if I mouse over the wedges it shows the correct tool tip but while it has the lines coming from each wedge there isn't a value on these.  Anyone find a fix to this?

Rank: #136
Solution

Hi Jason,


adding the chart from scratch (so all javascript instead of using the chart widget) doesn't have this problem, so I guess the problem is somewhere in the implementation of this widget for mobile / reactive.


see attached oml.  so options are, i guess

  • convincing your users that they don't need the datapoint labels
  • handcrafting your own javascript instead of using chart widget
  • talking to OS about why this isn't working


Dorine

DemoPieChart.zip

Rank: #1034

Jason Herrington wrote:

I make a new pie chart, send it a series of data with names in point and series names, a tooltip value and a color.  On the setup of the graph I set show data labels to true.  When it renders it has the colors and if I mouse over the wedges it shows the correct tool tip but while it has the lines coming from each wedge there isn't a value on these.  Anyone find a fix to this?

Hi Jason,

I think there is something wrong to the SourceDataPointList that you provided. It should show the Mapping to DataPoint, and it has a Label and Value property. Like this.


Rank: #136

Hi Jason,


If you look at the source page of your rendered html, how does the chart json look like, do the datapoints have a name?  If not, check with debugging why they are not filled.

If they do,  then maybe there is some other property that makes them invisible.  If you copy from your source page to jsfiddle, tinker until you findthe reason.

@Roel, you only need the mapping when the list you use as source for the chart is not a datapoint list, so both your and Jasons ways can work.

Dorine

I did export the datapoint list going into the graph itself.  It looks ok to me unless / or - is not an allowed character.

Rank: #136

Oke Jason,

it doesn't really make sense to me to have a different data series for each data point, but that's not the cause of your problem.  

When I use the same chart on a traditional web, a mobile and a reactive web app, setting the ShowDataPointsValue to True, i get values at the end of the lines in traditional web, not in mobile and not in reactive web.




My guess is that tradional web uses a different version of the highcharts library than mobile and reactive web, and whatever OS does in the background to translate the ShowDataPointValue boolean into proper JSON, doesn't work for the newer library.

I'll see if I can find something,

Dorine


Rank: #136
Solution

Hi Jason,


adding the chart from scratch (so all javascript instead of using the chart widget) doesn't have this problem, so I guess the problem is somewhere in the implementation of this widget for mobile / reactive.


see attached oml.  so options are, i guess

  • convincing your users that they don't need the datapoint labels
  • handcrafting your own javascript instead of using chart widget
  • talking to OS about why this isn't working


Dorine

DemoPieChart.zip

Rank: #889

I am noticing that this thread (https://www.outsystems.com/forums/discussion/58749/) offers an answer from Dinis Cavalho that works with the current component.


plotOptions: {
    series: {
        dataLabels: {
            enabled: true, // enable DataLabels
            format: '{point.name}: {y}', // format to replicatte Traditional Web labels
        }
    }
}