Fix the Field Color - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, color, jqxChart, pie

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

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

Author

Fix the Field Color Posts

May 10, 2013 at 5:52 am Fix the Field Color #20892

ryan paul

Participant

hi everyone,

i have a problem in changing the color of the pie chart,
i have a data, like field1, field2, field3

when i set the color of the field using the above method, when
field 1 color would be yellow,
field 2 color would be red,
field 3 color would be blue,

the problem when i do not have a data for field1, the color of the chart will change to
field2 will be red, and field3 will become blue.

is there a way to fix the color that even when the value of the first columns it will not change the color of the succeeding fields?

thanks,
Ryan

May 10, 2013 at 9:15 am Fix the Field Color #20933

Dimitar

Participant

Hello Ryan,

If the scenario you have is the same as the following example, then know that this is the default behaviour of jqxChart:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/desktop_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); } });
            $.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#ffff00', '#ff0000', '#0000ff'] });
            // prepare jqxChart settings
            var settings = {
                title: "Desktop browsers share in Dec 2011",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: false,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'myScheme',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        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>

desktop_browsers_share_dec2011.txt:

Internet Explorer, 0
Firefox, 26.5
Chrome, 25.4

Best Regards,
Dimitar

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

May 10, 2013 at 10:05 am Fix the Field Color #20941

ryan paul

Participant

hi sir,
in your example the color of the internet explorer will be green
and the firefox will be pink, and the chrome will become orange,

but if i remove the value of the internet explorer
the color of the firefox will become green, and the color of the chrome will become pink,

how can i retain the color of the field because if the value of the internet explorer is 0 it will not appear in the chart and it will only gonna display two field or two color. which are the firefox and chrome, which i think they will get the color of the first two colors which are the green and the pink.

i wanted that even if the value of the internet explorer the color of the firefox and chrome will still remain

regards.
ryan

May 13, 2013 at 5:42 am Fix the Field Color #20991

Dimitar

Participant

Hello ryan,

If you remove Internet Explorer, the only two remaining items will use the first two colours from:

colors: ['#ffff00', '#ff0000', '#0000ff']

i.e. green and pink.

If you, however, keep Internet Explorer with a 0 value, it will not show, but the other two will have the second and third colour (pink and orange). It is your choice which of the two effects you wish to achieve.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.