javascript - Draw a chart using highchart.js -


i new data visulizations. having requirement draw chart similar below using highchart.js enter image description here

see jsfiddle: http://jsfiddle.net/rgpz2ru5/22/ tried far. able draw chart facing issue while drawing lines between datalabel , point (just shown in above image)? can please help?

see below code draw chart:

 $('#container').highcharts({     chart: {       type: 'scatter',     },     xaxis: {       visible: false     },     yaxis: {       title: {         text: ''       },       labels: {         formatter: function() {           return null         }       }     },     plotoptions: {       series: {         datalabels: {           enabled: true,           inside: false,             formatter: function(){             console.log("x"+this.x)             console.log("this.x%2"+this.x%2)           if(this.x%2 == 0){           console.log("in if")           return "<div style='position: relative;height:70px; border-left:solid thin #ff0000;margin-left:10px'><span style='position: absolute;bottom: 0;right: 0;'>hello</span></div>";           }else{           console.log("in else")           return "<span style='color:black'>"+this.key+"</span><div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/>";           }           },           usehtml:true          }       },scatter: {                 marker: {                     radius: 5,                     states: {                         hover: {                             enabled: false,                             linecolor: "#ffb74d"                         }                     }                 },                 states: {                     hover: {                         marker: {                             enabled: false                         }                     }                 },                 tooltip: {                     headerformat: '<b>{series.name}</b><br>',                     pointformat: '{point.x} cm, {point.y} kg'                 }             }     },      series: [{       data: [{         x: 1,         y: 1,          datalabels: {           y: -80          },         marker: {           radius: 3         },         name: 'sds',         color: "#ffb74d"       }, {         x: 2,         y: 1,          datalabels: {           y: 80         },         marker: {           radius: 5         },         name: 'mip',         color:"#ffe0b2"       }, {         x: 3,         y: 1,          datalabels: {           y: -80,           distance : 50,                     softconnector : false,                     connectorcolor : '#d0d0d0',         },         marker: {           radius: 7         },         name: 'mdp',         color:"#ff9800"       },{         x: 4,         y: 1,          datalabels: {           y: 80         },         marker: {           radius: 9         },         name: 'rad',         color:"#ffb74d"       },{         x: 5,         y: 1,          datalabels: {           y: -80         },         marker: {           radius: 3         },         name: 'sds',         color: "#ffb74d"       }, {         x: 6,         y: 1,          datalabels: {           y: 80         },         marker: {           radius: 5         },         name: 'mip',         color:"#ffe0b2"       }, {         x: 7,         y: 1,          datalabels: {           y: -80         },         marker: {           radius: 7         },         name: 'mdp',         color:"#ff9800"       },{         x: 8,         y: 1,          datalabels: {           y: 80         },         marker: {           radius: 9         },         name: 'rad',         color:"#ffb74d"       },{         x: 9,         y: 1,          datalabels: {           y: -80         },         marker: {           radius: 3         },         name: 'sds',         color: "#ffb74d"       }, {         x: 10,         y: 1,          datalabels: {           y: 80         },         marker: {           radius: 5         },         name: 'mip',         color:"#ffe0b2"       }, {         x: 11,         y: 1,          datalabels: {           y: -80         },         marker: {           radius: 7         },         name: 'mdp',         color:"#ff9800"       },{         x: 12,         y: 1,          datalabels: {           y: 80         },         marker: {           radius: 9         },         name: 'rad',         color:"#ffb74d"       }]     }]    });

can please help?

to make similar chart can use bubble chart: http://jsfiddle.net/rgpz2ru5/

or standard scatter chart: http://jsfiddle.net/rgpz2ru5/1/

you can change marker size of scatter using marker.radius parameter: 

    marker: {       radius: 5,       states: {         hover: {           linecolor: "#ffb74d"         }       }     },

you can add labels using chart.renderer.path , chart.renderer.label: http://api.highcharts.com/highcharts/renderer.path http://api.highcharts.com/highcharts/renderer.label

  var drawlabels = function(chart) {     $('.clabels').remove();     var series = chart.series,       renderer = chart.renderer,       plottop = chart.plottop,       plotleft = chart.plotleft;     highcharts.each(series, function(s) {       highcharts.each(s.data, function(p) {         renderer.path(['m', p.plotx + plotleft, p.ploty + plottop, 'l', p.plotx + plotleft, p.ploty + plottop - 30]).attr({           stroke: 'black',           'stroke-width': 1         }).addclass('clabels').add();         renderer.label(p.name, p.plotx + plotleft, p.ploty + plottop - 50).attr({           'text-anchor': 'middle',           padding: 0         }).addclass('clabels').add();       });     });   }

here can see example how can work: http://jsfiddle.net/rgpz2ru5/29/


-

Comments

Post a Comment

Popular posts from this blog

delphi - Disable and change color of node in Treeview -

Image
i looking way of disabling proper nodes . let's have created simple treeview structure below: parent 1 (disable) parent 2 child 1 child 2 (disable) so far have found workaround how that, still doesn't work @ all. use onchanging event handler: procedure tform1.treeviewchanging(sender: tobject; node: ttreenode; var allowchange: boolean); begin if (node.text = 'parent 1') or (node.text = 'child 1') allowchange := false; end; it works, because can't click on node, issue after 'disabling' node way, color of parent 1 , child 1 nodes same other. way change color of nodes (grey)? or maybe know way disabling nodes in ttreeview component? to disable node, set enabled property false . disabled item displayed in gray color. to change normal color of nodes text, change ttreeview.font.color . to change color of disabled nodes text, use oncustomdrawitem event: procedure tform2.treeview1customdrawitem(sender: tcu...
Read more

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

elasticsearch python client - work with many nodes - how to work with sniffer -

i have 1 cluster 2 nodes. i trying understand best practise connect nodes, , check failover when there downtime on 1 node. from documentation : es = elasticsearch( ['esnode1', 'esnode2'], # sniff before doing sniff_on_start=true, # refresh nodes after node fails respond sniff_on_connection_fail=true, # , every 60 seconds sniffer_timeout=60 ) so tried connect nodes this: client = elasticsearch([ip1, ip2],sniff_on_start=true, sniffer_timeout=10,sniff_on_connection_fail=true) where ip1/ip2 machine ip's (for example 10.0.0.1, 10.0.0.2) in order test it, terminated ip2 (or put non existent if) now, when trying connect, get: transporterror: transporterror(n/a, 'unable sniff hosts - no viable hosts found.') even ip1 exist , up. if trying connect this: es = elasticsearch([ip1, ip2]) then can see in log if client not getting response ip2, move ip1, , return valid response. so missing here something? thought s...
Read more