Welcome Guest Search | Active Topics |

Toggling plotBand visibility
Options
Previous Topic Next Topic
jmedlock
#1 Posted : Tuesday, March 17, 2015 11:27:44 PM(UTC)
Rank: Newbie

Groups: DataVizJQuery, jQueryDV, Registered
Joined: 3/17/2015(UTC)
Posts: 3

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Is it possible to toggle the visibility of plotBands? I would like to be able to turn specific plotBands off/on based on a checkbox event on the page.

Thanks
Back to top
Dragan
#2 Posted : Wednesday, March 18, 2015 12:20:02 PM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

Unfortunately, currently plot bands don't have "visible" option, but you can try using the following code:

Code:
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {

            var chartOptions = {
                title: { text: 'Plot Bands' },
                animation: { duration: 1 },
                axes: [
                    {
                        location: 'left',
                        type: 'linear',
                        majorGridLines: { strokeDashArray: [1, 3] },
                        plotBands: [
                            {
                                fillStyle: '#fcb441',
                                from: 40,
                                to: 60,
                                zIndex: 0, // Posible values - 0, 1, 2
                                title: 'Good'
                            },
                            {
                                fillStyle: '#e0400a',
                                from: 60,
                                to: 70,
                                zIndex: 0, // Posible values - 0, 1, 2
                                title: 'Very Good'
                            }
                        ]
                    }
                ],
                series: [
                    {
                        type: 'column',
                        data: [['A', 45], ['B', 35], ['C', 68], ['D', 50], ['E', 5], ['F', 44]]
                    }
                ]
            };

            $('#jqChart').jqChart(chartOptions);

            $('input[type=checkbox]').change(function () {
                var checked = this.checked;
                var value = this.id;

                var plotBands = [];


                if ($("#Checkbox1").prop('checked')) {
                    plotBands.push({
                        fillStyle: '#fcb441',
                        from: 40,
                        to: 60,
                        zIndex: 0, // Posible values - 0, 1, 2
                        title: 'Good'
                    });
                };

                if ($("#Checkbox2").prop('checked')) {
                    plotBands.push({
                        fillStyle: '#e0400a',
                        from: 60,
                        to: 70,
                        zIndex: 0, // Posible values - 0, 1, 2
                        title: 'Very Good'
                    });
                };


                chartOptions.axes[0].plotBands = plotBands;

                $('#jqChart').jqChart(chartOptions);

            });
        });
    </script>

</head>
<body>
    <div>
        <div id="jqChart" style="width: 500px; height: 300px;">
        </div>
    </div>
    <input id="Checkbox1" value="1" type="checkbox" checked="checked" /> Display "Good" <br />
    <input id="Checkbox2" value="2" type="checkbox" checked="checked" /> Display "Very Good"
</body>
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Users browsing this topic
Guest (3)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.101 seconds.