Welcome Guest Search | Active Topics |

Color background in between spline
Options
Previous Topic Next Topic
Krupa
#1 Posted : Friday, January 11, 2013 6:06:32 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)
I have a requirement to add color background in between 2 splines using JQchart.
Is there a possibility to do this using JQChart.
Back to top
Ivan
#2 Posted : Friday, January 11, 2013 6:20:48 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

Thanks: 0 times
Was thanked: 15 time(s) in 15 post(s)
Have you tried the spline range chart:

http://www.jqchart.com/jquery/chart/ChartTypes/SplineRangeChart
Best,
Ivan Petrov
jqChart Inc.
Back to top
Krupa
#3 Posted : Friday, January 11, 2013 6:39:47 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)
I have defined spline series data like below,

var mal1 = [ [ 0, 44.9251 ], [ 0.5, 47.97812 ], [ 1.5, 52.19859 ]];
var mal2 = [ [ 0, 45.56841 ], [ 0.5, 48.55809 ], [ 1.5, 52.72611 ]];
var mal3 = [ [ 0, 46.55429 ], [ 0.5, 49.4578 ], [ 1.5, 53.55365 ]];
var mal4 = [ [ 0, 48.18937 ], [ 0.5, 50.97919 ], [ 1.5, 54.9791 ]];

And series is defined like this:

series : [{ type : 'spline',
markers : null,
data : mal1
}, {
type : 'spline',
markers : null,
data : mal2
}, {
type : 'spline',
markers : null,
data : mal3
}, {
type : 'spline',
markers : null,
data : mal4
}];
I want blue color background between data series mal1 and mal2 ,
yellow color background between data series mal2 and mal3 ,
red color background between data series mal3 and mal4.
Back to top
Ivan
#4 Posted : Tuesday, January 15, 2013 4:01:31 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

Thanks: 0 times
Was thanked: 15 time(s) in 15 post(s)
Code:
$(document).ready(function () {

        var mal1 = [[0, 44.9251, 45.56841], [0.5, 47.97812, 48.55809], [1.5, 52.19859, 52.72611]];
        var mal2 = [[0, 45.56841, 46.55429], [0.5, 48.55809, 49.4578], [1.5, 52.72611, 53.55365]];
        var mal3 = [[0, 46.55429, 48.18937], [0.5, 49.4578, 50.97919], [1.5, 53.55365, 54.9791]];

        $('#jqChart').jqChart({
            series: [
                       {
                           type: 'splineRange',
                           data: mal1
                       },
                       {
                           type: 'splineRange',
                           data: mal2
                       },
                       {
                           type: 'splineRange',
                           data: mal3
                       }
                    ]
        });
    });


Does this code work for you?
Best,
Ivan Petrov
jqChart Inc.
Back to top
Krupa
#5 Posted : Friday, January 18, 2013 2:31:03 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 try this code and let us know:

var mal1 = [[0, 44.9251, 45.56841], [0.5, 47.97812, 48.55809], [1.5, 52.19859, 52.72611]];
var mal2 = [[0, 45.56841, 46.55429], [0.5, 48.55809, 49.4578], [1.5, 52.72611, 53.55365]];
var mal3 = [[0, 46.55429, 48.18937], [0.5, 49.4578, 50.97919], [1.5, 53.55365, 54.9791]];


$('#boyChildChart00').jqChart(
{
title : {
text : ''
},
legend : {
visible : false
},
paletteColors : {
type : 'customColors',
customColors : [ 'blue', 'blue', 'blue', 'blue', 'blue',
'blue', 'blue', 'blue', 'blue', 'red' ]
},
axes : [ {
type : 'age',
location : 'bottom',
minimum : 0,
interval : 3,
maximum : 36,
majorGridLines : {
lineWidth : 2,
strokeStyle : 'blue',
interval : 3
},
minorGridLines : {
lineWidth : 1,
strokeStyle : 'blue',
interval : 0.6
},
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
}, {
type : 'length',
location : 'top',
minimum : 0,
interval : 3,
maximum : 36,
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
}, {
name : 'y1',
location : 'left',
minimum : 30,
interval : 10,
maximum : 120,
majorGridLines : {
lineWidth : 2,
strokeStyle : 'blue',
interval : 10
},
minorGridLines : {
lineWidth : 1,
strokeStyle : 'blue',
interval : 1
},
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
}, {
name : 'y1',
location : 'left',
minimum : 11.81,
interval : 3.93,
maximum : 47.24,
strokeStyle : 'blue',
title : {
text : '',
fillStyle : 'blue'
},
majorGridLines : {
strokeStyle : 'blue',
interval : 3.93
}
}, {
name : 'y1',
location : 'right',
minimum : 30,
interval : 10,
maximum : 120,
strokeStyle : 'blue',
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
majorGridLines : {
strokeStyle : 'blue',
interval : 10
}
}, {
name : 'y1',
location : 'right',
minimum : 11.81,
interval : 3.93,
maximum : 47.24,
strokeStyle : 'blue',
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
majorGridLines : {
strokeStyle : 'blue',
interval : 3.93
}

} ],
series : [ {
type : 'spline',
markers : null,
data : mal1
}, {
type : 'spline',
markers : null,
data : mal2
}, {
type : 'spline',
markers : null,
data : mal3
} ]
});
Back to top
Ivan
#6 Posted : Tuesday, January 22, 2013 6:57:12 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

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

I'm not sure what I should look here.
Best,
Ivan Petrov
jqChart Inc.
Back to top
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.190 seconds.