By using d3 js library i make line chart but inside of the line chart data
value is greater then 6000 then i want to line color different vice versa .
please anyone answer then replay ,
below source code :
var data = {
lineChart : [
{
date : '2006-02-22',
label : 'foo',
value : 1800
},
{
date : '2006-11-22',
label : 'bar1',
value : 800
},
{
date : '2007-04-11',
label : 'baz',
value : 3300
},
{
date : '2008-01-24',
label : 'loool2',
value : 3600
},
{
date : '2008-11-24',
label : 'loool2',
value : 4599
},
{
date : '2009-06-24',
label : 'loool',
value : 3800
},
{
date : '2009-12-24',
label : 'loool1',
value : 6400
},
{
date : '2010-12-30',
label : 'YEAH',
value : 5100
},
{
date : '2011-05-15',
label : 'Hurray',
value : 6000
},
{
date : '2012-04-02',
label : 'WTF',
value : 2938
},
{
date : '2013-03-19',
label : 'OMG',
value : 6000
},
{
date : '2013-11-11',
label : 'ROFL',
value : 5400
}
]
};
var DURATION = 1500;
var DELAY = 500;
/**
* draw the fancy line chart
*
* @param {String} elementId elementId
* @param {Array} data data
*/
function drawLineChart( elementId, data ) {
// parse helper functions on top
var parse = d3.time.format( '%Y-%m-%d' ).parse;
// data manipulation first
data = data.map( function( datum ) {
datum.date = parse( datum.date );
return datum;
} );
console.log( data );
// TODO code duplication check how you can avoid that
var containerEl = document.getElementById( elementId ),
width = containerEl.clientWidth,
height = width * 0.229, // modify the height of graph
margin = {
top : 30,
right : 10,
left : 10
},
detailWidth = 98,
detailHeight = 55,
detailMargin = 10,
container = d3.select( containerEl ),
svg = container.select( 'svg' )
.attr( 'width', width )
.attr( 'height', height + margin.top ),
x = d3.time.scale().range( [ 0, width - detailWidth ] ),
xAxis = d3.svg.axis().scale( x )
.ticks ( 4 )
.tickSize( -height ),
xAxisTicks = d3.svg.axis().scale( x )
.ticks( 1 )
.tickSize( -height )
.tickFormat( '' ),
y = d3.scale.linear().range( [ height, 0 ] ),
yAxisTicks = d3.svg.axis().scale( y )
.ticks( 12 )
.tickSize( width )
.tickFormat( '' )
.orient( 'bottom' ),
area = d3.svg.area()
.interpolate( 'linear' )
.x( function( d ) { return x( d.date ) + detailWidth
/ 2; } )
.y0( height )
.y1( function( d ) { return y( d.value ); } ),
line = d3.svg.line()
.interpolate( 'linear' )
.x( function( d ) { return x( d.date ) + detailWidth / 2;
} )
.y( function( d ) { return y( d.value ); } ),
startData = data.map( function( datum ) {
return {
date : datum.date,
value : 0
};
} ),
circleContainer;
// Compute the minimum and maximum date, and the maximum price.
x.domain( [ data[ 0 ].date, data[ data.length - 1 ].date ] );
// hacky hacky hacky :(
y.domain( [ 0, d3.max( data, function( d ) { return d.value; } ) + 700
] );
svg.append( 'g' )
.attr( 'class', 'lineChart--xAxisTicks' )
.attr( 'transform', 'translate(' + detailWidth / 2 + ',' + height +
')' )
.call( xAxisTicks );
// ---------------------------------------
svg.append( 'g' )
.attr( 'class', 'lineChart--yAxisTicks' )
.call( yAxisTicks );
// Add the line path.
svg.append( 'path' )
.datum( startData )
.attr( 'class', 'lineChart--areaLine' )
.attr( 'd', line )
* .attr("stroke", function(d) { // <== Add these
if (d.value >= 6000) {return "#ea8744"} // <== Add
these else { return "white" } // <==
Add these ;}) // But's not working *
.transition()
.duration( DURATION )
.delay( DURATION / 2 )
.attrTween( 'd', tween( data, line ) )
.each( 'end', function() {
drawCircles( data );
} );
// Add the area path.
svg.append( 'path' )
.datum( startData )
.attr( 'class', 'lineChart--area' )
.attr( 'd', area )
.transition()
.duration( DURATION )
.attrTween( 'd', tween( data, area ) );
// Helper functions!!!
function drawCircle( datum, index ) {
circleContainer.datum( datum )
.append( 'circle' )
.attr( 'class', 'lineChart--circle' )
.attr( 'r', 0 )
.style("fill", function(d) { // <== Add these
if (d.value >= 6000) {return "#ea8744"} // <==
Add these
else { return "white" } // <== Add
these
;})
.attr(
'cx',
function( d ) {
return x( d.date ) + detailWidth / 2;
}
)
.attr(
'cy',
function( d ) {
return y( d.value );
}
)
.transition()
.delay( DURATION / 10 * index )
.attr( 'r', 6 );
}
function drawCircles( data ) {
circleContainer = svg.append( 'g' );
data.forEach( function( datum, index ) {
drawCircle( datum, index );
} );
}
function tween( b, callback ) {
return function( a ) {
var i = (function interpolate() {
return function( t ) {
return a.map( function( datum, index ) {
return {
date : datum.date,
value : datum.value + b[ index ].value * t
};
} );
};
})();
return function( t ) {
return callback( i ( t ) );
};
};
}
}
drawLineChart( 'lineChart', data.lineChart );
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
