Jump to content
JChartFX Community
  • 0

Conditional Formatting on Simple Bar Chart


bmcnally
 Share

Question

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

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...