To execute the example, create an HTML page and perform the following operations:
1. Add a link to CSS file named PP.css. Also add links to the following JS files:
PP.js.
PP.GraphicsBase.js.
PP.Charts_Canvas.js.
resources.ru.js.
2. Within the <head> tag add a style for the block with the "chart" identifier:
<style type="text/css">
div#chart {
border: #CCCCCC 1px solid;
padding: 1px;
margin: 1px;
width: 450px;
height: 400px;
}
</style>
3. Then within the <head> tag add a script that creates a scatter chart:
<script>
var chart;
// Creates chart
function createChart() {
// Create chart
chart = new PP.Ui.Chart({
Width: 450, // Chart width
Height: 400, // Chart height
ParentNode: "chart",
Series: [{
Name: "Australia", // Series name
Data: getSerieData1(), // Value array
Color: getColors()[0], // Color
LineColor: getColors()[4], // Line color
LineWidth: 2, // Line width
Marker: getMarker(getColors()[0])
}, {
Name: "Asia",
Data: getSerieData2(),
Color: getColors()[1],
LineColor: getColors()[5],
LineWidth: 2,
Marker: getMarker(getColors()[1])
}],
Type: "Scatter", // Chart type
// X axis
XAxis: {
Categories: ["2001", "2002", "2003", "2004", "2005", "2006"],
IsX: true,
Labels: {
Enabled: true
}
},
// Y secondary axis
YSAxis: {
Enabled: false
}
});
}
// Returns marker for chart data series
function getMarker(borderColor) {
var marker = {
BorderColor: borderColor,
BorderWidth: 2,
Color: "rgb(255, 255, 255)",
Enabled: true,
Radius: 8,
Symbol: "Circle",
};
return marker;
}
// Creates Y axis for the chart
function createAxis() {
var axis = new PP.Ui.ChartCanvasAxis({
AllowDecimals: false, // Disable to use decimal values
Parent: chart,
// Set axis position determined by user
Position: "custom",
Min: 0,
Max: 70,
PlotBands: [],
PositionValue: -1, // The Y axis is places to the left from the chart construction area
Primary: true, // This axis is the main one
// Number of axis intervals
TickIntervalsCount: 5,
// Axis title
Title: {
Text: "Value",
DisplayUnit: "M. Rub.",
Font: new PP.Font(),
Wrap: PP.Ui.TextWrapping.WrapWithEllipsis,
Align: "Middle"
},
// Disable to use maximum and minimum values by default
UseDefaultExtremes: false,
LabelClick: function(sender, args) {
if (args.Tick) {
if (args.Tick.getFont().getIsUnderline()) {
args.Tick.getFont().setIsUnderline(false);
} else {
args.Tick.setFont(new PP.Font());
args.Tick.getFont().setIsUnderline(true);
}
this.redraw();
}
},
LabelMouseOut: function(sender, args) {
if (args.Tick) {
args.Tick.setColor("rgb(0,0,0)");
this.redraw();
}
},
LabelMouseOver: function(sender, args) {
if (args.Tick) {
args.Tick.setColor("rgb(255,0,0)");
this.redraw();
}
},
TitleDblClick: function(sender, args) {
if (args.Axis && args.Axis.getTitle()) {
console.log("Axis title: «%s»", args.Axis.getTitle().Text);
}
}
});
// Set up access methods for the Color, Font and ticks properties
PP.Object.defineProps(PP.Ui.ChartAxisTick, ["Color", "Font"], true);
PP.Object.defineProps(PP.Ui.ChartCanvasAxis, ["ticks"], true);
return axis;
}
// Display information about specified chart axis
function printAxisInfo(axis) {
console.log("Y axis height in pixels: %s", axis.getPixelLength());
value = 50;
console.log("Y axis coordinate corresponding to the %s value: %s", value,
axis.getPixelValue(value));
console.log("Y axis value corresponding to the %s coordinate: %s", 100,
axis.getAxisValue(100, true));
console.log("Value of the axis tick mark: %s", axis.getTickInterval());
console.log("Lenght of the axis tick nark in pixels: %s", axis.getTickPixelInterval());
console.log("Y axis width: %s", axis.getSize());
console.log("Data series linked to the axis:");
for (var i in axis.getLinkedSeries()) {
console.log(" %s", axis.getLinkedSeries()[i].getName());
}
}
// Creates array of colors
function getColors() {
var colors = [
"rgb(147,61,168)",
"rgb(255,217,0)",
"rgb(255,145,145)",
"rgb(107,188,128)",
"rgb(160,203,200)",
"rgb(195,214,108)",
"rgb(239,193,100)", "rgb(239,193,100)", "rgb(255,191,191)", "rgb(169,216,181)", "rgb(205,227,226)", "rgb(223,233,178)", "rgb(247,223,175)", ]; return colors; }
// Returns array of values for the first data series
function getSerieData1() {
var data = [{
X: 0,
Y: 10,
Name: "2001",
Color: getColors()[0]
}, {
X: 1,
Y: 30,
Name: "2002",
Color: getColors()[1]
}, {
X: 2,
Y: 17,
Name: "2003",
Color: getColors()[2]
}, {
X: 3,
Y: 25,
Name: "2004",
Color: getColors()[3]
}, {
X: 4,
Y: 55,
Name: "2005",
Color: getColors()[4]
}];
return data;
}
// Returns value color for the second data series
function getSerieData2() {
var data = [{
X: 0,
Y: 15,
Name: "2001",
Color: getColors()[5]
}, {
X: 1,
Y: 24,
Name: "2002",
Color: getColors()[6]
}, {
X: 2,
Y: 19,
Name: "2003",
Color: getColors()[7]
}, {
X: 3,
Y: 29,
Name: "2004",
Color: getColors()[8]
}, {
X: 4,
Y: 28,
Name: "2005",
Color: getColors()[9]
}];
return data;
}
function onReady() {
// Create scatter chart createChart(); // Create Y axis var yAxis = createAxis(); // Set this axis chart.setYAxis(yAxis, true); // Redraw the chart chart.redraw(true); // Display information about Y axis printAxisInfo(yAxis); } </script>
4. Within the <body> tag specify name of the function creating a chart as the value of the onLoad attribute, and also add a block with the "chart" identifier:
<body onload="onReady()"> <div id="chart"></div> </body>
After executing the example a scatter chart is placed on the HTML page:
The browser console shows information about vertical axis of the chart:
Pixel length of Y axis: 302
Y axis coordinate corresponding to the value 50: 86.28571428571428
Y axis value corresponding to the coordinate 100: 49.139072847682115
Value of an axis tick interval: 14
Pixel length of an axis tick interval: 60.4
Y axis width: 66.21875
Data series linked to the axis:
Australia
Asia
See also: