javascript - React d3 - How to: Several ares on one line chart -

-

i using d3 library in react.js.

i have line chart, divide in 3 different colored areas, shown in picture. example if set treshold of 2000, should painted in green. same goes blue , treshold. once paint hard coded values, need implement slider , bit more dynamic, guess easy soo figure out how implement area coloring.enter image description here

this initial code have:

<div style={{marginleft: '20px', width: (this.state.xwidth + 160)}}>       <loader style={{float: 'left'}} loaded={this.state.loaded}>         <chart width={this.state.xwidth + 160}                height={this.state.height}                data={this.state.parts}                title={this.state.title}                chartseries={this.state.chartseries}                x={this.state.xaxis}                >           <line             chartseries={this.state.chartseries}             />           <area               chartseries = {this.state.redzone}           />          <area               chartseries = {this.state.greenzone}           />          <area               chartseries = {this.state.bluezone}           />           <xaxis/>           <yaxis/>           <xgrid/>           <ygrid/>          </chart>       </loader>     </div>

and preparation:

redzone = [       {         field: 'redzone',         name: 'red zone ',         color: '#005c00',         style: {           "strokewidth": 2,           "strokeopacity": .2,           "fillopacity": .2         }       }     ],   greenzone = [       {         field: 'greenzone',         name: 'green zone ',         color: '#005c00',         style: {           "strokewidth": 2,           "strokeopacity": .2,           "fillopacity": .2         }       }     ],   bluezone = [       {         field: 'bluezone',         name: 'blue zone ',         color: '#005c00',         style: {           "strokewidth": 2,           "strokeopacity": .2,           "fillopacity": .2         }       }     ],

and data:

{     "name": "miss demond weissnat v",     "zonecount": 10000,             "city": "savionberg",             "index": 1 }, {     "name": "easton mante",     "zonecount": 2000,             "city": "kutchberg",             "index": 2 }, ...

i imagine need add properties data model color zone, lost...

after implementing areas, displayed seen in image.enter image description here

but how can make display way top, , there should no gradual decline. should streight line, on previous picture?

the field name in chartseries has have corresponding property in data exact same name(it case sensitive).

your chartseries supposed array of objects this:

    redzone = [{       field: 'redzone',       name: 'red zone ',       color: '#005c00',       style: {         "strokewidth": 2,         "strokeopacity": .2,         "fillopacity": .2       }     }, {       field: 'greenzone',       name: 'green zone ',       color: '#005c00',       style: {         "strokewidth": 2,         "strokeopacity": .2,         "fillopacity": .2       }     }, {       field: 'bluezone',       name: 'blue zone ',       color: '#005c00',       style: {         "strokewidth": 2,         "strokeopacity": .2,         "fillopacity": .2       }     }];

and data should this:

    var data = [{       "name": "miss demond weissnat v",       "zonecount": 10000,       "city": "savionberg",       "index": 1,       "redzone": 10000     }, {       "name": "easton mante",       "zonecount": 2000,       "city": "kutchberg",       "index": 2,       "greenzone": 10000     }, {       "name": "what ever",       "zonecount": 3000,       "city": "wherever",       "index": 3,       "bluezone": 3000     }]

the important thing note name of every field supplied in chartseries has corresponding property same name in data array of objects.


Comments

Post a Comment

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more

delphi - Take screenshot in webcam using VFrames in Console Application -

-
i'm doing program take picture of webcam using delphi xe2 , vframes achieve this, problem have figured out, in graphic application works fine, when use unit in console application, returns me error saying first chance exception @ $76b6b727. exception class eaccessviolation message 'access violation @ address 004a271b in module 'console.exe'. read of address 00000260'. process console.exe (3676) my unit : unit webcam; interface uses sysutils, windows, vcl.imaging.jpeg, vcl.graphics, vsample, vframes, classes; type twebcam = class private procedure newvideoframeevent(sender: tobject; width, height: integer; dataptr: pointer); public constructor create; destructor destroy; override; procedure capture_webcam(take_name: string); end; var web_image: tvideoimage; name_screen: string; implementation constructor twebcam.create; begin inherited create; end; destructor twebcam.destroy; begin inherited destroy; end; ...
Read more