topic line chart on the fly change line thickness in Integration, Extension & APIs

line chart on the fly change line thickness

kikko — Sat, 16 Nov 2024 00:20:12 GMT

Hi All,

I'm creating a mashup using visualizations generated on the fly. I was able to generate a line chart with 3 measures as you can see in the snapshot below:

Now my question is how to change the line thickness in JS file. I know from the manual that there is the possibility to change the thickness using the "style" property but I didn't undertand how and where to insert this property block into the code. I'm newbe in mashup development. Can someone help me on this?

Thank you all for the support!!

My code is:

Re: line chart on the fly change line thickness

Christopher_prem — Wed, 31 Mar 2021 21:01:11 GMT

Adding this the property next to "data point" ie at the end should change the thickness of the line

"components": [

{

"key": "line",

"style": {

"dataPointSize": 6,

"lineThickness": 5,

"lineType": "solid",

"lineCurve": "linear"

}

]

Re: line chart on the fly change line thickness

kikko — Thu, 01 Apr 2021 10:33:01 GMT

Thank you so much @Christopher_prem !!!

Now I have another question 🙂

As I saw in the manual I can change the format of each line separatly by applying same logic into the qmeasure block. But if I try to insert the code for "expr3" the line format doesn't change. Maybe I chosed the wrong place to insert the code or the syntax is not correct. I'm getting crazy!!

Can you please help me once again? Thank you again!

Please watch the updated code below:

app.visualization.create( 'linechart', [ { "qDef": { "qGrouping": "N", "qFieldDefs": ["Date"], "qFieldLabels": ["Year Month"] }, "qNullSuppression": true }, { "qDef": { "qLabel": "Service Score", "qGrouping": "N", "qDef": "=expr1", "qNumFormat": { "qType": "U", "qnDec": 1, "qUseThou": 0 } } }, { "qDef": { "qLabel": "Parts Score", "qGrouping": "N", "qDef": "expr2", "qNumFormat": { "qType": "U", "qnDec": 1, "qUseThou": 0 } } }, { "qDef": { "qLabel": "TK Score", "qGrouping": "N", "qDef": "expr3", "qNumFormat": { "qType": "U", "qnDec": 1, "qUseThou": 0 }, "style":{ "dataPointSize": 6, "lineThickness":1, "lineType":"dashed", "lineCurve":"linear" } } } ], { "showTitles": false, "title": "Service Score Trend", "nullMode": "connect", "scrollStartPos": 1, "dataPoint": { "show": true, "showLabels": true }, "measureAxis": { "show": "label", "dock": "near", "spacing": 0.5 }, "components": [ { "key": "line", "style": { "dataPointSize": 8, "lineThickness": 3, "lineType": "solid", "lineCurve": "linear" } } ] } ).then(function(vis){ vis.show("QV23"); });