javascript - Dual Axes with column drill down, Cannot column click -
i have dual axes highchart, wit column drill down , spline, there problem column area below level of spline, nt goes in drill down of column.
$(function() { highcharts.setoptions({ lang: { drilluptext: '<< go {series.name}' } }); highcharts .data({ csv: document.getelementbyid('tsv').innerhtml, itemdelimiter: '\t', parsed: function(columns) { var brands = {}, cpc = {}, brandsdata = [], cpcdata = [], temp = {}, versions = {}, drilldownseries = [], $container = $('#container'), chart = $('container').highcharts(), origchartwidth = 1500, origchartheight = 600, chartwidth = origchartwidth, chartheight = origchartheight; // parse percentage strings columns[1] = $ .map( columns[1], function(value) { if (value.indexof('%') === value.length - 1) { value = parsefloat(value); } return value; }); columns[3] = $ .map( columns[3], function(value) { if (value.indexof('*') === value.length - 1) { value = parsefloat(value); } return value; }); columns[4] = $ .map( columns[4], function(value) { if (value.indexof('*') === value.length - 1) { value = parsefloat(value); } return value; }); columns[5] = $ .map( columns[5], function(value) { if (value.indexof('*') === value.length - 1) { value = value.split('*')[0]; } return value; }); columns[2] = $ .map( columns[2], function(value) { if (value.indexof('*') === value.length - 1) { value = parsefloat(value); } return value; }); $ .each( columns[0], function(i, name) { var brand, version; if (i > 0) { // remove special edition notes name = name.split('@@'); // split brand , version version = name[1]; brand = name[0]; // create main data if (!brands[brand]) { temp[brand] = (columns[3][i]); brands[brand] = temp[brand] + "@@" + columns[2][i] + "@@" + columns[5][i]; } else { temp[brand] = (columns[3][i]); brands[brand] = temp[brand] + "@@" + columns[2][i] + "@@" + columns[5][i]; } // create version data if (version !== null) { if (!versions[brand]) { versions[brand] = []; } if (version == 1) { versions[brand] .push([ 'jan-' + columns[4][i], columns[1][i] ]); } else if (version == 2) { versions[brand] .push([ 'feb-' + columns[4][i], columns[1][i] ]); } else if (version == 3) { versions[brand] .push([ 'mar-' + columns[4][i], columns[1][i] ]); } else if (version == 4) { versions[brand] .push([ 'apr-' + columns[4][i], columns[1][i] ]); } else if (version == 5) { versions[brand] .push([ 'may-' + columns[4][i], columns[1][i] ]); } else if (version == 6) { versions[brand] .push([ 'jun-' + columns[4][i], columns[1][i] ]); } else if (version == 7) { versions[brand] .push([ 'jul-' + columns[4][i], columns[1][i] ]); } else if (version == 8) { versions[brand] .push([ 'aug-' + columns[4][i], columns[1][i] ]); } else if (version == 9) { versions[brand] .push([ 'sep-' + columns[4][i], columns[1][i] ]); } else if (version == 10) { versions[brand] .push([ 'oct-' + columns[4][i], columns[1][i] ]); } else if (version == 11) { versions[brand] .push([ 'nov-' + columns[4][i], columns[1][i] ]); } else if (version == 12) { versions[brand] .push([ 'dec-' + columns[4][i], columns[1][i] ]); } else { versions[brand] .push([ 'others', columns[1][i] ]); } } } }); $.each(brands, function(name, y) { var data = y; var arr = data.split('@@'); brandsdata.push({ name: name, p: name, datalabels: { enabled: true, align: 'center', style: { fontweight: 'bold' } }, y: parseint(arr[0]), z: parseint(arr[1]), a: arr[2], drilldown: versions[name] ? name : null }); }); $.each(brands, function(name, y) { var data = y; var arr = data.split('@@'); cpcdata.push({ name: name, a: arr[2], p: name, y: parseint(arr[1]), z: parseint(arr[0]), }); }); $.each(versions, function(key, value) { drilldownseries.push({ name: key, id: key, data: value, }); }); // create chart $container .highcharts({ chart: { type: 'column' }, title: { text: 'suggested keywords' }, subtitle: { text: 'click columns view monthly searches. source: google adwords.' }, xaxis: { type: 'category' }, yaxis: [{ // primary yaxis labels: { format: '{value} rs', style: { color: 'green' } }, title: { text: 'cpc', style: { color: 'green' } } }, { // secondary yaxis type: 'logarithmic', minortickinterval: 0.01, title: { text: 'search volume', style: { color: '#00557f' } }, labels: { format: '{value}', style: { color: '#00557f' } }, opposite: false }], plotoptions: { series: { borderwidth: 0, datalabels: { enabled: true, format: '{point.y:.0f}', color: '{series.color}', rotation: -45, y: -10 } } } , tooltip: { shared: true, headerformat: '', pointformat: '<span style="color:red;font-size:15px">{point.name}</span>: {series.name}:-<b style="font-size:15px;color:{point.color}">{point.y:.0f} <div style="color:black">{point.a}</div></b><br/>', }, series: [{ name: 'cpc', colorbypoint: false, color: 'green', type: 'spline', marker: { symbol: 'circle', color: 'red' }, tooltip: { valuesuffix: '' }, data: cpcdata }, { name: 'search volume', yaxis: 1, colorbypoint: false, color: '#00557f', tooltip: { valuesuffix: 'rs' }, data: brandsdata }], drilldown: { drillupbutton: { relativeto: 'spacingbox', position: { align: 'left', x: 30 } }, series: drilldownseries } }); chart = $container.highcharts(); $('<button>+</button>').insertbefore($container).click(function() { chartwidth *= 1.1; chartheight *= 1.1; chart.setsize(chartwidth, chartheight); }); $('<button>-</button>').insertbefore($container).click(function() { chartwidth *= 0.9; chartheight *= 0.9; chart.setsize(chartwidth, chartheight); }); $('<button>default</button>').insertbefore($container).click(function() { chartwidth = origchartwidth; chartheight = origchartheight; chart.setsize(origchartwidth, origchartheight); }); } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/data.js"></script> <script src="http://code.highcharts.com/modules/drilldown.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <!-- data www.netmarketshare.com. select browsers => desktop share version. download tsv. --> <pre id="tsv" style="display:none">browser version total market share month search volume year competition samsung note 4@@2.0 90500% 9.6* 74000* 2015* high* samsung note 4@@1.0 110000% 9.6* 74000* 2015* high* samsung note 4@@12.0 135000% 9.6* 74000* 2014* high* samsung note 4@@11.0 165000% 9.6* 74000* 2014* high* samsung note 4@@10.0 165000% 9.6* 74000* 2014* high* samsung note 4@@9.0 135000% 9.6* 74000* 2014* high* samsung note 4@@8.0 49500% 9.6* 74000* 2014* high* samsung note 4@@7.0 22200% 9.6* 74000* 2014* high* samsung note 4@@6.0 14800% 9.6* 74000* 2014* high* samsung note 4@@5.0 9900% 9.6* 74000* 2014* high* samsung note 4@@4.0 8100% 9.6* 74000* 2014* high* samsung note 4@@3.0 5400% 9.6* 74000* 2014* high* samsung note 4 price@@2.0 8100% 8.7* 9900* 2015* high* samsung note 4 price@@1.0 12100% 8.7* 9900* 2015* high* samsung note 4 price@@12.0 14800% 8.7* 9900* 2014* high* samsung note 4 price@@11.0 18100% 8.7* 9900* 2014* high* samsung note 4 price@@10.0 27100% 8.7* 9900* 2014* high* samsung note 4 price@@9.0 27100% 8.7* 9900* 2014* high* samsung note 4 price@@8.0 5400% 8.7* 9900* 2014* high* samsung note 4 price@@7.0 2400% 8.7* 9900* 2014* high* samsung note 4 price@@6.0 1900% 8.7* 9900* 2014* high* samsung note 4 price@@5.0 1300% 8.7* 9900* 2014* high* samsung note 4 price@@4.0 1000% 8.7* 9900* 2014* high* samsung note 4 price@@3.0 720% 8.7* 9900* 2014* high* price of samsung note 4@@2.0 880% 14.9* 720* 2015* medium* price of samsung note 4@@1.0 1000% 14.9* 720* 2015* medium* price of samsung note 4@@12.0 1300% 14.9* 720* 2014* medium* price of samsung note 4@@11.0 1900% 14.9* 720* 2014* medium* price of samsung note 4@@10.0 1600% 14.9* 720* 2014* medium* price of samsung note 4@@9.0 1000% 14.9* 720* 2014* medium* price of samsung note 4@@8.0 170% 14.9* 720* 2014* medium* price of samsung note 4@@7.0 90% 14.9* 720* 2014* medium* price of samsung note 4@@6.0 70% 14.9* 720* 2014* medium* price of samsung note 4@@5.0 40% 14.9* 720* 2014* medium* price of samsung note 4@@4.0 40% 14.9* 720* 2014* medium* price of samsung note 4@@3.0 40% 14.9* 720* 2014* medium* samsung note 4 specification@@2.0 2400% 10.0* 2400* 2015* low* samsung note 4 specification@@1.0 2900% 10.0* 2400* 2015* low* samsung note 4 specification@@12.0 3600% 10.0* 2400* 2014* low* samsung note 4 specification@@11.0 4400% 10.0* 2400* 2014* low* samsung note 4 specification@@10.0 5400% 10.0* 2400* 2014* low* samsung note 4 specification@@9.0 5400% 10.0* 2400* 2014* low* samsung note 4 specification@@8.0 1600% 10.0* 2400* 2014* low* samsung note 4 specification@@7.0 1000% 10.0* 2400* 2014* low* samsung note 4 specification@@6.0 2400% 10.0* 2400* 2014* low* samsung note 4 specification@@5.0 1600% 10.0* 2400* 2014* low* samsung note 4 specification@@4.0 720% 10.0* 2400* 2014* low* samsung note 4 specification@@3.0 480% 10.0* 2400* 2014* low* samsung note 4 india@@2.0 260% 5.3* 590* 2015* high* samsung note 4 india@@1.0 320% 5.3* 590* 2015* high* samsung note 4 india@@12.0 590% 5.3* 590* 2014* high* samsung note 4 india@@11.0 880% 5.3* 590* 2014* high* samsung note 4 india@@10.0 3600% 5.3* 590* 2014* high* samsung note 4 india@@9.0 1600% 5.3* 590* 2014* high* samsung note 4 india@@8.0 90% 5.3* 590* 2014* high* samsung note 4 india@@7.0 0% 5.3* 590* 2014* high* samsung note 4 india@@6.0 0% 5.3* 590* 2014* high* samsung note 4 india@@5.0 0% 5.3* 590* 2014* high* samsung note 4 india@@4.0 0% 5.3* 590* 2014* high* samsung note 4 india@@3.0 0% 5.3* 590* 2014* high* samsung note 4 price in india@@2.0 22200% 9.5* 18100* 2015* medium* samsung note 4 price in india@@1.0 27100% 9.5* 18100* 2015* medium* samsung note 4 price in india@@12.0 33100% 9.5* 18100* 2014* medium* samsung note 4 price in india@@11.0 33100% 9.5* 18100* 2014* medium* samsung note 4 price in india@@10.0 40500% 9.5* 18100* 2014* medium* samsung note 4 price in india@@9.0 33100% 9.5* 18100* 2014* medium* samsung note 4 price in india@@8.0 9900% 9.5* 18100* 2014* medium* samsung note 4 price in india@@7.0 4400% 9.5* 18100* 2014* medium* samsung note 4 price in india@@6.0 1900% 9.5* 18100* 2014* medium* samsung note 4 price in india@@5.0 1000% 9.5* 18100* 2014* medium* samsung note 4 price in india@@4.0 1000% 9.5* 18100* 2014* medium* samsung note 4 price in india@@3.0 1300% 9.5* 18100* 2014* medium* samsung note 4 mobile@@2.0 390% 14.4* 390* 2015* medium* samsung note 4 mobile@@1.0 590% 14.4* 390* 2015* medium* samsung note 4 mobile@@12.0 590% 14.4* 390* 2014* medium* samsung note 4 mobile@@11.0 720% 14.4* 390* 2014* medium* samsung note 4 mobile@@10.0 880% 14.4* 390* 2014* medium* samsung note 4 mobile@@9.0 1000% 14.4* 390* 2014* medium* samsung note 4 mobile@@8.0 320% 14.4* 390* 2014* medium* samsung note 4 mobile@@7.0 170% 14.4* 390* 2014* medium* samsung note 4 mobile@@6.0 110% 14.4* 390* 2014* medium* samsung note 4 mobile@@5.0 70% 14.4* 390* 2014* medium* samsung note 4 mobile@@4.0 70% 14.4* 390* 2014* medium* samsung note 4 mobile@@3.0 70% 14.4* 390* 2014* medium* price of samsung note 4 in india@@2.0 590% 14.2* 720* 2015* medium* price of samsung note 4 in india@@1.0 880% 14.2* 720* 2015* medium* price of samsung note 4 in india@@12.0 1600% 14.2* 720* 2014* medium* price of samsung note 4 in india@@11.0 1600% 14.2* 720* 2014* medium* price of samsung note 4 in india@@10.0 1900% 14.2* 720* 2014* medium* price of samsung note 4 in india@@9.0 1600% 14.2* 720* 2014* medium* price of samsung note 4 in india@@8.0 170% 14.2* 720* 2014* medium* price of samsung note 4 in india@@7.0 70% 14.2* 720* 2014* medium* price of samsung note 4 in india@@6.0 70% 14.2* 720* 2014* medium* price of samsung note 4 in india@@5.0 40% 14.2* 720* 2014* medium* price of samsung note 4 in india@@4.0 30% 14.2* 720* 2014* medium* price of samsung note 4 in india@@3.0 0% 14.2* 720* 2014* medium* samsung note 4 in india@@2.0 90% 8.7* 320* 2015* high* samsung note 4 in india@@1.0 140% 8.7* 320* 2015* high* samsung note 4 in india@@12.0 210% 8.7* 320* 2014* high* samsung note 4 in india@@11.0 260% 8.7* 320* 2014* high* samsung note 4 in india@@10.0 1600% 8.7* 320* 2014* high* samsung note 4 in india@@9.0 1000% 8.7* 320* 2014* high* samsung note 4 in india@@8.0 140% 8.7* 320* 2014* high* samsung note 4 in india@@7.0 50% 8.7* 320* 2014* high* samsung note 4 in india@@6.0 50% 8.7* 320* 2014* high* samsung note 4 in india@@5.0 20% 8.7* 320* 2014* high* samsung note 4 in india@@4.0 20% 8.7* 320* 2014* high* samsung note 4 in india@@3.0 10% 8.7* 320* 2014* high* samsung note 4 gsmarena@@2.0 260% 47.1* 390* 2015* low* samsung note 4 gsmarena@@1.0 320% 47.1* 390* 2015* low* samsung note 4 gsmarena@@12.0 390% 47.1* 390* 2014* low* samsung note 4 gsmarena@@11.0 480% 47.1* 390* 2014* low* samsung note 4 gsmarena@@10.0 720% 47.1* 390* 2014* low* samsung note 4 gsmarena@@9.0 1000% 47.1* 390* 2014* low* samsung note 4 gsmarena@@8.0 720% 47.1* 390* 2014* low* samsung note 4 gsmarena@@7.0 320% 47.1* 390* 2014* low* samsung note 4 gsmarena@@6.0 210% 47.1* 390* 2014* low* samsung note 4 gsmarena@@5.0 70% 47.1* 390* 2014* low* samsung note 4 gsmarena@@4.0 50% 47.1* 390* 2014* low* samsung note 4 gsmarena@@3.0 20% 47.1* 390* 2014* low* samsung note 4 price@@2.0 50% 5.0* 40* 2015* high* samsung note 4 price@@1.0 70% 5.0* 40* 2015* high* samsung note 4 price@@12.0 110% 5.0* 40* 2014* high* samsung note 4 price@@11.0 90% 5.0* 40* 2014* high* samsung note 4 price@@10.0 70% 5.0* 40* 2014* high* samsung note 4 price@@9.0 50% 5.0* 40* 2014* high* samsung note 4 price@@8.0 20% 5.0* 40* 2014* high* samsung note 4 price@@7.0 0% 5.0* 40* 2014* high* samsung note 4 price@@6.0 0% 5.0* 40* 2014* high* samsung note 4 price@@5.0 0% 5.0* 40* 2014* high* samsung note 4 price@@4.0 0% 5.0* 40* 2014* high* samsung note 4 price@@3.0 0% 5.0* 40* 2014* high* </pre>click part below spline wont work. help!!
Comments
Post a Comment