I have a question about chart striplines.
I want to express it like the picture above.
Q1. I want to express the strip line of the chart above the xAxis I want. (xAxis is displayed as a date, and I want to put the strip line as a variable value in the date position.)
Q2. I want to express the stripline with dasharray like in the picture.
Below is the code I applied.
function createChart(grid) {
var chartData = new Array();
var chart = null;
if (grid.rows != null) {
for (var i = 0; i < grid.rows.length; i++) {
var data = new Object();
var date = grid.rows[i].data.DETE;
date = formatDate(date);
date = date.split("-");
date = date[1] + "/" + date[0];
data.IN_DATE = date;
data.SUPP_SUM = grid.rows[i].data.SUPP_SUM;
data.CHG_SUPP_SUM = grid.rows[i].data.CHG_SUPP_SUM;
data.WHITE_MODEL = grid.rows[i].data.WHITE_MODEL;
chartData.push(data);
}
chartData.reverse();
chartContainerReset();
chart = new ej.charts.Chart({
id: 'supportChart',
width: '98%',
hidden: false,
palettes: ["#FFE38C","#6BB7F6", "#FB5555"], //그래프 색상
tooltip: {
enable: true
},
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
stripLines: [
{ segmentAxisName: 'IN_DATE' ,segmentStart:'1/11', segmentEnd:'1/13', opacity: 0.7, dashArray: '7,7', verticalAlignment: 'Start', horizontalAlignment: 'Start', text: 'IFR', rotation: 360, textStyle: { size: 15, color: '#000000', width: 'bold' }, color: '#1b3cff' },
{ start: 20.00, end: 20.03, opacity: 0.7, dashArray: '7,7', verticalAlignment: 'Start', horizontalAlignment: 'Start', text: 'IFC', rotation: 360, textStyle: { size: 15, color: '#000000', width: 'bold' }, color: '#1b3cff' },
],
},
primaryYAxis:
{
title: 'Total support',
rangePadding: 'None',
minimum: 0,
maximum: 1500,
interval: 300,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
axes:
[
{
title: 'Support Change',
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
lineStyle: { width: 0 }, majorTickLines: { width: 0 },
minimum: 0, maximum: 500, interval: 50,
name: 'yAxis', minorTickLines: { width: 0 },
labelFormat: '{value}'
},
{
title: 'White Model',
visible : false,
rowIndex: 0, opposedPosition: false,
minimum: 0,
maximum: 100,
name: 'yAxis2',
labelFormat: '{value}'
}
],
series: [
{
type: 'Column',
dataSource: chartData,
xName: 'IN_DATE', width: 2,
yName: 'WHITE_MODEL', name: 'White Model',
yAxisName: 'yAxis2',
},
{
type: 'SplineArea',
dataSource: chartData,
xName: 'IN_DATE', width: 2, border: { width: 2, color: '#6BB7F6' }, opacity: 0.8,
marker: {
visible: false,
width: 8,
height: 8,
shape: 'Circle',
fill: '#6BB7F6',
isFilled: true,
border: { width: 1, color: 'Black' }
},
yName: 'SUPP_SUM', name: 'Support Total',
fill: 'url(#material-gradient-chart1)',
},
{
type: 'SplineArea',
dataSource: chartData,
xName: 'IN_DATE', width: 2, border: { width: 2, color: '#FB5555' }, opacity: 0.8,
marker: {
visible: false,
width: 12,
height: 12,
shape: 'Triangle',
fill: '#FB5555',
stroke:'Black',
isFilled: true,
border: { width: 1, color: 'Black' },
},
yName: 'CHG_SUPP_SUM', name: 'Support Change',
yAxisName: 'yAxis',
fill: 'url(#material-gradient-chart2)',
dashArray: '7',
}
],
height: '550'
}, '#chartContainer');
}
Below is the data that goes into the chart.
- chartData: Array(55)
- 0: {IN_DATE: '2/24', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 1: {IN_DATE: '2/23', SUPP_SUM: 914, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 2: {IN_DATE: '2/22', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 3: {IN_DATE: '2/21', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 4: {IN_DATE: '2/20', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 4}
- 5: {IN_DATE: '2/19', SUPP_SUM: 922, CHG_SUPP_SUM: 0, WHITE_MODEL: 3}
- 6: {IN_DATE: '2/18', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 7: {IN_DATE: '2/17', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 8: {IN_DATE: '2/16', SUPP_SUM: 905, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 9: {IN_DATE: '2/15', SUPP_SUM: 932, CHG_SUPP_SUM: 5, WHITE_MODEL: 5}
- 10: {IN_DATE: '2/14', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 4}
- 11: {IN_DATE: '2/13', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 3}
- 12: {IN_DATE: '2/12', SUPP_SUM: 930, CHG_SUPP_SUM: 8, WHITE_MODEL: 0}
- 13: {IN_DATE: '2/11', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 14: {IN_DATE: '2/10', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 5}
- 15: {IN_DATE: '2/9', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 16: {IN_DATE: '2/8', SUPP_SUM: 950, CHG_SUPP_SUM: 0, WHITE_MODEL: 4}
- 17: {IN_DATE: '2/7', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 18: {IN_DATE: '2/6', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 8}
- 19: {IN_DATE: '2/5', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 20: {IN_DATE: '2/4', SUPP_SUM: 940, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 21: {IN_DATE: '2/3', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 22: {IN_DATE: '2/2', SUPP_SUM: 900, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 23: {IN_DATE: '2/1', SUPP_SUM: 900, CHG_SUPP_SUM: 10, WHITE_MODEL: 0}
- 24: {IN_DATE: '1/31', SUPP_SUM: 890, CHG_SUPP_SUM: 10, WHITE_MODEL: 0}
- 25: {IN_DATE: '1/30', SUPP_SUM: 890, CHG_SUPP_SUM: 10, WHITE_MODEL: 0}
- 26: {IN_DATE: '1/29', SUPP_SUM: 890, CHG_SUPP_SUM: 30, WHITE_MODEL: 0}
- 27: {IN_DATE: '1/28', SUPP_SUM: 890, CHG_SUPP_SUM: 50, WHITE_MODEL: 0}
- 28: {IN_DATE: '1/27', SUPP_SUM: 890, CHG_SUPP_SUM: 100, WHITE_MODEL: 0}
- 29: {IN_DATE: '1/26', SUPP_SUM: 890, CHG_SUPP_SUM: 190, WHITE_MODEL: 0}
- 30: {IN_DATE: '1/25', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 31: {IN_DATE: '1/24', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 32: {IN_DATE: '1/23', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 33: {IN_DATE: '1/22', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 34: {IN_DATE: '1/21', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 35: {IN_DATE: '1/20', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 36: {IN_DATE: '1/19', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 37: {IN_DATE: '1/18', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 38: {IN_DATE: '1/17', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 39: {IN_DATE: '1/16', SUPP_SUM: 860, CHG_SUPP_SUM: 0, WHITE_MODEL: 0}
- 40: {IN_DATE: '1/15', SUPP_SUM: 860, CHG_SUPP_SUM: 20, WHITE_MODEL: 0}
- 41: {IN_DATE: '1/14', SUPP_SUM: 860, CHG_SUPP_SUM: 10, WHITE_MODEL: 0}
- 42: {IN_DATE: '1/13', SUPP_SUM: 860, CHG_SUPP_SUM: 20, WHITE_MODEL: 0}
- 43: {IN_DATE: '1/12', SUPP_SUM: 860, CHG_SUPP_SUM: 220, WHITE_MODEL: 0}
- 44: {IN_DATE: '1/11', SUPP_SUM: 750, CHG_SUPP_SUM: 180, WHITE_MODEL: 0}
- 45: {IN_DATE: '1/10', SUPP_SUM: 680, CHG_SUPP_SUM: 300, WHITE_MODEL: 0}
- 46: {IN_DATE: '1/9', SUPP_SUM: 380, CHG_SUPP_SUM: 80, WHITE_MODEL: 0}
- 47: {IN_DATE: '1/8', SUPP_SUM: 300, CHG_SUPP_SUM: 40, WHITE_MODEL: 0}
- 48: {IN_DATE: '1/7', SUPP_SUM: 260, CHG_SUPP_SUM: 20, WHITE_MODEL: 0}
- 49: {IN_DATE: '1/6', SUPP_SUM: 240, CHG_SUPP_SUM: 20, WHITE_MODEL: 0}
- 50: {IN_DATE: '1/5', SUPP_SUM: 220, CHG_SUPP_SUM: 10, WHITE_MODEL: 0}
- 51: {IN_DATE: '1/4', SUPP_SUM: 210, CHG_SUPP_SUM: 50, WHITE_MODEL: 0}
- 52: {IN_DATE: '1/3', SUPP_SUM: 160, CHG_SUPP_SUM: 40, WHITE_MODEL: 0}
- 53: {IN_DATE: '1/2', SUPP_SUM: