Welcome Guest Search | Active Topics |

Displaying Date Time in Y Axis
Krupa
#1 Posted : Monday, April 29, 2013 9:24:24 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/30/2012(UTC)
Posts: 26

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

I have a requirement to plot a graph with Date Time in Y - Axis and a numeric value in X - Axis.

Please find my graph definition below:

var seriesdata = [['04/18/2013 09:30',150]];

function getFirstSeries(seriesdata) {
var first;
first = {
title: ErdWeb.constants.config.bst[1].range2Title,
type: 'verticalline',
data: seriesdata,
markers: {size: 10,type: 'rectangle',strokeStyle: '#0071C6',fillStyle: '#0071C6',lineWidth: 1
}
};
return first;
}

function getXAxis(){
var x1 = {
location: 'left',type: 'dateTime',
labels: {stringFormat: 'mm/dd HH:MM'},
title: {text: 'Date/ Time',fillStyle: 'black'},
intervalType: 'hours',
interval: 6,
reversed: true,
majorGridLines: {visible: false}
};
return x1;
}

function getYAxis(){
var y1={
location: 'bottom',
type: 'linear',
minimum: 0,
maximum: 600,
labels: {font: '9px sans-serif',intervalOffset: 0},
majorTickMarks: {intervalOffset: 0},
interval: 100,
title: {text: 'Value',fillStyle: 'black'},
majorGridLines: {visible: false}
};
return y1;
}

var first = getFirstSeries(b);
var second = getSecondSeries(c);
var x1 = getXAxis();
var y1 = getYAxis();

$(document).ready(function () {
$('#graph').jqChart({
paletteColors: {type: 'customColors',customColors: ['#0071C6','#FFC300']},
tooltips: {disabled: false},
border: {lineWidth: 0},
axes: [x1,y1],
series: [first,second]
});
});

When there is only a single input provided, then the graph is getting plotted but the Y- Axis value is not getting displayed.



Please help me out.

Thanks in advance.

Dragan
#2 Posted : Tuesday, April 30, 2013 4:29:26 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)
Unfortunately we can't run your sample.

var first = getFirstSeries(b); // here b is undefined.

Can you send us a running example, so we can look at it?
Best Regards,
Dragan Matek
jqChart Inc.
Krupa
#3 Posted : Tuesday, April 30, 2013 4:38:21 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/30/2012(UTC)
Posts: 26

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Please find the updated code below:


var seriesdata = [['04/18/2013 09:30',150]];

function getFirstSeries(seriesdata) {
var first;
first = {
title: ErdWeb.constants.config.bst[1].range2Title,
type: 'verticalline',
data: seriesdata,
markers: {size: 10,type: 'rectangle',strokeStyle: '#0071C6',fillStyle: '#0071C6',lineWidth: 1
}
};
return first;
}

function getXAxis(){
var x1 = {
location: 'left',type: 'dateTime',
labels: {stringFormat: 'mm/dd HH:MM'},
title: {text: 'Date/ Time',fillStyle: 'black'},
intervalType: 'hours',
interval: 6,
reversed: true,
majorGridLines: {visible: false}
};
return x1;
}

function getYAxis(){
var y1={
location: 'bottom',
type: 'linear',
minimum: 0,
maximum: 600,
labels: {font: '9px sans-serif',intervalOffset: 0},
majorTickMarks: {intervalOffset: 0},
interval: 100,
title: {text: 'Value',fillStyle: 'black'},
majorGridLines: {visible: false}
};
return y1;
}

var first = getFirstSeries(seriesdata);

var x1 = getXAxis();
var y1 = getYAxis();

$(document).ready(function () {
$('#graph').jqChart({
paletteColors: {type: 'customColors',customColors: ['#0071C6','#FFC300']},
tooltips: {disabled: false},
border: {lineWidth: 0},
axes: [x1,y1],
series: [first]
});
});

Please help me out in displaying the Y-Axis value.

Thanks.
Dragan
#4 Posted : Tuesday, April 30, 2013 5:02:50 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)
You can change your code to:

Code:
var seriesdata = [[new Date('04/18/2013 09:30'), 150]];

        function getFirstSeries(seriesdata) {
            var first;
            first = {
                // title: ErdWeb.constants.config.bst[1].range2Title,
                type: 'verticalline',
                data: seriesdata,
                markers: {
                    size: 10, type: 'rectangle', strokeStyle: '#0071C6', fillStyle: '#0071C6', lineWidth: 1
                }
            };
            return first;
        }

        function getXAxis() {
            var x1 = {
                location: 'left', type: 'dateTime',
                labels: { stringFormat: 'mm/dd HH:MM' },
                title: { text: 'Date/ Time', fillStyle: 'black' },
                // intervalType: 'hours',
                // interval: 6,
                reversed: true,
                majorGridLines: { visible: false }
            };
            return x1;
        }

        function getYAxis() {
            var y1 = {
                location: 'bottom',
                type: 'linear',
                minimum: 0,
                maximum: 600,
                labels: { font: '9px sans-serif', intervalOffset: 0 },
                majorTickMarks: { intervalOffset: 0 },
                interval: 100,
                title: { text: 'Value', fillStyle: 'black' },
                majorGridLines: { visible: false }
            };
            return y1;
        }

        var first = getFirstSeries(seriesdata);

        var x1 = getXAxis();
        var y1 = getYAxis();

        $(document).ready(function () {
            $('#graph').jqChart({
                paletteColors: { type: 'customColors', customColors: ['#0071C6', '#FFC300'] },
                tooltips: { disabled: false },
                border: { lineWidth: 0 },
                axes: [x1, y1],
                series: [first]
            });
        });
Best Regards,
Dragan Matek
jqChart Inc.
Users browsing this topic
Guest (2)
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.