Hello,
Please find the updated JS Fiddle accordingly.
http://jsfiddle.net/anindita5151/r3162x8L/14/
I must insert Striplines on the position of X-values fetched from st array , they are not hard-coded suggested for Chart division. Please find the code snippet below: var st=[] var chart = new CanvasJS.Chart(“chartContainer”,{ axisX: { labelAngle: -90, stripLines: [{ value: st[0],showOnTop: true, }, { value:st[1], showOnTop: true, } , … and so on… ,{value: st[n]} ] },
Please suggest me.
Thank you. I tried with Striplines as you have provided in this JSFiddle but striplines are not hardcoded for my case. They are coming from some array and I want to put them accordingly by traversing a for loop against that array. Pleas let me know how to add striplines following array like this:
axisX: { labelAngle: -90, stripLines: [ for(i=0; i<st.length; i++){value: st[i]} so that it can take the values as following: { value: st[0] }, { value: st[1] }, … and so on… ,{value: st[n]] },
Please help me…Thanks in Advance!
Thanks a lot. It is working fine. Yet having another problem to create a graph having multiple subdivisions within it, looking for it for a long time in canva js site and Google but in vain. I tried with Striplines, Label, Index label properties but they are not working.
Can you please suggest me?
Following is the part of my code related to the specific chart
CODE: ` function fd(drpMktlst) { if (drpMktlst) { var dataPointsDrp30 = []; var myTableDrp30 = document.getElementById(‘drp30tb’); var end = [] var tmp=[] var st=[] st.push(0) var array =[] var points=[] for (i = 1; i < myTableDrp30.rows.length; i++){//loops through rows var cellsDrp30 = myTableDrp30.rows.item(i).cells;//loop through each column or cell in each row var dataPointDrp30 = { label: String(cellsDrp30.item(0).innerHTML), y: Number((cellsDrp30.item(1).innerHTML).replace(“%”,””))}; dataPointsDrp30.push(dataPointDrp30); array.push(String(cellsDrp30.item(2).innerHTML)) } console.log(“array =”+array) console.log(“array =”+array.length) for (var x = 0; x < (array.length); x++) { if(array[x] !== array[x+1]) { end.push(x) } } console.log(“Ends at =”+end); for (var p = 0; p < (end.length-1); p++) { st.push(end[p]+1) } console.log(“Starts at =”+st)
var lenStr = st.length+end.length console.log(“lenStr = ” +lenStr) var finalArr =[]
for (var y = 0; y < lenStr; y++) {
if(y%2==0) { for(var s=0;s<st.length;s++) { if(!finalArr.includes(st[s])) finalArr.push(st[s]) } } else if(y%2!=0) { for(var e=0;e<end.length;e++) { if(!finalArr.includes(end[e])) finalArr.push(end[e]) } } }
function sortI(a, b) { return a > b ? 1 : b > a ? -1 : 0; }
finalArr.sort(sortI);
console.log(“finalArr = “+ finalArr)
//if(array.inclu)
var thrdget =”<%=thrdget%>”;
var chartDrp30 = new CanvasJS.Chart(“chartContainerDrp30”, { title: { text: “VoLTE Drops”,fontFamily: “Arial,Helvetica,sans-serif”,fontSize: 10,fontWeight: “bold” },
axisY:{ title:”% Of Subscribers”,titleFontFamily: “Arial,Helvetica,sans-serif”,fontSize: 10, minimum: 0, interval:8,valueFormatString:”# ‘%'”, gridThickness: 0, stripLines: [{ value: thrdget, showOnTop: true,label: “Threshold = “+thrdget,labelFontFamily:”Arial,Helvetica,sans-serif”, labelFontColor:”Red”, labelPlacement:”inside”,labelAlign: “center”,labelFontStyle:”bold”, labelFontSize:12 }] }, axisX:{ title: “Market”,titleFontFamily: “Arial,Helvetica,sans-serif”,fontSize: 10,minimum: 0.0 , interval: 1,labelAngle: -90,labelMaxWidth: 100,labelWrap: true//, /* stripLines:[ { startValue:finalArr[0], endValue:finalArr[1]+1, color:”#e6e6d8″,label:”” }, { startValue:finalArr[2]+1, endValue:finalArr[3]+1, color:”#e6e6d8″, } ] */ }, width:1190,dataPointWidth: 10, data: [{ type: “column”, color: “#91caf9”, //xValueType: “String”, dataPoints: dataPointsDrp30 }] }); chartDrp30.render(); } }
the image that I want to make look a like is :: https://drive.google.com/file/d/1ERjQDCDqWYBnLGmEe34dfxkSGe7HLpkZ/view?usp=sharing
http://jsfiddle.net/anindita5151/r3162x8L/2/