jQuery UI Widgets Forums Chart Custom Color Scheme?

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Custom Color Scheme? #26734

    ericgil
    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

    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/

    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?.

    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/

    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 ?.

    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/

    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!!!

    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/

    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 !!

    • This reply was modified 10 years, 6 months ago by  marveen.
    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/

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

You must be logged in to reply to this topic.