To make inspecting each supplier in this chart easier, I’ve added one more feature that distinguishes each supplier in this chart. Every second suppliers bar charts will have a light grey colour background. In order to achieve it, I will need 4 JavaScript variables:
let stripLinesArray = [];
let startValue =-0.5;
let endValue = monthCount - 0.5;
let color ="#e6e6e6";The stripLinesArray is an array where I will store values for the canvasJS stripLines. At the beginning there will be 3 values stored in this array which are:
- colour: the colour of the background on the chart.
- startValue: the point at which the coloured background will start. Since a one bar is measured as 1 on y axis, I need to start colouring the background at half of first bars value, which is 0.5, hence the startValue is set to -0.5.
- endValue: the point at which the coloured background will end. Since the number of bar charts for each supplier is equal to monthCount value, the monthCount is used to determine how many bars have a background coloured. And since the start of the colouring was moved by -0.5 on the startValue, I need to move the endValue by -0.5 as well. Thats why the original endValue is equal to monthCount-0.5.
All the values for these strip lines are created and added to the stripLinesArray inside the outer loop. The code for this is demonstrated below:
let stripLinesArray = [];
let startValue =-0.5;
let endValue = monthCount - 0.5;
let color ="#e6e6e6";
for (let i =0; i< supplierCount; i++ ){
//compose the array for dataPoints that will be used to draw the chart
for (let x=0; x< monthCount; x++){
//inner loop
}
if(i==0) {
stripLinesArray.push({startValue, endValue, color});
} else if (i % 2 == 0) {
startValue+=(monthCount*2);
endValue+=(monthCount*2);
stripLinesArray.push({startValue, endValue, color});
}
}Once the stripLinesArray is filled, it is sent to renderChart1() function (stripLinesArray will be used to store more values, but I will explain this in my next post).
renderChart1(colorArrayForChart1, stripLinesArray, dataPointsArray); How this code to colour background on the chart for every second supplier blends in inside JavaScript is demonstrated below, by highlighting relative code with green background.
const renderChart1 = (colorArrayForChart1, stripLinesArray, dataPointsArray) => {
CanvasJS.addColorSet("customColorSet1", colorArrayForChart1);
let chart = new CanvasJS.Chart("chart1InnerContainer", {
theme: "light1",
animationEnabled: true,
exportEnabled: true,
colorSet: "customColorSet1",
title: {
text: "Monthly pallet transfers by supplier",
fontSize: 20,
},
axisX: {
titleFontSize: 20,
labelFontSize: 14,
tickPlacement: "inside",
stripLines: stripLinesArray,
//removes all labels from axisX, later on they are added but as stripLines and with colors.
labelFormatter: function(e) { return "";}
},
axisY2: {
title: "Pallet Quantity",
titleFontSize: 14,
labelFontSize: 14,
includeZero: true,
},
data: [{
type: "bar",
indexLabelFontSize: 14,
axisYType: "secondary",
indexLabel: "{y}",
dataPoints: dataPointsArray
}]
});
chart.render();
}
//in this array I will store individual colors for chart 1
const colorArray = ["#408000", "#b3b300", "#cc3300", "#0059b3", "#cc7a00", "#5c5c8a", "#739900", "#997300", "#990073", "#2d5986"];
const organizeDataForChart1 = (chartData, distinctSuppliersNamesArray, distinctMonths) => {
//count object keys to determine the length of the object
let supplierCount = Object.keys(distinctSuppliersNamesArray).length;
let monthCount = Object.keys(distinctMonths).length;
//if supplier count at least 1, a chart will be drawn, else an empty chart will be drawn.
if (supplierCount > 0) {
//these array's will be filled inside the loops, and later passed to renderChart1 function
let colorArrayForChart1 = [];
let dataPointsArray = [];
//a variable to store suppliers name+month value.
let label = "";
let y;
let stripLinesArray = [];
//start/end values for strip line
let startValue =-0.5; //because the bar chart is in the middle of zero, it startas at -0.5 and ends at 0.5
let endValue = monthCount - 0.5;
//color for strip line
let color ="#e6e6e6";
let colorIndex = 0;
for (let i =0; i< supplierCount; i++ ){
//compose the array for dataPoints that will be used to draw the chart
for (let x=0; x< monthCount; x++){
label = distinctSuppliersNamesArray[i]+" "+distinctMonths[x];
y = chartData[distinctSuppliersNamesArray[i]][distinctMonths[x]];
dataPointsArray.push({label, y});
//fill array color
colorArrayForChart1.push(colorArray[colorIndex]);
///COLOUR SUPPLIERS NAME AND MONTH
stripLinesArray.push({value: (monthCount*i+x), label: label, labelPlacement: "outside", labelBackgroundColor: "white", color: "transparent", labelFontColor: colorArray[colorIndex]});
}
colorIndex++;
//if all 10 colors in the color array has been used, reset the counter, and start filling the colorArrayForChart1 with
if(colorIndex === 10) {colorIndex = 0;}
//draw a grey strip line on the chart for every second supplier
if(i==0) {
//add default values on first iteration
stripLinesArray.push({startValue, endValue, color});
} else if (i % 2 == 0) {
startValue+=(monthCount*2);
endValue+=(monthCount*2);
stripLinesArray.push({startValue, endValue, color});
}
}
//call the function to render the chart
renderChart1(colorArrayForChart1, stripLinesArray, dataPointsArray);
} else {
//draw empty chart
}
}
And this addition to the chart code produces this type of result:
These added stripe lines makes it easier to distinguish individual suppliers on the chart. Now I need to add suppliers names to the chart. Will be using the stripLinesArray again, but more about it in my post 😉