jQuery UI Widgets Forums Chart Add text to the corner

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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

    • This topic was modified 3 months, 2 weeks ago by  mrezzonico.
    • This topic was modified 3 months, 2 weeks ago by  mrezzonico.
    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

    • This reply was modified 3 months, 2 weeks ago by  Hristo.
    • This reply was modified 3 months, 2 weeks ago by  Hristo.
    Add text to the corner #108157

    mrezzonico
    Participant

    Hello Hristo,

    here an example.

    Regards Miche

      Chart with additional text into the corners
    • This reply was modified 3 months, 2 weeks ago by  mrezzonico.
    • This reply was modified 3 months, 2 weeks ago by  mrezzonico.
    • This reply was modified 3 months, 2 weeks ago by  mrezzonico.
    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

    Add text to the corner #108319

    mrezzonico
    Participant

    Thanks a lot !

    Regards
    Miche

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

You must be logged in to reply to this topic.