jQuery UI Widgets Forums Chart Display XAxis Lables as Legends

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 7 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Display XAxis Lables as Legends #84983

    Ranjith Kumar
    Participant

    Hi,

    I have one requirement like X-Axis Labels need to display as Legends,

    Sample Code:

    In Below Example series is displaying as a legend, I want to display the “Day” as a legend, Please help me to display X-axis Labels as a Legends

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.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”>
    $(document).ready(function () {

    // prepare chart data
    var sampleData = [
    { Day:’Monday’, Keith:30, Erica:15, George: 25},
    { Day:’Tuesday’, Keith:25, Erica:25, George: 30},
    { Day:’Wednesday’, Keith:30, Erica:20, George: 25},
    { Day:’Thursday’, Keith:35, Erica:25, George: 45},
    { Day:’Friday’, Keith:20, Erica:20, George: 25},
    { Day:’Saturday’, Keith:30, Erica:20, George: 30},
    { Day:’Sunday’, Keith:60, Erica:45, George: 90}
    ];

    // prepare jqxChart settings
    var settings = {
    title: “Fitness & exercise weekly scorecard”,
    description: “Time spent in vigorous exercise”,

    padding: { left: 5, top: 5, right: 50, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    xAxis:
    {
    dataField: ‘Day’,
    valuesOnTicks: false,
    showLegend: true,
    },
    valueAxis:
    {
    minValue: 0,
    maxValue: 100,
    unitInterval: 10,
    title: {text: ‘Time in minutes’}
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘bubble’,

    series: [
    { dataField: ‘George’, displayText: ‘George’,visible :false}
    ]
    }
    ]
    };

    // select the chartContainer DIV element and render the chart.
    $(‘#chartContainer’).jqxChart(settings);
    });
    </script>

    <style type=”text/css”>
    .redLabel
    {
    fill: #FF0000;
    color: #FF0000;
    font-size: 11px;
    font-family: Verdana;
    }

    .blueLabel
    {
    fill: #0000FF;
    color: #0000FF;
    font-size: 11px;
    font-family: Verdana;
    }
    </style>
    </head>
    <body class=’default’>
    <div id=’chartContainer’ style=”width: 1000px; height: 500px;”>
    </div>
    </body>
    </html>

    Thanks In Advance:)
    Ranjith

    Display XAxis Lables as Legends #85031

    ivailo
    Participant

    Hi Ranjith,

    There is no built in option about this behavior.
    As a workaround you can create additional element with the legend outside the chart.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.