ChartText Constructor

Syntax

PP.Ui.ChartText(settings);

Parameters

settings. JSON object that contains values of class properties.

Description

The ChartText constructor creates an instance of the ChartText class.

Example

To execute the example, the HTML page must contain the Chart component named chart (see Example of Creating a Pie Chart). Add a text label to the chart. Let the label be colored in red on mouse over and in black on mouse out. Underline the label after clicking it:

// Determines if the given point is within the specified area
function isPointInArea(area, point) {
    var isGreaterThanLeftBorder = (point.getX() >= area.getLeft()) ? true : false;
    var isLessThanRightBorder = (point.getX() <= area.getLeft() + area.getWidth()) ? true : false;
    var isGreaterThanToptBorder = (point.getY() >= area.getTop()) ? true : false;
    var isLessThanBottomBorder = (point.getY() <= area.getTop() + area.getHeight()) ? true : false;
&nbsp;&nbsp;&nbsp;&nbsp;if (isGreaterThanLeftBorder &amp; isLessThanRightBorder &amp; isGreaterThanToptBorder &amp; isLessThanBottomBorder) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
&nbsp;&nbsp;&nbsp;&nbsp;}
}
// Creates chart plot area
function createPlotArea() {
&nbsp;&nbsp;&nbsp;&nbsp;// Create chart plot area
&nbsp;&nbsp;&nbsp;&nbsp;var plotArea = new PP.Ui.ChartPlotArea({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Parent: chart
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;return plotArea;
}
var label;
// Creates chart text label
function createChartText(plotArea) {
&nbsp;&nbsp;&nbsp;&nbsp;// Get chart pot area context
&nbsp;&nbsp;&nbsp;&nbsp;var context = plotArea.getContext();
&nbsp;&nbsp;&nbsp;&nbsp;label = new PP.Ui.ChartText({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Font: new PP.Font(),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Left: 15,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Top: 15,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text: &quot;Text example&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Parent: chart.getSerie(0),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Click: function(sender, args) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Rerender chart plot area
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plotArea.redraw();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.getFont().setIsUnderline(!label.getFont().getIsUnderline());
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.drawSelf(context);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MouseOut: function(sender, args) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Rerender chart plot area
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plotArea.redraw();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.setColor(&quot;#000000&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.drawSelf(context);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MouseOver: function(sender, args) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Rerender chart plot area
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plotArea.redraw();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.setColor(&quot;#FF0000&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.drawSelf(context);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;// Restore text label size
&nbsp;&nbsp;&nbsp;&nbsp;label.getSize = function() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var size = new PP.Rect({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Left: this.getLeft(),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Top: this.getTop(),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Width: this.getWidth(),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Height: this.getHeight()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return size;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;PP.Object.defineProps(PP.Ui.ChartText, [&quot;Color&quot;, &quot;Font&quot;], true);
&nbsp;&nbsp;&nbsp;&nbsp;// Rerender label
&nbsp;&nbsp;&nbsp;&nbsp;label.drawSelf(context);
&nbsp;&nbsp;&nbsp;&nbsp;return label;
}
// Adds char event handlers
function defineEventsForChart() {
&nbsp;&nbsp;&nbsp;&nbsp;chart.setCustomData({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IsMouseInLabelArea: false
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;chart.addEvent(chart.getDomNode(), &quot;mousemove&quot;, onMouseMove);
&nbsp;&nbsp;&nbsp;&nbsp;chart.addEvent(chart.getDomNode(), &quot;click&quot;, onClicked);
}
// Handles the MouseMove event
function onMouseMove(sender, args) {
&nbsp;&nbsp;&nbsp;&nbsp;var coord = new PP.Point({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X: args.Event.x,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Y: args.Event.y
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;if (isPointInArea(label.getSize(), coord)) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.MouseOver.fire(this, args);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chart.getCustomData().IsMouseInLabelArea = true;
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (chart.getCustomData().IsMouseInLabelArea) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.MouseOut.fire(this, args);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chart.getCustomData().IsMouseInLabelArea = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
};
// Handles the Click event
function onClicked(sender, args) {
&nbsp;&nbsp;&nbsp;&nbsp;var coord = new PP.Point({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X: args.Event.x,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Y: args.Event.y
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;if (isPointInArea(label.getSize(), coord)) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.Click.fire(this, args);
&nbsp;&nbsp;&nbsp;&nbsp;}
};
// Create chart plot area
var plotArea = createPlotArea();
// Create chart text label
createChartText(plotArea);
// Add chart event handlers
defineEventsForChart();

After executing the example the "Text example" text label is added to the chart:

On mouseover the text label is colored in red:

On clicking the text label is underlined:

See also:

ChartText