setting series colorScheme for stackedcolumn chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, colorScheme, javascript chart, jquery chart, jqwidgets chart, stackedcolumn

This topic contains 6 replies, has 2 voices, and was last updated by aykutucar 7 years, 5 months ago.

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

Author

setting series colorScheme for stackedcolumn chart Posts

May 2, 2017 at 8:47 pm setting series colorScheme for stackedcolumn chart #93262

Participant

Hi,
I am trying to have a stackedcolumn chart with 2 series using different color schemes.
I tried to do something like below but it ignores the colorScheme.
When I try to to set the color scheme after the line type: ‘stackedcolumn’, I get seriesIndex is not defined error.
I also tried to set the fillcolor for each series which kinda works but this time I lose mouseover highlighting and the gradient even though I set useGradient to true.

seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent:12,
seriesGapPercent: 0,
series: [
{
dataField: ‘DMEK’, displayText: ‘DMEK’, colorScheme: ‘scheme02’
},
{
dataField: ‘DSAEK’, displayText: ‘DSAEK’, colorScheme: ‘scheme02’
},
{
dataField: ‘PKP’, displayText: ‘PKP’, colorScheme: ‘scheme02’
},
{
dataField: ‘Other’, displayText: ‘Other’, colorScheme: ‘scheme02’
}
]
},
{
type: ‘stackedcolumn’,
columnsGapPercent: 15,
seriesGapPercent: 0,
series: [
{
dataField: ‘Domestic’, displayText: ‘Domestic’, colorScheme: ‘scheme09’
},
{
dataField: ‘International’, displayText: ‘International’, colorScheme: ‘scheme09’
}
]
}
]

May 3, 2017 at 7:24 am setting series colorScheme for stackedcolumn chart #93270

Hristo

Participant

Hello aykutucar,

You should use color member of the particular column of the series.
Please, take a look the example below, it is based on “Stacked and Grouped Column Series” demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart Stacked and Grouped Series example</title>
    <meta name="description" content="This is an example of JavaScript Chart Stacked and Grouped Series." />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
                { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
                { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
                { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
                { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
                { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
                { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                colorScheme: 'scheme06',
                xAxis:
                {
                    dataField: 'Day',
                    unitInterval: 1,
                    tickMarks: {
                        visible: true,
                        unitInterval: 1,
                        color: '#888888'
                    },
                    gridLines: {
                        visible: false,
                        unitInterval: 1,
                        color: '#888888'
                    }
                },
                valueAxis:
                {
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 120,
                    visible: true,
                    title: { text: 'Time in minutes<br>' },
                    tickMarks: { color: '#888888' },
                    gridLines: { color: '#888888' }
                },
                seriesGroups:
                [
                    {
                        type: 'stackedcolumn',
                        columnsGapPercent: 50,
                        seriesGapPercent: 5,
                        series: [
                            { dataField: 'Running', displayText: 'Running', color: "#FF0000" },
                            { dataField: 'Swimming', displayText: 'Swimming', color: "#00FF00" }
                        ]
                    },
                    {
                        type: 'stackedcolumn',
                        columnsGapPercent: 50,
                        seriesGapPercent: 5,
                        series: [
                            { dataField: 'Riding', displayText: 'Riding' },
                            { dataField: 'Cycling', displayText: 'Cycling' }
                        ]
                    }
                ]
            };

            // 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 />
        <h2>Description</h2>
        <br />
        This is an example of JavaScript chart stacked and grouped series.
    </div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

May 3, 2017 at 7:35 pm setting series colorScheme for stackedcolumn chart #93282

aykutucar

Participant

Hi Hristo,
It does the same thing as fillColor.
And again, I lose the mouseover highlighting and the gradient even though I set useGradient to true.
Is there a way to draw the color with the gradient?
Thanks.

May 4, 2017 at 7:23 am setting series colorScheme for stackedcolumn chart #93287

Hristo

Participant

Hello aykutucar,

I tested again this example and it seems to work fine.
Maybe these colors are too saturated and they confusing.
I would like to suggest you try with more ‘soft’ colors (eg. “#798ba8” & “#d1a151”).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

May 4, 2017 at 2:04 pm setting series colorScheme for stackedcolumn chart #93301

aykutucar

Participant

Hi again,
I don’t think it is related to the color.
I modified a previous fiddle of yours and changed one of the series to blue.
You can see that there is no gradient and no mouseover highlighting.

http://jsfiddle.net/XwM39/64/

May 9, 2017 at 1:43 pm setting series colorScheme for stackedcolumn chart #93378

Hristo

Participant

Hello aykutucar,

Thank you for this feedback.
I recommend you to use fillColor (because “color” property is deprecated) and hexadecimal color representation (“#0000FF”).
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

May 9, 2017 at 3:05 pm setting series colorScheme for stackedcolumn chart #93381

aykutucar

Participant

Hi Hristo,
That fixed it, thank you so much for your help.

Author

Posts

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

You must be logged in to reply to this topic.