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 an inverted spline chart with markers:
<script>
var chart;
// Create a chart
function createChart() {
// Create spline chart
chart = new PP.Ui.Chart({
Width: 450, // Chart width
Height: 400, // Chart height
ParentNode: "chart",
Type: "Spline", // Chart type
// X axis
XAxis: {
Categories: ["2001", "2002", "2003", "2004", "2005", "2006",
"2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"
],
Labels: {
Enabled: true
}
},
//Y axis
YAxis: {
Labels: {
Enabled: true
},
Max: 60,
Min: 0
},
// Additional Y axis
YSAxis: {
Enabled: false
},
Inverted: true, // Inverted chart
MarkersEnabled: true, // Display markers for data series
MarkersSymbol: "square" // Display markers as rectangles
})
}
// Create data series for spline chart
function createSeries() {
chart.setSeries([createSerie1(), createSerie2()]);
chart.redraw(true);
}
// 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 the first data series for spline chart
function createSerie1() {
var serie = new PP.Ui.ChartSplineSerie({
Data: getSerieData1(),
Name: "Australia", // Series name
Color: getColors()[0],
LineColor: getColors()[4], // Line color
Marker: getMarker(getColors()[0]), // Marker for chart data series
Parent: chart,
Type: "Spline",
});
return serie;
}
// Creates the second data series for spline chart
function createSerie2() {
var serie = new PP.Ui.ChartSplineSerie({
Name: "Brazil", // Series name
Data: getSerieData2(), // Values array
Color: getColors()[1],
LineColor: getColors()[5], // Line color
Marker: getMarker(getColors()[1]), // Marker for chart data series
Parent: chart,
Type: "Spline"
});
return serie;
}
// Create 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; } // 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]
}, {
X: 5,
Y: 51,
Name: "2006",
Color: getColors()[0]
}, {
X: 6,
Y: 47,
Name: "2007",
Color: getColors()[1]
}, {
X: 7,
Y: 33,
Name: "2008",
Color: getColors()[2]
}, {
X: 8,
Y: 39,
Name: "2009",
Color: getColors()[3]
}, {
X: 9,
Y: 29,
Name: "2010",
Color: getColors()[4]
}, {
X: 10,
Y: 22,
Name: "2011",
Color: getColors()[0]
}, {
X: 11,
Y: 24,
Name: "2012",
Color: getColors()[1]
}, {
X: 12,
Y: 16,
Name: "2013",
Color: getColors()[2]
}, {
X: 13,
Y: 14,
Name: "2014",
Color: getColors()[3]
}];
return data;
}
// Returns array of values 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]
}, {
X: 5,
Y: 25,
Name: "2006",
Color: getColors()[0]
}, {
X: 6,
Y: 29,
Name: "2007",
Color: getColors()[1]
}, {
X: 7,
Y: 33,
Name: "2008",
Color: getColors()[2]
}, {
X: 8,
Y: 36,
Name: "2009",
Color: getColors()[3]
}, {
X: 9,
Y: 42,
Name: "2010",
Color: getColors()[4]
}, {
X: 10,
Y: 48,
Name: "2011",
Color: getColors()[0]
}, {
X: 11,
Y: 51,
Name: "2012",
Color: getColors()[1]
}, {
X: 12,
Y: 56,
Name: "2013",
Color: getColors()[2]
}, {
X: 13,
Y: 60,
Name: "2014",
Color: getColors()[3]
}];
return data;
}
// Update markers of chart data series
function updateChartMarkers() {
for (var i in chart.getSeries()) {
var serie = chart.getSeries()[i];
// Get settings of chart data series
var states = serie.getStates();
states.Normal.Marker.Enabled = chart.getMarkersEnabled();
states.Normal.Marker.Symbol = chart.getMarkersSymbol();
}
// Update chart data series
chart.redrawSeries(true);
}
// Sets markers size for data series
function setMarkersRadius(radius) {
for (var i in chart.getSeries()) {
var serie = chart.getSeries()[i];
serie.getMarker().Radius = radius;
}
// Update chart data series
chart.redrawSeries(true);
}
function onReady() {
// Create spline chart
createChart();
// Create data series for the chart
createSeries();
// Re-render the chart
chart.redraw(true);
}
</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 the inverted spline chart with rectangle-shaped markers is placed on the HTML page:
See also: