Changing x-axis and y-axis of XY chart widget

[kahmeng96]

Hi all,

I have created a new XY chart widget (similar to the existing XY chart widget) in ThingWorx and I want the x-axis to be on the top of the chart so that the intersection of the x-axis with the y-axis is in the top left corner instead of the bottom left corner. The x-axis values should increase from left to right and the y-axis values should increase from top to bottom. I have no idea how to do this with my code, thus I have attached the necessary files for reference. The final result should look as shown below. Any help will be greatly appreciated!

[PEHOWE]

Hello @kahmeng96 

People who look at a graph expect lowest values to be lower and left while higher values to be up and to the right.

What is the reason for wanting the reverse the direction?

[kahmeng96]

Hi @PEHOWE, 

Apparently it's a requirement for the XY chart to display the graph with the axes which I have described. Do you have any ideas on how to meet my requirements?

[Constantine]

Hello,

If you look through the JavaScript code in the ZIP file you attached, you'll see that this widget merely configures the chart rendering library called "TW.ChartLibrary", which with more than 6000 lines of code is quite a sizable part of the core platform (at least in 7.4)

Although customizing it is technically possible, IMHO it requires pretty strong JavaScript skills (or sheer luck), and the amount of effort that you have to put into doing it will most probably outweigh the need for this requirement.

Regards,
Constantine

[kahmeng96]

Hi @Constantine,

Thanks for the reply. However, I am unable to find the TW.ChartLibrary package as I downloaded the trial version of ThingWorx 8.4 thus I am unable to edit the ChartLibrary package. Is the package available anywhere online or do I have download another version of ThingWorx? 

[Constantine · Accepted solution]

@kahmeng96 It's a part of ThingWorx core, not supposed to be customized. Thanks to JavaScript's dynamic nature, you might be able to analyze and tamper with it in runtime, but this will produce results which are poorly maintainable, error-prone, will break something else that you don't expect, and almost certainly won't be supported by PTC.

Like I wrote earlier, it is a lot of effort and risk, and most probably doesn't make much sense from the business perspective. If I were you, I would create a feature request with PTC, and explained to the users that they may get it eventually, but not now.

/ Constantine

[kahmeng96]

@Constantine thanks for the prompt reply and your insights, I didn't know that the ChartLibrary package was part of ThingWorx's core and not supposed to be customized, which was probably why I couldn't find any information about it online. I thought I could modify the existing code like I did with some of the other widgets but apparently that's not the case. I will consider your suggestion of making a feature request to PTC and explain it to my team lead who wanted me to customize the XY chart widget.

[kahmeng96]

Hi @Constantine,

Sorry to trouble you again. I seemed to have found the TW.ChartLibrary package in this path

• C:\Program Files (x86)\ThingWorxH2Trial-8.4.0-SNAPSHOT\tomcat\apache-tomcat-8.5.23\webapps\Thingworx\Runtime

However, when I modify the TW.ChartLibrary portion in mashup-common-widgets-runtime.js, no changes are displayed in my mashup. I have a feeling that this is the wrong path to the TW.ChartLibrary package as apparently it should be

• C:\Program Files\Apache Software Foundation\Tomcat 8.5\webapps\Thingworx\Common\thingworx

According to this link, https://community.ptc.com/t5/ThingWorx-Developers/ChartLibrary-Documentation/m-p/522100 there should be some .js files which contain the TW.ChartLibrary package. The frustrating problem now is that there's no "combined***.js" or "twchartlibrary.js" file in this path for me even after re-installing Apache Tomcat 8.5. Any help will be greatly appreciated!