jQuery UI Widgets Forums Chart how to point out each column in series by a text permanently visible.

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 8 years, 11 months ago.

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

  • yvgamu
    Participant

    I am coding for a stacked column series. There are 4 column in series all are stacked.
    I have to show a text corresponding to each column permanently visible to differentiate them.


    Nadezhda
    Participant

    Hello yvgamu,

    Here is an example which shows four stacked column series of chart and display different text for each serie. I hope it would be helpful.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <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 as an array
                var sampleData = [
                        { Day: 'Monday', One: 30, Two: 0, Three: 25, Four: 12 },
                        { Day: 'Tuesday', One: 25, Two: 25, Three: 0, Four: 5 },
                        { Day: 'Wednesday', One: 30, Two: 0, Three: 25, Four: 30 },
                        { Day: 'Thursday', One: 35, Two: 25, Three: 45, Four: 7 },
                        { Day: 'Friday', One: 0, Two: 20, Three: 25, Four: 13 },
                        { Day: 'Saturday', One: 30, Two: 0, Three: 30, Four: 0 },
                        { Day: 'Sunday', One: 60, Two: 45, Three: 0, Four: 3 }
                ];
    
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise by activity",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: sampleData,
                    xAxis:
                        {
                            dataField: 'Day',
                            unitInterval: 1,
                            axisSize: 'auto',
                            tickMarks: {
                                visible: true,
                                interval: 1,
                                color: '#BCBCBC'
                            },
                            gridLines: {
                                visible: true,
                                interval: 1,
                                color: '#BCBCBC'
                            }
                        },
                    valueAxis:
                    {
                        unitInterval: 10,
                        minValue: 0,
                        maxValue: 120,
                        title: { text: 'Time in minutes' },
                        labels: { horizontalAlignment: 'right' },
                        tickMarks: { color: '#BCBCBC' }
                    },
                    colorScheme: 'scheme02',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn',
                                columnsGapPercent: 50,
                                seriesGapPercent: 0,
                                series: [
                                        { dataField: 'One', displayText: 'One' },
                                        { dataField: 'Two', displayText: 'Two' },
                                        { dataField: 'Three', displayText: 'Three' },
                                        { dataField: 'Four', displayText: 'Four' }
                                ]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;" />
    </body>
    </html>

    Best Regards,
    Nadezhda

    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.