1. Frank Bartsch
  2. PowerBuilder
  3. Thursday, 11 March 2021 22:30 PM UTC

I'm using PB2019R3 including echarts. The Demo App is very helpful but for the Case I'm interested in I couldn't find an example: I want to create an Chart with One or more Series with a datetime x-axis based either on a datawindow or a given SQL select. Any hints available? "Category" of course doesn't work but "time" doesn't accept my datatime values. Is there a Documentation for the echart Webbrowser userobject? TIA, Frank{KomentoDisable}

Frank Bartsch Accepted Answer Pending Moderation
  1. Saturday, 13 March 2021 12:33 PM UTC
  2. PowerBuilder
  3. # 1

Hi John,

I've found a solution for the correct syntax for time series :)

{title:{text:'Test FBA'},
legend:{data:['02 Verwaltung Astadt','01 Test']},
xAxis:[{type:'time'}],yAxis:{type:'value'},
series:[
{type:'bar',name:'02 Verwaltung Astadt',data:[['2010-12-01',1090],['2012-12-01',1150],['2013-02-01',1150],['2015-12-01',1275]]},
{type:'scatter',name:'01 Test',data:[['2010-10-01',985],['2011-03-01',560],['2012-12-01',1350],['2014-03-01',875]]}
]}

So the only question left is if there is a possibility to create that syntax comfortably with the n_webbrowser user object delivered as echart demo with PB2019R3 - with data source SQL, datastore or datawindow (my favorite for my current use case)

 

For instance the following code doesn't work:

ls_SQL = "select DATEFORMAT(PKC_Datum_Monatsanfang,'yyyy-mm-dd') || 'T00:00:00.000Z' Monatsanfang, sf_cc_get_objectname_from_pk(pkc_Referenzobjekt_datenerfassung) Referenzobjekt, round(sum(Wert_Monatsaggregation),1) Wert from dbo.CC_Betriebsdaten_Werte_MONATSAGGREGATION group by PKC_Datum_Monatsanfang, Referenzobjekt order by Referenzobjekt, PKC_Datum_Monatsanfang"

ls_Option = wb_1.of_CreateOption_Series(ls_SQL, 'line','Monatsanfang', 'Wert' , 'Referenzobjekt')

 

results in:

{title:{text:'Test FBA'},legend:{data:['02 Verwaltung Astadt','10 Asphaltmischwerk Astadt','11 Steinbruch Astadt']},grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},tooltip:{trigger:'axis'},toolbox:{feature:{dataZoom:{},saveAsImage:{},dataView:{}}},xAxis:[{type:'category',data:['2012-06-01T00:00:00.000Z','2014-06-01T00:00:00.000Z','2012-07-01T00:00:00.000Z','2014-07-01T00:00:00.000Z','2014-08-01T00:00:00.000Z','2014-01-01T00:00:00.000Z','2013-10-01T00:00:00.000Z','2014-12-01T00:00:00.000Z','2013-07-01T00:00:00.000Z','2014-02-01T00:00:00.000Z','2013-11-01T00:00:00.000Z','2013-08-01T00:00:00.000Z','2013-01-01T00:00:00.000Z','2012-10-01T00:00:00.000Z','2014-03-01T00:00:00.000Z','2013-12-01T00:00:00.000Z','2013-09-01T00:00:00.000Z','2013-02-01T00:00:00.000Z','2012-11-01T00:00:00.000Z','2014-04-01T00:00:00.000Z','2012-08-01T00:00:00.000Z','2012-01-01T00:00:00.000Z','2013-03-01T00:00:00.000Z','2012-12-01T00:00:00.000Z','2014-05-01T00:00:00.000Z','2012-09-01T00:00:00.000Z','2012-02-01T00:00:00.000Z','2013-04-01T00:00:00.000Z','2012-03-01T00:00:00.000Z','2011-12-01T00:00:00.000Z','2013-05-01T00:00:00.000Z','2012-04-01T00:00:00.000Z','2013-06-01T00:00:00.000Z','2012-05-01T00:00:00.000Z']}],yAxis:{type:'value'},series:[{type:'line',name:'02 Verwaltung Astadt',data:[1275,1150,1150,1090]},{type:'line',name:'10 Asphaltmischwerk Astadt',data:[613.9,730.7,1732.8,463.9,519.7]},{type:'line',name:'11 Steinbruch Astadt',data:[304622.2,210216.4,293021.1,173279.9,91081.5,320789.6,325483.5,278791.5,252299.3,243089.4,54999.3,263307.3,232377.9,182883.3,299711.7,221860.9,184752.8,247440.9,358267.9,86208.5,209576.6,120475.3,224732.2,221761.5,50883,292657.9,287823.1,249197.8,298534.7,259320.9,217093.3]}]}

 to change:

- category -> time

- date values has to deliver with the values and not with the x axis (like in my correct example above)

 

 

Is there a solution with n_webbrowse functionality (or have I to write the code for myself) ?

Best regards,

Frank

 

 

Comment
  1. John Fauss
  2. Saturday, 13 March 2021 15:39 PM UTC
I'm really glad to hear you have determined the syntax that will produce the desired results! Congratulations! I'm very sorry I cannot help you resolve what looks to be the final piece of the puzzle, as I have no hands-on experience with any of this. Hopefully, someone else in the Community will be able to assist you. If no one else responds in a timely manner, I suggest you post a separate, specific follow-up question on how you can affect the desired change in the x-axis type. Best of luck!
  1. Helpful
There are no comments made yet.
Frank Bartsch Accepted Answer Pending Moderation
  1. Friday, 12 March 2021 22:29 PM UTC
  2. PowerBuilder
  3. # 2

Hi John,

thanks once more. My problem is just unsolved but I'll continue tomorrow - I think I had to change the way for data delivery in case of time series completely and may be I couldn't solve that problem with the webcontrol that comes with PB2019R3 (which works fine with simple data except time series).

Best regards,

Frank

Comment
There are no comments made yet.
Frank Bartsch Accepted Answer Pending Moderation
  1. Friday, 12 March 2021 19:48 PM UTC
  2. PowerBuilder
  3. # 3

Hi John,

thanks for your documentation hint. I tried many examples before I wrote my question. For instance I tried this on to create a line graph with 3 x axis values that aren't equidistant (and therefore "category doesnt work properly):

{title:{text:'Test'},
legend:{data:['Series1']},
xAxis:{type:'category',data:['2020-01-05','2020-01-02','2020-01-20']},
yAxis:{type:'value'},
series:[{type:'line',name:'Series1',data:[2,1,3]}]}

 

Same with "time"

I tried various formattings for the Date values but doesnt got the right result. The best case would be to get an idea to use the n_webbrowser user object with any given options to serve the data (datawindow, datastore, sql select) and may be to get to know if its possible to create also graphs with more than one series. My question regarding a documentation means this user object.

Best regards,

Frank

Comment
  1. John Fauss
  2. Friday, 12 March 2021 20:45 PM UTC
I found an example echart using datetime values for the x-axis:

https://github.com/apache/echarts/issues/10920

Not sure if this will help you, but thought it worth a shot. I hope it helps, though.
  1. Helpful
There are no comments made yet.
John Fauss Accepted Answer Pending Moderation
  1. Thursday, 11 March 2021 22:48 PM UTC
  2. PowerBuilder
  3. # 4

Greetings, Frank - 

Maybe this link will help you?

https://echarts.apache.org/en/api.html#echarts

Regards, John

Comment
There are no comments made yet.
  • Page :
  • 1


There are no replies made for this question yet.
However, you are not allowed to reply to this question.