jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by mrezzonico 5 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Add text to the corner Posts

February 17, 2020 at 4:05 pm Add text to the corner #108123

mrezzonico

Participant

Hi all,

is it possible to add text to the corner (for example to the upper left corner) ?

Thanks
Miche

February 19, 2020 at 12:56 pm Add text to the corner #108154

Hristo

Participant

Hello Miche,

Could you clarify it?
Because if you want to move the title to the left corner then you could use the titlePadding property.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

February 19, 2020 at 2:51 pm Add text to the corner #108157

mrezzonico

Participant

Hello Hristo,

here an example.

Regards Miche

Chart with additional text into the corners

February 25, 2020 at 12:56 pm Add text to the corner #108216

Hristo

Participant

Hello Miche,

Thank you for the clarification.
There is no built-in feature for this.
But you could use the custom created elements and add them there with absolute position.
Or you could use the draw callback which provides the options of the jqxDraw plugin.
Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">JavaScript Chart Line series symbols and custom labels</title>
    <meta name="description" content="This is an example of Javascript chart line series with symbols and custom labels." " />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            // prepare chart data as an array
            var sampleData = [
                    { Day: "Monday", Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
                    { Day: "Tuesday", Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
                    { Day: "Wednesday", Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
                    { Day: "Thursday", Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
                    { Day: "Friday", Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
                    { Day: "Saturday", Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
                    { Day: "Sunday", Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 10, right: 15, bottom: 10 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                colorScheme: "scheme05",
                xAxis: {
                    dataField: "Day",
                    unitInterval: 1,
                    tickMarks: { visible: true, interval: 1 },
                    gridLinesInterval: { visible: true, interval: 1 },
                    valuesOnTicks: false,
                    padding: { bottom: 10 }
                },
                valueAxis: {
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 50,
                    title: { text: "Time in minutes<br><br>" },
                    labels: { horizontalAlignment: "right" }
                },
                seriesGroups:
                    [
                        {
                            type: "line",
                            series:
                            [
                                {
                                    dataField: "Swimming",
                                    symbolType: "square",

                                    labels:
                                    {
                                        visible: true,
                                        backgroundColor: "#FEFEFE",
                                        backgroundOpacity: 0.2,
                                        borderColor: "#7FC4EF",
                                        borderOpacity: 0.7,
                                        padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                    }
                                },
                                {
                                    dataField: "Running",
                                    symbolType: "square",

                                    labels:
                                    {
                                        visible: true,
                                        backgroundColor: "#FEFEFE",
                                        backgroundOpacity: 0.2,
                                        borderColor: "#7FC4EF",
                                        borderOpacity: 0.7,
                                        padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                    }
                                }

                            ]
                        }
                    ]
            };

            settings.draw = function (renderer, rect)
            {
                var wScale = rect.width / 13000
                var hScale = (rect.height) / 8500;

                renderer.text("Upper-Left", 10, 10, undefined, undefined, 0, { "class": "largeText", fill: "yellow", stroke: "orange" }, false, "center", "center", "centermiddle");
                renderer.text("Upper-Right", (rect.width - 90), 10, undefined, undefined, 0, { "class": "smallText" }, false, "center", "center", "centermiddle");
                renderer.text("Bottom-Left", 10, (rect.height - 20), undefined, undefined, 0, { "class": "largeText", fill: "yellow", stroke: "orange" }, false, "center", "center", "centermiddle");
                renderer.text("Bottom-Right", (rect.width - 98), (rect.height - 20), undefined, undefined, 0, { "class": "smallText" }, false, "center", "center", "centermiddle");
            }

            // setup the chart
            $("#chartContainer").jqxChart(settings);

        });
    </script>
</head>
<body>
    <div id="chartContainer" style="width: 850px; height: 500px"></div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

March 5, 2020 at 3:35 pm Add text to the corner #108319

mrezzonico

Participant

Thanks a lot !

Regards
Miche

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.