ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Scatter Chart with Custom Symbols
Posted by Dharm on Jan-22-2024 02:55
| Reply | Monitor
Hi Support Team,

My solution is implemented using Java Micro Services (BackEnd Service) to generate change and return as base64Encoded string.

I am trying to add custom symbols into scatter chart with normal symbols.
I have followed two approaches and looking solution for that.

1) Use base64 encoded png image and pass into .addScatterLayer(x,y).getDataSet(0).setDataSymbol2(base64EncodedPngImageString);

This is not working as function is looking for file name or resource (I am not following meaning of resource here). Is there a way to provide custom image in scatter chart layer?


2) Trying to provide image using resource folder setup in microservice.
   - Use resource folder -> under that created folder "chartImages" -> Add image in that
   - Then trying to set search Path using base chart function "setSearchPath". I have tried with all setSearchPath, setSearchPath2, setSearchPath3, setSearchPath4 to set my resource directory as above, as my solution if java microservice running in cloud and I can include this image as resource only, I don't have directory path. But I am getting compilation error as below

=======================
error: cannot access PageContext
xyChart.setSearchPath("classpath:chartImages");

class file for java.servlet.jsp.PageContext not found
=======================

Any suggestion or solution to resolve this is much appriciated.


Thanks,
Dharm

  Re: Scatter Chart with Custom Symbols
Posted by Peter Kwan on Jan-22-2024 23:07
| Reply | Monitor
Hi Dharm,

You may try:

// Use Java to decode the base64 to the original data bytes
byte[] decodedBytes = java.util.Base64.getDecoder().decode(base64EncodedPngImageString);

// Give a name to the data bytes
c.setResource("abcd", decodedBytes);

// You can use the name similar as a filename with the "@/..." syntax.
c.addScatterLayer(x,y).getDataSet(0).setDataSymbol2("@/abcd");

Hope this can help.

Regards
Peter Kwan

  Re: Scatter Chart with Custom Symbols
Posted by Dharm on Jan-23-2024 05:23
| Reply | Monitor
Thanks Peter for reply,

I have tried provided solution, unfortunately it is not working for me.

I am creating chart object as follows,

         XYChart xychart = new XYChart(width, height);


setting resource as
       xychart.setResource("ImgName1", decodedBytes);

But getting error in IDE as "Cannot resolve method "setResource" in XYChart.

my chart director library version is 7.0
my project is spring-boot-java micro service (REST)

================================
Problem I am trying solve -- I have multiple data points that includes three types of shapes
circle, triangle and squares. I need to add (one/two digit) series number in the square shape only that's where I am trying to use pre-generated .png file or base64Image string.

Please provide me some options to achieve this with chart director.

Thanks,
Dharm

  Re: Scatter Chart with Custom Symbols
Posted by Peter Kwan on Jan-23-2024 11:42
| Reply | Monitor
Hi Dharm,

If you just want to add some numbers to a square symbol, the easiest method is to plot a chart with square symbol and ask ChartDirector to put a custom label on the symbol.

The following is an example that uses custom labels:

https://www.advsofteng.com/doc/cdjava.htm#scatterlabels.htm

The labels above on the left aligned to the symbol. You can use center alignment instead so that the labels will centered on the symbols.

If you need more complex dynamically generated symbols, you can use the ChartDirector DrawArea object. The DrawArea object can be used as symbols.


If you want to use base64 encoded image, setResource should work in ChartDirector 7. Note that I assume the base64Image is some bytes in base64 format, and not in DataURI format.

For older version of ChartDirector, you can load the image bytes into a ByteInputStream, use it to create a DrawArea object and use the DrawArea object as the symbol.


To confirm your ChartDirector version, please include the version in the chart title, like:

c.addTitle(String.Format("Version = %x", Chart.getVersion());

The first digit is the major version number and it should be 7 for ChartDirector 7.0.

Sometimes the actual server is using ChartDirector 7.0, but the IDE is using an older version of ChartDirector. In this case, the IDE would not find BaseChart.setResource.

ChartDirector 7.0 comes with a sample code "Surface Texture" that uses BaseChart.setResource:

https://www.advsofteng.com/doc/cdjava.htm#surfacetexture.htm

If the ChartDirector 7.0 sample code works, then there should be BaseChart.setResource in your version of ChartDirector.


If for some reasons, BaseChart.setResource is not available, you can use DrawArea as symbol method. It is like:

byte[] imgbytes = java.util.Base64.getDecoder().decode(base64EncodedPngImageString);
java.io.InputStream imgStream = new java.io.ByteArrayInputStream(imgbytes);
DrawArea mySymbol = new DrawArea();
d.loadPNG(imgStream);

c.addScatterLayer(x,y).getDataSet(0).setDataSymbol3(mySymbol);


Best Regards
Peter Kwan

  Re: Scatter Chart with Custom Symbols
Posted by Greg on Jan-23-2024 19:03
| Reply | Monitor
Hi Peter,

   I have a similar need and I chose to use the Label to overlap the built in shape. However I would to implement the custom symbol as provided in your example library where png file names are loaded into an array.

  I am not sure as to how to specify the relative path for the png files. In my project structure, I normally have resource files in a Resource folder at the same level as source folder. I can get the current working directory from "user.dir" method call in Java. After this it is not clear to me as to how to set the relative path for my png files.

  If i use DataSet.setDataSymbol2, it requires a filename. I would like to explore using  BaseChart.setSearchPath  to specify the path relative to current working directory. This option provides me the flexibility to use custom logos etc.

  When I use the  BaseChart.setSearchPath , I get a Java servetlet setContext error during build. Any insights into the usage of this method call is appreciated.

Thanks
Greg

  Re: Scatter Chart with Custom Symbols
Posted by Peter Kwan on Jan-24-2024 00:41
| Reply | Monitor
Hi Greg,

If you are sure your image files are relative to "user.dir", you can use:

c.setSearchPath(myUserDir);

The servlet context is only used for web applications. In a web applications, the files are often relative to the web application directory, not current working directory. Sometimes, the image files are compiled into the WAR/JAR file and may not exists as distinct files in the file system, and the paths may be virtual (eg. the URL path path is "/abc/def/aaa.png" but on the server it can be mapped to another directory). That's why we need to use ServletContext/ServletRequest to determine the actual file system path and load it.

If you think there is an error in using ServletContext, would you mind to inform me what is the error message?

In any case, if your code can detect the absolute path of the files at runtime, you can always use that folder path in the setSearchPath.

Best Regards
Peter Kwan