jQuery UI Widgets › Forums › Chart › help chart columnstack

Tagged: , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  hongthach 9 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    help chart columnstack Posts
  • May 23, 2015 at 3:34 am help chart columnstack #71493

    hongthach
    Participant

    i want display total value at colum in top
    col

    May 23, 2015 at 3:43 am help chart columnstack #71494

    hongthach
    Participant
    var settings = {
                title: "clg",
                description: "",
                showLegend: true,
                showBorderLine: false,
                enableAnimations: true,
                showToolTips: true,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 400, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Day',
                    gridLines: { visible: true },
                    flip: false,
                   // axisSize: 'auto',
                    textRotationAngle: 90,
                },
                //columnSeriesOverlap: false,

                valueAxis:
                {
                    flip: true,
                    labels: {
                        visible: true,   
                        // formatFunction: function (value) {
                        //     return parseInt(value / 1000000);
                        // }
                    }
                },
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            orientation: 'horizontal',
                            columnsGapPercent: 50,
 
                            formatFunction: function (value) {
                            	console.log(value);
                            	if( typeof value != 'undefined'){
                            	//	var k = value.split('-');
                                	//return k[0]+'%';
                            	}
                            },
                            labels: {
                            	//dataField: 'Total_per',
                                visible: true,
                                verticalAlignment: 'top',
                                offset: { x: 0, y: -20 }
                            },
                            series: kk()
                             
                           
                        }
                    ]
            };

    my code, and i cant visiable tooltip when click column

    May 25, 2015 at 5:44 am help chart columnstack #71504

    Dimitar
    Participant

    Hello hongthach,

    Here is how to show the total of stacked columns/bars:

    <!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 as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
                ];

            // 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:
                {
                    flip: true,
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 120,
                    title: { text: 'Time in minutes' },
                    labels: { horizontalAlignment: 'right' },
                    tickMarks: { color: '#BCBCBC' }
                },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            orientation: 'horizontal',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling', labels: { visible: true, horizontalAlignment: 'right' }, formatFunction: function (value, index, series, seriesGroup) {
                                        return 'Total: ' + (sampleData[index].Running + sampleData[index].Swimming + sampleData[index].Cycling);
                                    }
                                    }
                                ]
                        }
                    ]
            };

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

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

    As for the tooltip, it should appear when a series is hovered, as happens in the chart demos.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    June 7, 2015 at 3:24 pm help chart columnstack #72121

    hongthach
    Participant

    thanks so much 😀
    it great work

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.