jQuery UI Widgets Forums Chart Pie chart custom colors

This topic contains 2 replies, has 3 voices, and was last updated by  ryan paul 11 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Pie chart custom colors #5626

    robrichard
    Member

    Hi guys!

    I was wondering if there was a way to color specific items in a pie chart with specific colors. I have a map with colored icons that I would like to correlate to the pie chart categories.

    Thanks!

    Pie chart custom colors #5639

    Peter Stoev
    Keymaster

    Hi robrichard,

    It is possible to create a custom color scheme and apply it to the Chart.

    For example;

    <!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 Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.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/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', '#ccff00', '#00ffff', '#aaaaaa'] });
    // 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>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Pie chart custom colors #20883

    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

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

You must be logged in to reply to this topic.