Axis: Object;
The Axis property determines template of chart axes settings.
Use JSON to set the property value and the getAxis method to get the property value.
The Axis property is used to auto create chart axes if no value is defined for the ParallelCoordinates.Axes property. Settings template is a JSON object whose fields are properties of the PCAxis class.
To execute the example, create an HTML page and perform the following operations:
1. Add a link to the CSS file named PP.css. Also add links to the following JS files:
PP.js.
PP.GraphicsBase.js.
PP.ParallelCoordinates.js.
2. Within the <body> tag place a block with the "area" identifier to store parallel coordinates chart.
3. Then within the <body> tag add a script that creates a parallel coordinates chart and has a specified template of settings for chart axes and lines:
// Set path to the icons folder
PP.ImagePath = '../../../../../build/img/';
// Define settings of the parallel coordinates chart
var options = {
"Axis": {
// Color of the base line of the chart axis
"BaseStroke": "#44CCCCCC",
// Width of the axis base line
"BaseThickness": "2",
// Color of the filtering range
"RangeFill": "#44CCCCCC",
// Color of the filtering range outline
"RangeStroke": "#99CCCCCC",
// Width of the filtering range
"RangeThickness": "8",
// Minimum value of the filtering range
"RangeMinValue": "0.9",
// Maximum value of the filtering range
"RangeMaxValue": "2.6",
// Chart axis caption
"Header": {
"Style": {
"Release": {
"Font": {
"Color": "#ff462c",
"IsBold": "True",
"Size": "18"
}
}
}
},
// Axis label for the minimum value of the filtering range
"RangeMinLabel": {
"Style": {
"Release": {
"Font": {
"Color": "#000000"
}
}
}
},
// Axis label for the maximum value of the filtering range
"RangeMaxLabel": {
"Style": {
"Release": {
"Font": {
"Color": "#000000"
}
}
}
}
},
// Chart legend
"Legends": {
"legend0": {
"Type": "Intervals",
"Header": {}
}
},
// Time line
"Timeline": {
"StepsNames": ["2005", "2006", "2007", "2008"]
},
// Data mapping settings
"Visuals": {
"main": {
"PPType": "PP.Ui.PCVisual",
"DataSource": "ds0",
"Mappings": {
"mapping0": {
"Id": "mapping0",
"DimAttributeId": "attr0",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.CoordinateTransformer"
}
},
"mapping1": {
"Id": "mapping1",
"DimAttributeId": "attr1",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.CoordinateTransformer"
}
},
"mapping2": {
"Id": "mapping2",
"DimAttributeId": "attr2",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.CoordinateTransformer"
}
}
}
},
"color": {
"PPType": "PP.ColorVisual",
"ColorMapping": {
"Scale": {
"TypeArguments": "Brush",
"Items": "#99ff462c #99ebaf36 #99ffd900 #99b1ca40 #996a8535"
},
"Type": "Scale"
}
}
},
// Chart data source
"DataSources": {
"ds0": {
"Id": "ds0",
"AttributesNames": {
"attr0": "The resident population (total, thousand.)",
"attr1": "Gross regional product (mln. rubles.)",
"attr2": "Retail trade turnover, bln. rubles."
},
"ItemsNames": {
"O38003400300034003200": "Africa",
"O38003400300033003800": "Asia",
"O3300310036003400370038003000": "Europe",
"O310039003200370038003000": "North America",
"O3300310036003400380030003000": "South America",
"O38003400300031003200": "World",
},
"Series": {
"O38003400300034003200": {
"attr0": {
"Items": "1.48190591 1.59584524 1.69484782 1.77443946"
},
"attr1": {
"Items": "109.48656 109.99307 111.31474 109.95764"
},
"attr2": {
"Items": "42.90528949 40.87774911 37.18942016 41.14330847"
}
},
"O38003400300033003800": {
"attr0": {
"Items": "2.60307468 2.6364252 2.66619155 2.69506159"
},
"attr1": {
"Items": "101.82519 102.85029 94.18395 85.03809"
},
"attr2": {
"Items": "43.38438688 38.52309016 34.86914099 37.02317165"
}
},
"O3300310036003400370038003000": {
"attr0": {
"Items": "-0.23692341 -0.18961622 -0.13965343 -0.07433788"
},
"attr1": {
"Items": "102.06544 99.21836 98.16013 98.75872"
},
"attr2": {
"Items": "1.66250417 1.39672431 1.49987782 2.52080851"
}
},
"O310039003200370038003000": {
"attr0": {
"Items": "2.74184965 3.44912559 3.94439543 3.93249117"
},
"attr1": {
"Items": "118.15176 113.93954 113.0123 114.23096"
},
"attr2": {
"Items": "29.71075271 28.53453398 24.54912505 27.78798884"
}
},
"O3300310036003400380030003000": {
"attr0": {
"Items": "1.47430971 1.34308393 1.22511846 1.14711313"
},
"attr1": {
"Items": "NULL NULL NULL NULL"
},
"attr2": {
"Items": "3.02967435 3.38699726 5.97802034 4.33109101"
}
},
"O38003400300031003200": {
"attr0": {
"Items": "1.53168406 1.51072338 1.48751165 1.46045335"
},
"attr1": {
"Items": "120.09725 120.19888 120.2091 120.07056"
},
"attr2": {
"Items": "8.61129651 9.60846507 8.86245571 11.92132783"
}
}
}
}
}
}
// Specify the parent
options.ParentNode = document.getElementById("area");
// Set chart size
options.Width = 600;
options.Height = 400;
// Define settings for chart lines
options.Line = {
Thickness: 5
};
var coord = new PP.Ui.ParallelCoordinates(options);
After executing the example the parallel coordinates chart is created with a specified template for settings of its axes and lines:
See also: