javascript - Draw a chart using highchart.js -
i new data visulizations. having requirement draw chart similar below using highchart.js 
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