To execute the example, create an HTML page and perform the following operations:
1. Add links to JS and CSS files in the <head> tag:
PP.js.
PP.GraphicsBase.js.
PP.Charts_Canvas.js.
PP.css.
resources.ru.js.
2. Add style for a 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. Add a scenario that creates a line chart:
<script type="text/javascript">
var chart;
// Creates a chart
function createChart() {
// Create a line chart
chart = new PP.Ui.Chart({
MarkersEnabled: true, // Display data series markers
Width: 450, // Chart width
Height: 400, // Chart height
ParentNode: "chart",
Type: "Line", // Chart type
// X axis
XAxis: {
Categories: ["2001", "2002", "2003", "2004", "2005", "2006", "2007"],
IsX: true,
Labels: {
Enabled: true
}
},
// Secondary Y 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: chart.getMarkersEnabled(),
Radius: 8,
Symbol: chart.getMarkersSymbol(),
};
return marker;
}
// Creates a color array
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;
}
// Creates chart data series
var serie1, serie2;
function createSeries() {
chart.setSeries([serie1 = createSerie1(), serie2 = createSerie2()]);
chart.redraw(true);
}
// Creates the first data series for line chart
function createSerie1() {
var serie = new PP.Ui.ChartCanvasSerie({
Click: onClick,
Color: getColors()[0],
CustomData: "Series 1",
Data: getSerieData1(), // Series data
DataIndex: 0, // Data series index
DataLabels: getDataLabels(),
Editable: false, // Series data must not be edited
Id: "Serie0",
IsMasterSerie: true, // Specify that data series is a forecast one
LinePenEnabled: true, // Enable to display series lines
MasterSerieIdx: 0, // Forecast series index
Marker: getMarker(getColors()[0]), // Marker for chart data series
Name: "Australia", // Series name
LineColor: getColors()[4], // Line color
OnContextMenu: onContextMenu,
Parent: chart,
ParentSerieIndex: -1, // This data series is a parent one
Threshold: '0', // Y axis starts from 0
Type: "Line",
});
return serie;
}
// Creates the second data series for line chart
function createSerie2() {
var serie = new PP.Ui.ChartCanvasSerie({
Click: onClick,
Color: getColors()[1],
CustomData: "Series 2",
DataIndex: 1, // Data series index
DataLabels: getDataLabels(),
Editable: true, // Series data can be edited
Data: getSerieData2(), // Value array
Id: "Serie1",
LinePenEnabled: false,
Marker: getMarker(getColors()[1]), // Marker for chart data series
Name: "Brazil", // Series name
LineColor: getColors()[5], // Line color
OnContextMenu: onContextMenu,
Parent: chart,
ParentSerieIndex: 0, // Parent data series index
Threshold: '0',
Type: "Line"
});
// Set text in legend for this series
serie.setLegendText(serie.getCustomData() + ": " + serie.getName());
serie.setLegendTextWidth(5);
return serie;
}
// Returns value array 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 values array 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;
}
// Processes data series point click
function onClick(sender, args) {
if (args && args.Point) {
if (args.Point.getParent().checkPointOnPlot(args.Point)) {
console.log("A point with the %s value is selected within chart plot area",
args.Point.getY());
} else {
console.log("A point with the %s value is selected outside the chart plot area",
args.Point.getY());
}
};
}
// Handles context menu call event for data series point
function onContextMenu(sender, args) {
if (args && args.Point) {
printSerieInfo(args.Point.getParent());
}
}
// Returns data labels for data series points
function getDataLabels() {
var options = {
BackgroundColor: "rgb(255,239,153)",
BorderColor: "transparent",
BorderWidth: 1,
Font: new PP.Font(),
Radius: 0
};
return options;
}
// Displays information about specified data series
function printSerieInfo(serie) {
if (serie) {
// Determine whether series is a forecast one
if (serie.getIsMasterSerie()) {
console.log("Data series ia a forecast and has the %s index",
serie.getMasterSerieIdx());
} else {
console.log("Data series is not a forecast one");
}
console.log("Data series s% is selected", (serie.getIsSelected() ? "" : "is not "));
console.log("The data series %s is highlighted", (serie.getHighlighted() ? "" : "not "));
if (serie.getState === "Hover") {
console.log("Data series is hover over with a mouse cursor");
} else {
console.log("Data series is not hovered over with mouse cursor");
}
}
}
function onReady() {
// Create a line chart
createChart();
// Create chart data series
createSeries();
// Redraw chart
chart.redraw(true);
}
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 the HTML page contains a line chart with two data series:
See also: