jquery - how to add both barchart and line graph in single chart -

-

hi trying attain both bar , line graph in 1 chart able show bar graph(multiple vertical bars), need show line graphs

 $("#chart1").html("");  var xlabel = 'areas';  var ylabel = 'numbers';  var yinterval='';  var yinterval='';   var s1 = [20, 60, 70, 100];         var s2 = [70, 50, 30, 20];         var s3 = [10, 50, 30, 20];         var ticks = ['na','apac', 'eu','latam'];         var yinterval=120;         var count=120;      $.jqplot('chart1', [s1, s2, s3], {                             seriescolors:['#5882fa', '#df7401', '#a4a4a4'],                             seriesdefaults: {                                 renderer:$.jqplot.barrenderer,                                 pointlabels: { show: true },                                 rendereroptions: {                                         barwidth: 25,                                         bardirection: 'vertical',                                         barpadding: 0,                                         filltozero: true,                                         shadowoffset: 0,                                         shadowdepth: 0                                     }                             },                             axes: {                                 xaxis: {                                     label: xlabel,                                     renderer: $.jqplot.categoryaxisrenderer,                                     ticks: ticks                                 },                                 yaxis: {                                   label: ylabel                                 }                             },                         });

i trying attain below chart

enter image description here

if define 2 additional series 2 line graphs:

 // series line graphs  var s4 = [46, 38, 48, 47];  var s5 = [33, 23, 38, 11];

and ensure these passed in parameters in addition s1, s2 , s3:

$.jqplot('graph_stacked', [s1, s2, s3, s4, s5], {

then add series object defines renderers want use each of series. here first 3 use barrenderer , last 2 use linerenderer:

series: [{          label: 'total number of distributors',          renderer: $.jqplot.barrenderer      }, {          label: 'number of distributors @ least 1 registered user',          renderer: $.jqplot.barrenderer      }, {          label: 'number of active distributors',          renderer: $.jqplot.barrenderer      }, {          label: 'cmh coverage %',          renderer: $.jqplot.linerenderer      }, {          label: 'distributor utilization rate',          renderer: $.jqplot.linerenderer      }]

then add additional colours 2 new line graphs:

seriescolors: ['#5882fa', '#df7401', '#a4a4a4', '#ff00ff', '#00ffff'],

please see here demo.

edit: update query regarding y2axis:

define y2axis alongside existing yaxis. ensure showgridline set false uses same grid yaxis:

 y2axis:{      label: y2label,      min:0,      max:120,      tickoptions:{showgridline:false}  }

then modify each series use relevant yaxis renderer. in case bar charts use yaxis , line charts use y2axis:

series: [{     label: 'total number of distributors',     renderer: $.jqplot.barrenderer,     yaxis: 'yaxis'  },  ...   {      label: 'distributor utilization rate',      renderer: $.jqplot.linerenderer,      yaxis: 'y2axis' }]

see here demo.


Comments

Post a Comment

Popular posts from this blog

javascript - Slick Slider width recalculation -

-
i'm trying add slide in panel on slick container css. carousel works except new width not being calculated when space has been added. recalibrate once advance next slide i'd happen each time panel opened or closed. i've tried adding both margin , padding, neither makes difference. ideas? https://jsfiddle.net/mhigley/dpf7mlpl/ html: <button type="button" id="button"><i class="fa fa-arrow-right"></i></button> <aside> <h2>slide in panel</h2> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </aside> <main role="main"> <div class="sections"> <section> <article> <h2>first slide</h2> <p>lorem ipsum d...
Read more

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

-
looking through primefaces code in app noticed following line: <f:facet name="header">#{trainsearch.traincount} trains</f:facet> it looks overriding header, makes sense, can explain me in little more detail? what happening line of code? complete code listed below: <p:datatable id = "results" value = "#{trainsearch.trains}" var = "train" rendered="#{not empty trainsearch.trains}" styleclass = "train-search-table horizontal-border"> <f:facet name="header">#{trainsearch.traincount} trains</f:facet> <p:column headertext = "train id"> <p:panelgrid columns="1" styleclass = "train-id-grid" layout = "grid"> <h:outputtext styleclass = "train-id-label" value="#{train.traini}"/> <h:outputtex...
Read more

angular2 services - Angular 2 RC 4 Http post not firing -

-
i trying fire post request app , it's not working, tried multiple ways. don't see request being fired under network tab in chrome. not sure problem is, appreciated. import { injectable } '@angular/core'; import { http, headers } '@angular/http'; @injectable() export class userservice{ private _url="users"; constructor(private _http: http){ } checkifusernameexists(username){ return this._http.get(this._url+"/"+username) .map(response => response.json()) } createuser(user){ let headers = new headers(); headers.append('content-type', 'application/json') console.log(json.stringify(user)); return this._http.post(this._url, json.stringify(user),{headers: headers}) .map(response => response.json()) } } first need capture error , solve error: this._http.post(this._url, json.stringify(user),{headers: headers}) .subscribe( ...
Read more