Welcome Guest Search | Active Topics |

Dynamic vertical plotBands
dg0817
#1 Posted : Saturday, March 29, 2014 5:55:24 PM(UTC)
Rank: Member

Groups: Registered
Joined: 3/11/2013(UTC)
Posts: 13

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Can plotBands be vertical?

Is there a way to insert a plotBand when the program is fed with live data?

Here is my trial:

insertPlotBand(){
var bandObj = {
'fillStyle': fill,
'from': from,
'to': to,
'zIndex': 0,
'title': title
};

$('#jqChart').jqChart('option', "axes")[1]['plotBands'].push(bandObj);
$('#jqChart').jqChart('update');
}


Thanks!

David
Dragan
#2 Posted : Monday, March 31, 2014 3:09:53 AM(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)
Yes, this should work, but you need to add the axes first when you define the chart:
Code:
$('#jqChart').jqChart({
                axes: [
                    {
                        location: 'left'
                    },
                    {
                        location: 'bottom'
                    }
                ],
...
Best Regards,
Dragan Matek
jqChart Inc.
dg0817
#3 Posted : Monday, March 31, 2014 5:45:34 PM(UTC)
Rank: Member

Groups: Registered
Joined: 3/11/2013(UTC)
Posts: 13

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
I think somehow it doesn't work when the data is a live feed:

http://jsfiddle.net/237y6/

Maybe I made some mistakes?
Dragan
#4 Posted : Tuesday, April 1, 2014 6:30:35 AM(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)
For the category axis you need to use the indexes. Try using this code:

Code:
       function addDays(date, value) {
            var newDate = new Date(date.getTime());
            newDate.setDate(date.getDate() + value);
            return newDate;
        }

        function round(d) {
            return Math.round(100 * d) / 100;
        }

        var data1 = [];
        var data2 = [];

        var yValue1 = 50;
        var yValue2 = 200;

        var date = new Date(2010, 0, 1);

        var isRendered = false;

        var curSequence = 0;

        function renderChart() {

            $('#jqChart').jqChart({
                title: 'Chart Title',
                legend: { title: 'Legend' },
                border: { strokeStyle: '#6ba851' },
                background: "black",
                tooltips: { type: 'shared' },
                shadows: {
                    enabled: true
                },
                crosshairs: {
                    enabled: true,
                    hLine: false,
                    vLine: { strokeStyle: '#cc0a0c' }
                },
                axes: [
                    {
                        type: 'category',
                        location: 'bottom',
                        zoomEnabled: true,
                        plotBands: [],
                        labels: {
                            fillStyle: 'white',
                            resolveOverlappingMode: 'hide'
                        }
                    }
                ],
                series: [
                    {
                        title: 'Series 1',
                        type: 'line',
                        data: data1,
                        markers: null
                    },
                    {
                        title: 'Series 2',
                        type: 'line',
                        data: data2,
                        markers: null
                    }
                ]
            });

            var selectedDate = null;

            $('#jqChart').bind('dataHighlighting', function (e, data) {
                if (data) {
                    selectedDate = data[0].x;
                }
                else {
                    selectedDate = null;
                }
            });
        }

        function dataFeed() {
            curSequence++;
            var dateStr = getDateStr(date);

            yValue1 += Math.random() * 10 - 5;
            data1.push([dateStr, round(yValue1)]);

            yValue2 += Math.random() * 10 - 5;
            data2.push([dateStr, round(yValue2)]);

            date = addDays(date, 1);

            if (isRendered) {
                $('#jqChart').jqChart('update');
            } else {
                renderChart();
                isRendered = true;
            }

            if (curSequence >= 200) {
                clearInterval(timer);
                timer = null;
                alert(curSequence);
            } else if (curSequence == 75) {
                insertPlotBand(0, 74);
            }
        }

        function getDateStr(dateObj) {
            var year = dateObj.getFullYear();

            var month = dateObj.getMonth() + 1;
            if (month < 10) month = "0" + month;

            var date = dateObj.getDate();
            if (date < 10) date = "0" + date;

            var timeStr = getTimeStr(dateObj);

            return (year + "/" + month + "/" + date + " " + timeStr);
        }

        function getTimeStr(dateObj) {
            var hour = dateObj.getHours();
            if (hour < 10) hour = "0" + hour;

            var minute = dateObj.getMinutes();
            if (minute < 10) minute = "0" + minute;

            return (hour + ":" + minute);
        }

        function insertPlotBand(fromDate, toDate) {

            var axes = $('#jqChart').jqChart('option', 'axes');

            axes[0].plotBands.push(
                {
                    from: fromDate,
                    to: toDate,
                    fillStyle: 'red'
                });

            $('#jqChart').jqChart('update');
        }

        var timer = setInterval(dataFeed, 100);
Best Regards,
Dragan Matek
jqChart Inc.
dg0817
#5 Posted : Tuesday, April 1, 2014 7:29:17 AM(UTC)
Rank: Member

Groups: Registered
Joined: 3/11/2013(UTC)
Posts: 13

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Thanks, dragan. It works properly.
Users browsing this topic
Guest
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.105 seconds.