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

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

Highlighted
Aquamarine

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

Tags (1)
5 REPLIES 5
Highlighted

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

@Willie ,

 

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

 

Highlighted

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

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

Tags (2)
Highlighted

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

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. 

Highlighted

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

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?

Highlighted

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

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. 

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!