Modifying CreditKarma for Verbose Charts: A tale of click-through frustrations.
I really, really dislike clicking on data points to see the details. I look at it and think, "the data's there, why won't they just show it to me?". So I found it, and took a peek, and despite the 'not-true-fico' nature of the scores, it's a ton more fun for me to look at all my history at once than a general overview based on the final score that month.
So, CreditKarma's a guilty pleasure of yours too and you want in on the action:
1. Load CreditKarma's scores page.
2. Right-Click, "Inspect Element", click on the "Console" tab.
3. If you're so inclined, compare the script below to lines 303-312 of the myfinances script from edgecastcdn and notice that the only change is the complete replacement of the variable 'g' with 'm'.
4. Copy this:
(function(a){a.fn.ckScoreHistory=function(b,c){var d=this.get(0),f=a(this).data("yaxismin")||null,e=a(this).data("yaxismax")||null,m=a(this).data("value"),j=a(this).data("scoretype"),q=[];if(!d)return!1;var n=CK.App.Common.Charts.ScoreHistory.defaultSettings(m),r=10*Math.floor(n.seriesMin/10),u=10*Math.ceil(n.seriesMax/10),r=r-10>=f?r-10:r,u=u+10<=e?u+10:u,A=u-r,x=A>n.pointDiffThreshold/2?20:40>=A?5:10,v=x*n.numTicks,E=r+v<=e,y=E&&r+v<=n.seriesMax&&r-x>=f,f=u-v>=f&&u-v>=n.seriesMin&&u+x<=e;if(A<=n.pointDiffThreshold)if(E){j=y?r-x:r;for(r=0;r<n.numTicks;r+=1)q.push(j),j+=x}else{j=f?u+x:u;for(r=0;r<n.numTicks;r+=1)q.push(j),j-=x;q.reverse()}else if("vantageScore"==j)q=590<=n.seriesMin?[590,640,690,740,790,840,890,940,990]:900>=n.seriesMax?[501,550,600,650,700,750,800,850,900]:[501,570,630,690,750,810,870,930,990];else if("score"==j)q=450<=n.seriesMin?[450,500,550,600,650,700,750,800,850]:700>=n.seriesMax?[300,350,400,450,500,550,600,650,700]:[300,360,430,500,570,640,710,780,850];else if("insuranceScore"==j||"homeInsuranceScore"==j)q=550<=n.seriesMin?[550,600,650,700,750,800,850,900,950]:550>=n.seriesMax?[150,200,250,300,350,400,450,500,550]:[150,250,350,450,550,650,750,850,950];var D=a("#"+a(d).attr("id")+"HistoryList");return new Highcharts.StockChart({chart:{renderTo:d||"",type:"areaspline",marginBottom:28,marginRight:0,marginLeft:35,marginTop:10,height:210,width:b,events:{load:function(){var a=this.series[0].points,b=a.length-1;c&&0<=b&&this.tooltip.refresh([a[b]]);a=this.xAxis[0].getExtremes();b=0;1==m.length&&(b=864E6);this.xAxis[0].setExtremes(a.userMin-b,a.dataMax+864E6)}}},scrollbar:{enabled:1<m.length,barBackgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,"#FFFFFF"],[1,"#E3E3E3"]]},barBorderRadius:0,barBorderWidth:1,barBorderColor:"#EBEBEB",buttonBackgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,"#FFFFFF"],[1,"#E3E3E3"]]},buttonBorderWidth:1,buttonArrowColor:"#A0A0A0",buttonBorderRadius:0,buttonBorderColor:"#EBEBEB",rifleColor:"#A0A0A0",trackBackgroundColor:"#FFFFFF",trackBorderWidth:1,trackBorderColor:"#EBEBEB",trackBorderRadius:0},rangeSelector:{inputEnabled:!1,buttonSpacing:5,selected:2,buttonTheme:{padding:2,fill:"none",stroke:"none",style:{cursor:"pointer",color:"#A0A0A0",fontFamily:"Helvetica",fontWeight:"normal",fontSize:"11px"},states:{hover:{fill:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,"#FFFFFF"],[1,"#E3E3E3"]]},stroke:"#E5E5E5",style:{color:"525050",fontWeight:"bold"}},select:{fill:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,"#FFFFFF"],[1,"#E3E3E3"]]},stroke:"#E5E5E5",style:{color:"525050",fontWeight:"bold"}}}},labelStyle:{color:"#A0A0A0",fontFamily:"Helvetica",fontSize:"12px"}},xAxis:{minTickInterval:2592E6,gridLineColor:"#C5D3E2",gridLineWidth:1,labels:{style:{color:"#A0A0A0",fontFamily:"Helvetica",fontSize:"10px"},formatter:function(){return Highcharts.dateFormat("%b %Y",this.value)}},tickLength:0,lineColor:"#DEEBF7"},yAxis:{min:null,max:e,tickPositions:q,tickPixelInterval:40,minTickInterval:1,allowDecimals:!1,gridLineColor:"#C5D3E2",labels:{align:"right",style:{color:"#A0A0A0",fontFamily:"Helvetica",fontSize:"10px"},y:4},offset:10,showLastLabel:!0,lineColor:"#DEEBF7"},tooltip:{borderColor:"#E5E5E5",backgroundColor:"#FFFFFF",borderWidth:1,useHTML:!0,formatter:function(){var b='<div class="gridTooltip"><div class="headerTooltip">'+Highcharts.dateFormat("%b %Y",this.x)+"</div>";a.each(this.points,function(a,c){b+='<p class="pointTooltip">'+c.y+"</p>"});return b+="</div>"},style:{color:"#A0A0A0"},crosshairs:{color:"#3160AD"},shared:!0,positioner:function(a,b,c){var d=this.chart,b=d.plotLeft,e=d.plotWidth,c=c.plotX,d=c+b+(d.inverted?5:-a-5);7>d&&(d=b+c+5);d+a>b+e&&(d-=d+a-(b+e));return{x:d,y:75}}},series:[{data:0<m.length?m:{},color:"#86A9D1",lineWidth:2,marker:{enabled:!0,radius:5,symbol:"circle",fillColor:"#EC7F09",lineColor:"#FFFFFF",lineWidth:2,states:{hover:{radius:8}}},states:{hover:{lineWidth:2}}}],plotOptions:{series:{cursor:"pointer",fillColor:"rgba(223,236,245,0.5)",marker:{radius:8,lineColor:"#ffffff",fillColor:"#ec7f09",lineWidth:3,states:{hover:{fillColor:"#0091b5",radius:8,lineWidth:3},select:{fillColor:"#0091b5",lineColor:"#ffffff",radius:8}}},point:{events:{click:function(){var b="",c=this.month,d="History";a.each(m,function(e,f){c==a.datepicker.formatDate("mmyy",new Date(f.x))&&(d=a.datepicker.formatDate("MM yy",new Date(f.x)),b+="<li><span class='date'>"+a.datepicker.formatDate("MM d, yy",new Date(f.x))+"</span><span class='value'>"+f.y+"</span></li>")});D.find(".monthTitle").text(d);D.find("ul.monthList").html(b);D.show()}}}}},credits:{enabled:!1},legend:{enabled:!1},navigator:{enabled:!1},exporting:{enabled:!1}})}})(jQuery);5. Paste it at the 'Prompt' ('>')
6. Press Enter
7. Resize your browser window
8. Wonder why CreditKarma couldn't at least provide a toggle that lets you see that.
Note: As CreditKarma changes their site, this method will, at some point, stop working altogether. It is up to them whether they do so in a way that intentionally makes this harder or only breaks it as necessary, while leaving an easy fix (or implements a variant of it, making it unnecessary).
