D3 LIne Chart
78 views
Skip to first unread message
Arvind Chourasiya
Mar 31, 2014, 1:29:15 AM3/31/14
to google-visua...@googlegroups.com
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 );
Sergey Grabkovsky
Mar 31, 2014, 9:36:25 AM3/31/14
to google-visua...@googlegroups.com
Hi, this is the forum for Google Charts, which D3 is not a part of. We have our own line chart that you can use, and will try our best to help you customize it to fit your needs. There is a Google Group for D3 as well.
- Sergey
--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
Arvind Chourasiya
Apr 1, 2014, 6:03:48 AM4/1/14
to google-visua...@googlegroups.com
thanks
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/9rECY10vVgE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
--
Reply all
Reply to author
Forward
0 new messages