Custom Color Scheme? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bubble, chart, color, color scheme, colorScheme, custom, jqxChart, series, value

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

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

Author

Custom Color Scheme? Posts

August 13, 2013 at 8:28 am Custom Color Scheme? #26734

Member

Hi,

we are currently evaluating the charting capability and wondering if there is a way to define or at least change the existing color scheme?

cheers,
Eric

August 13, 2013 at 9:46 am Custom Color Scheme? #26737

Dimitar

Participant

Hello Eric,

You can change the colour scheme by setting the colorScheme property to one of the eleven preset schemes (“scheme01” to “scheme11”).

Alternatively, you can set a custom scheme or colour for each series by setting either the colorScheme or the color properties of the particular series. An example on the matter is the Custom Styling demo.

Best Regards,
Dimitar

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

August 20, 2013 at 10:07 pm Custom Color Scheme? #27224

marveen

Participant

COLORS BY VALUE

is anyway that i can change the color of a especific value (example) is the values are > than 100 then the bubble gets Green
if is below that value , the color is RED. ??

is possible anyway?.

August 21, 2013 at 7:11 am Custom Color Scheme? #27253

Dimitar

Participant

Hi marveen,

Unfortunately, this feature is not supported by jqxChart.

Best Regards,
Dimitar

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

August 21, 2013 at 1:25 pm Custom Color Scheme? #27286

marveen

Participant

maybee i can make two series , one with the > 100 values and the other ,
soo , make a custom color and render the chart with that?..

is possible ?.

August 22, 2013 at 4:42 am Custom Color Scheme? #27335

Dimitar

Participant

Hi marveen,

Yeas, this can be achieved. For example, please take a look at the demo Custom Styling.

Best Regards,
Dimitar

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

August 28, 2013 at 10:04 pm Custom Color Scheme? #27896

marveen

Participant

Dear Team

the custom work is possible in the bubble chart (custom styling), i have a 4 dimensional bubble chat data data ,
– I have y axis value
– I have x axis value
– I have a size value (for bubble)
– and the color, like (temperature) (my problem)

in this case I can make a serie for everey one of the values and have the color value in RBG (anyway i can change it to FFFFFF mode)
for each series.. can i pass this color value as a parameter to the series configuration in the chart ?.

Greattings!!!

August 29, 2013 at 7:26 am Custom Color Scheme? #27926

Dimitar

Participant

Hi marveen,

Unfortunately, you cannot set a different colour for each bubble. The bubble chart type shows only three-dimensional data – X axis, Y axis and bubble radius. You can change the colour of each series, though.

Best Regards,
Dimitar

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

August 29, 2013 at 2:04 pm Custom Color Scheme? #27972

marveen

Participant

Thanks Dimitar ,

I have other Q.

if i use a serie for each bubble works?, this is my JsonData, i dont have problem with the Datavalues presentation on the chart.
just need the color be a parameter for each series from the data source, this is created by a webservice response (Json) (dot.net webservice) . of course the i can change de data structure if that helps to solve the problem.

[ {
“StrnombreLocal”: “MyStore – Downtown”,
“DblvariableX2”: 31.5659552812576,
“DblvariableY2”: 539990,
“DblvariableTamanho2”: 16480802816,
“DblvariableColor2”: 7601951669,
“StrValueColor”: “#FF0000”,
“IntBubbleMaxSize”: 20,
“IntBubbleMinSize”: 5
},
{
“StrnombreLocal”: “MyStore – Screw Village”,
“DblvariableX2”: 22.5659552812576,
“DblvariableY2”: 254450,
“DblvariableTamanho2”: 16480802816,
“DblvariableColor2”: 7601951669,
“StrValueColor”: “#79F780”,
“IntBubbleMaxSize”: 20,
“IntBubbleMinSize”: 5
},
….. more items!!

]

I need the variable StrValueColor , be the color settings in the series, and , draw a bubble for each one of the elements in the surce array.

greattings , thanks for your support !!

August 30, 2013 at 6:11 am Custom Color Scheme? #28010

Dimitar

Participant

Hi marveen,

Here is how to have unique colours with each bubble being a separate series:

<!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.10.2.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/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { City: 'New York', SalesQ1: 310500, SalesQ2: 210500, SalesQ3: 300000, YoYGrowthQ1: 1.05, YoYGrowthQ2: 1.25, YoYGrowthQ3: 1.11 },
                    { City: 'London', SalesQ4: 120000, SalesQ5: 169000, SalesQ6: 203000, YoYGrowthQ4: 1.15, YoYGrowthQ5: 0.95, YoYGrowthQ6: 1.31 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Sales by City in Q1 and Q2, and YoY sales growth",
                description: "(the size of the circles represents relative YoY growth)",
                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: 'City',
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'bubble',
                            valueAxis:
                            {
                                unitInterval: 50000,
                                minValue: 50000,
                                maxValue: 350000,
                                description: 'Sales ($)',
                                formatSettings: { prefix: '$', thousandsSeparator: ',' }
                            },
                            series: [
                                    { dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q1', color: "#FF0000" },
                                    { dataField: 'SalesQ2', radiusDataField: 'YoYGrowthQ2', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q2', color: "#00FF00" },
                                    { dataField: 'SalesQ3', radiusDataField: 'YoYGrowthQ3', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q3', color: "#0000FF" },
                                    { dataField: 'SalesQ4', radiusDataField: 'YoYGrowthQ4', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q4', color: "#FFFF00" },
                                    { dataField: 'SalesQ5', radiusDataField: 'YoYGrowthQ5', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q5', color: "#00FFFF" },
                                    { dataField: 'SalesQ6', radiusDataField: 'YoYGrowthQ6', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q6', color: "#FF00FF" }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.