javascript - Data and tooltip not working for graph using highcharts -


i trying basic column chart working trend maphours(y-axis), reducehours(y-axis) particular job(tooltip) on particular day(x-axis).

i populating data array y-axis values , jobname value want show in tooltip. x-axis value datestamp(a daily value i.e 1 date throughout x-axis).

problem - graph container getting initiated not picking y-axis values , tooltip.

the code populating arrays -

            var obj = data;             var jobsummarymapperspt = [];             var jobsummaryreducerspt = [];             var jobsummarymappersdb = [];             var jobsummaryreducersdb = [];             var datestamp = [];              for(i=0;i<obj.length-1;i++){                    if(obj[i].grid=='pt'){                           jobsummarymapperspt.push({mappers: obj[i].maphours, jobname: obj[i].jobname}); // filling of array after ajax call                           jobsummaryreducerspt.push({reducers: obj[i].reducehours, jobname: obj[i].jobname}); //filling of array                           datestamp.push(obj[i].date.replace('t00:00:00.000z', ' '));                   }else{                            jobsummarymappersdb.push({mappers: obj[i].maphours, jobname: obj[i].jobname}); // filling of array after ajax call                           jobsummaryreducersdb.push({reducers: obj[i].reducehours, jobname: obj[i].jobname}); //filling of array                    }             }             job_summary_chart(jobsummarymapperspt, jobsummaryreducerspt, jobsummarymappersdb, jobsummaryreducersdb, datestamp); 

the function initiating highcharts -

 function job_summary_chart(jobsummarymapperspt, jobsummaryreducerspt, jobsummarymappersdb, jobsummaryreducersdb, datestamp){     $(function () {     $('#job_summary_pt').highcharts({      // other highchart properties      chart: {                                               type: 'column'                                               },                                               title: {                             text: 'job summary',                                   x: -20 //center                             },                             subtitle: {                                 text: 'source: dftba',                                 x: -20                             },                             xaxis: {                               categories: datestamp,                               labels: {                                       rotation: -45,                                       y: 30,                                       align: 'center',                                       step: 4                               }                             },                             yaxis: {                                 title: {                                       text: 'gbhrs'                                 },                                 plotlines: [{                                       value: 0,                                       width: 1,                                       color: '#808080'                                 }]                                },                              tooltip: {                                 valuesuffix: ' gbhrs',                                 formatter: function() { return ' ' +                                     'jobname: ' + this.point.jobname + '<br />'                                 }                              },                             legend: {                                 layout: 'vertical',                                 align: 'right',                                 verticalalign: 'middle',                                 borderwidth: 0                               },                             series: [{                                data: jobsummarymapperspt                             },{                                data: jobsummaryreducerspt                             }]                         });  

i did console.log on jobsummarymapperspt , values follows:

 [object { mappers=97, jobname="abcd.pig"},       object { mappers=33, jobname="abcd.pig"},                object { mappers=31, jobname="abcd.pig"},       object { mappers=15, jobname="abcd.pig"},       object { mappers=15, jobname="abcd.pig"},       object { mappers=12, jobname="abcd.pig"}] 

i think issue "=" sign after mappers , jobname. in data property, accepts colons = ":" , thats why graph not picking values?

how fix graph working? , tooltip show jobname?

if understand correctly, problem not tooltip, chart not render data. set mappers , reducers property names of y value, how can highcharts know properties should pick y values?

changing properties mappers , reducers y should make work:

jobsummarymapperspt.push({y: obj[i].maphours, jobname: obj[i].jobname}); // filling of array after ajax call jobsummaryreducerspt.push({y: obj[i].reducehours, jobname: obj[i].jobname}); //filling of array 

the code tooltip looks fine me.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

jsf - How to ajax update an item in the footer of a PrimeFaces dataTable? -

django - CSRF verification failed. Request aborted. CSRF cookie not set -