thanks
On Mon, Mar 31, 2014 at 7:06 PM, Sergey Grabkovsky <[email protected]>wrote: > Hi, this is the forum for Google Charts<https://developers.google.com/chart/>, > which D3 is not a part of. We have our own line > chart<https://developers.google.com/chart/interactive/docs/gallery/linechart>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<https://groups.google.com/forum/#!forum/d3-js>as well. > > - Sergey > > > On Mon, Mar 31, 2014 at 1:29 AM, Arvind Chourasiya <[email protected]>wrote: > >> >> >> 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. >> > > -- > 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 > [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. > -- Thanks and Regards, Arvind Chourasiya -- 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.
