javascript - Highcharts tooltip not displaying corrosponding text value, instead displaying 'undefined' -
i have list of text values corresponding score values (value x , value y). able plot dot @ intersection of value x , value y. hovering on dot displays location value of dot on x,y coordinates corresponding text value displaying unidentified.
<script> var array = @html.raw(json.encode(viewbag.items3dlist)); var practicalityscore = []; for(var in array){ var serie = new array(array[i].yaxis, array[i].avgipa, array[i].title); practicalityscore.push(serie); } $(function () { var chart = new highcharts.chart({ chart: { renderto: 'practicalityscore', zoomtype: 'xy', defaultseriestype:'scatter', borderwidth:1, bordercolor:'#fff', marginleft:50, marginright:50, backgroundcolor:'#fff', plotbackgroundcolor:'#fff', }, credits:{enabled:false}, title:{ text:'most practical ideas', align: 'left', }, legend:{ enabled:false }, tooltip:{ crosshairs: [{ enabled:true, width:1, color:'rgba(238,46,47,.25)' },{ enabled:true, width:1, color:'rgba(238,46,47,.25)' }], formatter: function(){ return '<span><b>practicality</b>: '+ highcharts.numberformat(this.x,0) + '<br/><span><b>avg ipa</b>: '+ highcharts.numberformat(this.y,0) + '<br/><span><b>idea</b>: '+ this.point.name; } }, plotoptions: { series: { color:'#0093dd', marker: { fillopacity:1, radius:7, linewidth:.5, linecolor:'#fff', }, } }, xaxis:{ title:{ text:'practicality score' }, min:0, max:10, tickinterval:1, ticklength:0, minorticklength:0, gridlinewidth:0, showlastlabel:true, showfirstlabel:false, linecolor:'#fff', linewidth:0 }, yaxis:{ title:{ text:'avgipa', rotation:-90, margin:10, }, min:0, max:10, tickinterval:1, ticklength:0, minorticklength:0, linecolor:'#fff', linewidth:0 }, series: [{ color:'rgba(238,46,47,.5)', data: practicalityscore, }] }, function(chart) { // on complete var width = chart.plotbox.width / 2.0; var height = chart.plotbox.height / 2.0 + 1; chart.renderer.rect(chart.plotbox.x, chart.plotbox.y, width, height, 1) .attr({ fill: '#fff', 'stroke-width': 4, stroke: '#fff', zindex: 1 }) .add(); chart.renderer.rect(chart.plotbox.x + width, chart.plotbox.y, width, height, 1) .attr({ fill: '#fff', 'stroke-width': 4, stroke: '#fff', zindex: 1 }) .add(); chart.renderer.rect(chart.plotbox.x, chart.plotbox.y + height, width, height, 1) .attr({ fill: '#fff', 'stroke-width': 4, stroke: '#fff', zindex: 1 }) .add(); chart.renderer.rect(chart.plotbox.x + width, chart.plotbox.y + height, width, height, 1) .attr({ fill: '#fff', 'stroke-width': 4, stroke: '#fff', zindex: 1 }) .add(); }); }); </script> here json representation of array object received server side code.
array[1] object{ avgipa:7, ideaid:17989, likes:3, status:2, statusstring:"published", title:"spread word", userfullname:"anurag acharya", xaxis:9, yaxis:5, zaxis:7} now send relevant data series practicalityscore array. here representation of data.
practicalityscore [1] [5, 7, "spread word"] here screenshot of how browser displaying data on chart
instead of undefined, "spread word" should displayed.
you may try modify formatter following , change this.point.name this.point.series.name
function(){ return '<span><b>practicality</b>: '+ highcharts.numberformat(this.x,0) + '<br/><span><b>avg ipa</b>: '+ highcharts.numberformat(this.y,0) + '<br/><span><b>idea</b>: '+ this.point.series.name; } not sure if understand objective correctly, hope help
i tried create similar jsfiddle example base on understand
Comments
Post a Comment