jQWidgets Forums

jQuery UI Widgets › Forums › Chart › Chart Column Series with Labels and get information by click

Tagged: 

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Chart Column Series with Labels and get information by click Posts
  • October 1, 2020 at 12:28 pm Chart Column Series with Labels and get information by click #113208

    diego.marconato
    Participant

    Hello
    i need help.

    I’m trying jqwidget (jquery) “Column series with labels” to represent a generic credit / debit chart by year.

    I would like to click on a column some information for further processing.
    These are the values I get (example):
    Last Event: click, DataField: Credit, Value: 58000.65

    But I would also need to get the year of the column, and I don’t know how.
    Last Event: click, DataField: Credit, Value: 58000.65, Year: ……..

    This is my CSV:
    2015,58000.65,22000.55
    2016,53000.21,25000.04
    2017,4500.46,26000.32
    2018,39000.33,27000.60
    2019,34000.12,26000.31
    2020,13000.13,12000.14

    And this is my code:

    
<html lang="en">
<head>
    <title id='Description'>Monitoraggio Fondi</title>
    <meta name="description" content="This is an example of JavaScript Chart Column Series with Labels." />
    <link rel="stylesheet" href="./jqwidgets-ver10.1.5/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="./jqwidgets-ver10.1.5/jqwidgets/styles/jqx.light.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="./jqwidgets-ver10.1.5/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./jqwidgets-ver10.1.5/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets-ver10.1.5/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="./jqwidgets-ver10.1.5/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="./jqwidgets-ver10.1.5/scripts/demos.js"></script>
    <script type="text/javascript" src="./jqwidgets-ver10.1.5/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data as an array
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Year' },
                    { name: 'Credit' },
                    { name: 'Debit' }
                ],
                url: './jqxchartjavascript_chart_series.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var settings = {
                title: "Report for year",
                description: "Credit and Debit ",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    position: 'top',
                    dataField: 'Year',
                    gridLines: { visible: true }
                },
                colorScheme: 'scheme02',

                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                title: { text: 'Credit and Debit (Euro)' }
                            },
                            click: myEventHandler,
                            series: [
                                    {
                                        dataField: 'Credit',
                                        displayText: 'Credit',
                                        labels: {
                                            visible: true,
                                            verticalAlignment: 'top',
                                            offset: { x: 0, y: -20 }
                                        },
                                        formatFunction: function (value) {
                                            return Math.round(value / 1000) + 'K';
                                        }
                                    },
                                    {
                                        dataField: 'Debit',
                                        displayText: 'Debit',
                                        labels: {
                                            visible: true,
                                            verticalAlignment: 'top',
                                            offset: { x: 0, y: -20 }
                                        },
                                        formatFunction: function (value) {
                                            return Math.round(value / 1000) + 'K';
                                        }
                                    }
                            ]
                        }
                    ]

            };

            function myEventHandler(e) {
              var eventData = '<div><b>Last Event: </b>' +  e.event + '<b>, DataField: </b>' + e.serie.dataField + '<b>, Value: </b>' + e.elementValue +  "</div>";
                $('#eventText').html(eventData);
              };

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

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px;">
    </div>
    <div class="example-description">
    <br />
    <div id='eventText' style="width:600px; height: 30px" />
</body>
</html>

    Thanks in advance
    Diego

    October 2, 2020 at 10:44 am Chart Column Series with Labels and get information by click #113220

    Hristo
    Participant

    Hello Diego,

    Please, take a look at this example:
    http://jsfiddle.net/w0tx8hd5/1/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.