Conditional Formatting on Simple Bar Chart

bmcnally · March 29, 2013

I may be missing it, but can you setup conditional formatting on a simple bar chart, not just the point but actually make the bar a color based on the value?

For example number is > 80% then green, number is 80%-60% then yellow and under 60% is red.

I saw there we can conditinoally format the point but not the bar.

Thanks

angelr · April 1, 2013

Here is sample showing how to highlight points that fall within different ranges in a bar chart:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type='text/javascript'>

        window.onload = function () {

            onLoadDoc();

        }
        var chart1;


        function onLoadDoc() {

            chart1 = new cfx.Chart();
            chart1.setGallery(cfx.Gallery.Bar);
            var axis1 = chart1.getAxisY();

            axis1 = chart1.getAxisY();

            axis1.setMin(0);

            axis1.setMax(100);


            var conditional1 = new cfx.ConditionalAttributes();

            var condition1 = conditional1.getCondition();

            condition1.setFrom(80);

            condition1.setTo(100);

            conditional1.setText(">80%");

            conditional1.setTag("GreenCondition");
            var conditional2 = new cfx.ConditionalAttributes();

            var condition2 = conditional2.getCondition();

            condition2.setFrom(61);

            condition2.setTo(79);

            conditional2.setText("80%-60%");

            conditional2.setTag("YellowCondition");
            var conditional3 = new cfx.ConditionalAttributes();

            var condition3 = conditional3.getCondition();

            condition3.setFrom(0);

            condition3.setTo(60);

            conditional3.setText("<60%");

            conditional3.setTag("redCondition");


            chart1.getConditionalAttributes().add(conditional1);

            chart1.getConditionalAttributes().add(conditional2);

            chart1.getConditionalAttributes().add(conditional3);
            var items = [{

                "Value": 9

            }, {

                "Value": 15

            }, {

                "Value": 21

            }, {

                "Value": 26

            }, {

                "Value": 35

            }, {

                "Value": 43

            }, {

                "Value": 41

            }, {

                "Value": 44

            }, {

                "Value": 70

            }, {

                "Value": 74

            }, {

                "Value": 75

            }, {

                "Value": 80

            }, {

                "Value": 82

            }, {

                "Value": 85

            }];

            chart1.setDataSource(items);
            //To hide the default legendBox item - Optional

            var lia;

            lia = new cfx.LegendItemAttributes();

            chart1.getLegendBox().getItemAttributes().setItem((chart1.getSeries()), 0, lia);

            lia.setVisible(false);


            var chartDiv = document.getElementById('ChartDiv1');

            chart1.create(chartDiv);

        }

    </script>

    <link type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css" rel="Stylesheet" />

    <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>

    <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>

    <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>

    <style type="text/css">

        #chart .GreenCondition

        {

            stroke: #00AF33;

            fill: #00AF33;

        }

        

        

        #chart .YellowCondition

        {

            stroke: #EEEE00;

            fill: #EEEE00;

        }

        

        

        #chart .redCondition

        {

            stroke: #FF0000;

            fill: #FF0000;

        }

    </style>

</head>

<body>

    <br />

    <div id="ChartDiv1" style="width: 600px; height: 400px; display: inline-block">

    </div>

</body>

</html>

You can also check the jsfiddle for this sample: http://jsfiddle.net/softwarefx/MK5j6/

Conditional Attributes

Sign In

Conditional Formatting on Simple Bar Chart

Question

bmcnally

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

angelr

Link to comment

Share on other sites

Join the conversation

Browse

Activity