jQWidgets Forums

Tagged: enable hyperlinking in pie chart : get key and value together

This topic contains 1 reply, has 1 voice, and was last updated by maurizio 12 years, 3 months ago.

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

Author

enable hyperlinking in pie chart Posts

February 28, 2013 at 3:28 pm enable hyperlinking in pie chart #16072

Participant

I have created a pie chart showing a breakdown of total invoiced values split by job categories using data from a MySql database.

I now want to implement hyperlinking whereby when the user clicks on the chart series is directed to a detailed report with the results filtered by that series value, however I am not able to capture that value, all I am getting is the displayText name (i.e: job_type) and it’s value (e.g.: 250,34), but not the actual job type value (e.g.: Translation).

Is it possible to get the value of the database record rather than the name of the column? (formatted code in next entry)

February 28, 2013 at 3:31 pm enable hyperlinking in pie chart #16081

maurizio

Participant

Reformatted code for easier reading


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>jqxChart Pie Series Legend Example</title>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare amounts chart data
            var source2 = {
                datatype: "json",
                datafields: [
                    { name: 'job_type', type: 'string'},
                    { name: 'tot_invoiced',  type: 'currency'}
                ],
                url: "getData.php?tableName=vw_all_invoiced_jobs_by_amount"
            };
            var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true,
                loadError: function (xhr, status, error) {
                    alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare amounts chart settings
            var ctcAmt = {
                title: "Job breakdown by contract amount",
                description: "(Top 5 jobs - based on invoiced jobs)",
                enableAnimations: true,
                showLegend: true,
                legendLayout: { left: 350, top: 100, width: 300, height: 300, flow: 'vertical' },
                padding: { left: -180, top: 0, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 5, right: 0, bottom: 10 },
                source: dataAdapter2,
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            click: drillToDetails,
                            series:
                                [
                                    {
                                        dataField: 'tot_invoiced',
                                        displayText: 'job_type',
                                        labelRadius: 70,
                                        initialAngle: 15,
                                        radius: 120,
                                        centerOffset: 10,
                                        formatSettings: {decimalPlaces: 2}
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#amountChart').jqxChart(ctcAmt);
            $('#amountChart').jqxChart({toolTipShowDelay: 100});
            $('#amountChart').jqxChart({showBorderLine: true});
            // add a click event handler function to the 1st group
            function drillToDetails(e){
                var eventData = 'DataField: ' + e.serie.displayText + ', Value: ' +  e.elementValue;
                 alert(eventData);
            };
        });
    </script>
</head>
<body class='default'>
    <div id='amountChart' style="width: 600px; height: 350px; position: relative; left: 0px;
        top: 0px;">
    </div>
</body>
</html>

Author

Posts

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

You must be logged in to reply to this topic.