chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years, 9 months ago.

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

Author

chart Posts

November 22, 2012 at 7:31 am chart #11349

Member

hi,
Can you tell me how to concatenate name and value in jqxcharts legend. In legend i need to display both name and value corresponds to it.

Thanks in Advance.

Regards,
Harikala prasath

November 22, 2012 at 10:01 am chart #11355

Dimitar

Participant

Hello Harikala prasath,

Here is an example which shows how to add one of the values associated with a name to the legend. However, please note, that the name will show the same way in the tooltips, too.

<!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 Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith: ' + sampleData[0].Keith },
                                    { dataField: 'Erica', displayText: 'Erica: ' + sampleData[0].Erica },
                                    { dataField: 'George', displayText: 'George: ' + sampleData[0].George }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div style='height: 600px; width: 682px;'>
        <div id='host' style="margin: 0 auto; width: 680px; height: 400px;">
            <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
                top: 0px;">
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 22, 2012 at 10:28 am chart #11356

harikalaprasath

Member

This doesn’t works in my case…
I have a pie chart. where the display text is also from other field

Data : json data….
[{“name”: “Name1”, “value”:30},{“name”: “Name2”, “value”:30},{“name”: “Name3”, “value”:40}]
This is my data.
I want the legend as “Name1 – 30” – something like this…

In the example you provided, the display text is considered as a string… In pie and donut it is not that way i believe. sorry that i dint mention the type of chart earlier

Thanks & Regards,
Harikala prasath

November 22, 2012 at 11:04 am chart #11359

Dimitar

Participant

Hi Harikala prasath,

Here is the way to change the legend in a pie chart. Again, please note that this change affects the tooltip, too.

<!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/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Browser' },
                    { name: 'Share' }
                ],
                url: '../sampledata/mobile_browsers_share_dec2011.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var legend;
            for (var i = 0; i < dataAdapter.records.length; i++) {
                legend = dataAdapter.records[i].Browser + ': ' + dataAdapter.records[i].Share;
                dataAdapter.records[i].Legend = legend;
            };
            // prepare jqxChart settings
            var settings = {
                title: "Mobile browsers share in Dec 2011",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: true,
                legendLayout: { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Legend',
                                        labelRadius: 120,
                                        initialAngle: 15,
                                        radius: 95,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
        <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 26, 2012 at 9:12 am chart #11452

harikalaprasath

Member

Thanks a lot. It would be still more better if the dataAdapter can handle this kind… for example when creatin the object source i can give name of field and the value in it….
like,
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Browser’ , value:’Browser’, type: ‘string’},
{ name: ‘Share’ , value:’Share’, type: ‘int’},
{ name: ‘legend’ , value:’Browser’ + ‘Share’, type: ‘string’}
],
url: ‘../sampledata/mobile_browsers_share_dec2011.txt’
};

for adding two values from the data the type can be int and for concatenation as in my case, string…

And Also, a demo and documentation for data Adapter would be appreciated…

November 27, 2012 at 7:14 am chart #11510

Dimitar

Participant

Hi Harikala prasath,

Thank you for your feedback.

There is an entry in the documentation on Data Adapter – jqxDataAdapter. As for a demo, most widgets that have a source use Data Adapter – jqxGrid, jqxChart, jqxComboBox et al. You can check any of their respective demos.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.