Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
kikko
Contributor II
Contributor II

line chart on the fly change line thickness

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:

image.png

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:

 

app.visualization.create(
  'linechart',
  [
    {
      "qDef": {
        "qGrouping": "N",
        "qFieldDefs": ["Date"],
        "qFieldLabels": ["Year Month"]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Service Score",
        "qGrouping": "N",
        "qDef": "=expression1",
        "qNumFormat": {
          "qType": "U",
          "qnDec": 1,
          "qUseThou": 0
        }
      }
    },
	{
      "qDef": {
        "qLabel": "Parts Score",
        "qGrouping": "N",
        "qDef": "=expression2",
        "qNumFormat": {
          "qType": "U",
          "qnDec": 1,
          "qUseThou": 0
        }
      }
    },
	{
      "qDef": {
        "qLabel": "TK Score",
        "qGrouping": "N",
        "qDef": "=expression3",
        "qNumFormat": {
          "qType": "U",
          "qnDec": 1,
          "qUseThou": 0
        }
      }
    }	
  ],
  {
    "showTitles": false,
    "title": "",
	"dataPoint": {
      "show": true,
      "showLabels": true
	  }
  }
).then(function(vis){
  vis.show("QV23");

 

 

Labels (5)
1 Solution

Accepted Solutions
Christopher_prem

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"
      }
    }
  ]

View solution in original post

2 Replies
Christopher_prem

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"
      }
    }
  ]
kikko
Contributor II
Contributor II
Author

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");
});