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
Post a Comment