cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

How to display bars by ascending/descending values in a bar chart

Willie
16-Pearl

How to display bars by ascending/descending values in a bar chart

I need a bar chart to display bars by ascending/descending values.  The values fluctuate so I can't set the bars in static order.

Is it possible to get the bar chart widget to display the bars by ascending/descending values?

I looked at the widget properties, but I didn't see an option to set this.

 

Please see the following example from MS Excel:

Thingworx - 2020-09-15 - Horizontal Bar Chart.PNG

ACCEPTED SOLUTION

Accepted Solutions

I was able to figure it out after my earlier post.  Instead of setting many data fields, I set only 1 data field.  This way, I can sort the data in my service.  When I use the label widget, I'm unable to display the value on top of the bar.  Is there a property in the label widget to set this?  I was unable to find this setting.  Also, is there a way to remove the decimal places in the y-axis and grid in bar chart widget?

 

Please see the charts below.  The label widget is on the right.  Bar char widget is on the left.

Thingworx - 2020-09-15 - Bar Charts.PNG

View solution in original post

6 REPLIES 6
nmilleson
17-Peridot
(To:Willie)

@Willie ,

 

Can't you just perform a sort on your infotable before it is returned to the mashup?

 

I was able to figure it out after my earlier post.  Instead of setting many data fields, I set only 1 data field.  This way, I can sort the data in my service.  When I use the label widget, I'm unable to display the value on top of the bar.  Is there a property in the label widget to set this?  I was unable to find this setting.  Also, is there a way to remove the decimal places in the y-axis and grid in bar chart widget?

 

Please see the charts below.  The label widget is on the right.  Bar char widget is on the left.

Thingworx - 2020-09-15 - Bar Charts.PNG

nmilleson
17-Peridot
(To:Willie)

For the bar chart, I actually had to modify the widget code to change the number of decimal places.  If you look in barChart.runtime.js, you'll find this line:

 

chart.yAxis.tickFormat(d3.format('.02f'))

 

Just change that to your desired format, or if you want it to be flexible, create another widget property and tie it to that format. 

I'm never done extension development so I'm not familiar.  If I were to reduce the decimal places to 1, would the value be '.01f'?  0 decimal places would be '.f'?  I'm assuming so based on the following article:

https://stackoverflow.com/questions/42216795/what-is-the-difference-between-02f-and-2f

 

"if you want it to be flexible, create another widget property and tie it to that format. "

How would I do this?  Could you show me an example?

nmilleson
17-Peridot
(To:Willie)

For the number formatting, I would follow this guide (https://github.com/d3/d3-format) since those charts use the d3 library. 

One decimal place would be “.1f” for example. 

For examples on making that a widget property, I’ll private message you some ideas. 

slangley
23-Emerald II
(To:Willie)

Hi @Willie.

 

If you feel your question has been answered, please mark the appropriate response as the Accepted Solution for the benefit of others with the same question.

 

Thank you for your participation in our community!

 

Regards.

 

--Sharon

Announcements


Top Tags