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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -