If you don't use Credit Karma, this probably won't interest you much. If you do, and you update your score frequently, you may have noticed that you can click on one of the monthly data points and see the individual credit scores you received each month.
It's clear the individual data points are there, and while I know that I'm not looking at a FICO score, that doesn't stop the data-geek in me from wanting more details. I've posted a similar script previously. On top of updating to Credit Karma's latest code, this version also displays the day of the month a score was received. For more info about the script and the changes I've made, see the notes at the bottom.
There are two possible ways to use this: create a bookmark, or run it manually from your browser's console.
Creating a bookmark:
1. Create a new bookmark in your browser. You can either create a bookmark of a page and then edit it, or create a new blank bookmark.
2. Copy this (hint: triple-click) and use it as your Location/URL:
javascript:{var ret=(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"),n=[];if(!d)return!1;var q=CK.App.Common.TouchScreen.hasTouch,s=CK.App.Common.Charts.ScoreHistory.defaultSettings(m),r=10*Math.floor(s.seriesMin/10),y=10*Math.ceil(s.seriesMax/10),r=r-10>=f?r-10:r,y=y+10<=e?y+10:y,x=y-r,v=x>s.pointDiffThreshold/2?20:40>=x?5:10,D=v*s.numTicks,A=r+D<=e,E=A&&r+D<=s.seriesMax&&r-v>=f,f=y-D>=f&&y-D>=s.seriesMin&&y+v<=e;if(x<=s.pointDiffThreshold)if(A){j=E?r-v:r;for(r=0;r<s.numTicks;r+=1)n.push(j),j+=v}else{j=f?y+v:y;for(r=0;r<s.numTicks;r+=1)n.push(j),j-=v;n.reverse()}else if("vantageScore"==j)n=590<=s.seriesMin?[590,640,690,740,790,840,890,940,990]:900>=s.seriesMax?[501,550,600,650,700,750,800,850,900]:[501,570,630,690,750,810,870,930,990];else if("score"==j)n=450<=s.seriesMin?[450,500,550,600,650,700,750,800,850]:700>=s.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)n=550<=s.seriesMin?[550,600,650,700,750,800,850,900,950]:550>=s.seriesMax?[150,200,250,300,350,400,450,500,550]:[150,250,350,450,550,650,750,850,950];var u=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:!q()?1<m.length:!1,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,buttons:[{type:"month",count:1,text:"1m"},{type:"month",count:3,text:"3m"},{type:"month",count:6,text:"6m"},{type:"ytd",text:"YTD"},{type:"year",count:1,text:"1y"},{type:"all",text:"All"}],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:n,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 %e, %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>")});u.find(".monthTitle").text(d);u.find("ul.monthList").html(b);u.show()}}}}},credits:{enabled:!1},legend:{enabled:!1},navigator:{enabled:!1},exporting:{enabled:!1}})}})(jQuery);$(window).resize();ret;}
3. Give it a name of your choice.
4. Load CreditKarma's scores page.
5. Run your bookmark.
6. Check out the charts.
Running it manually:
1. Load CreditKarma's scores page.
2. Right-Click, "Inspect Element", click on the "Console" tab.
3. Copy this (hint: triple-click):
var ret=(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"),n=[];if(!d)return!1;var q=CK.App.Common.TouchScreen.hasTouch,s=CK.App.Common.Charts.ScoreHistory.defaultSettings(m),r=10*Math.floor(s.seriesMin/10),y=10*Math.ceil(s.seriesMax/10),r=r-10>=f?r-10:r,y=y+10<=e?y+10:y,x=y-r,v=x>s.pointDiffThreshold/2?20:40>=x?5:10,D=v*s.numTicks,A=r+D<=e,E=A&&r+D<=s.seriesMax&&r-v>=f,f=y-D>=f&&y-D>=s.seriesMin&&y+v<=e;if(x<=s.pointDiffThreshold)if(A){j=E?r-v:r;for(r=0;r<s.numTicks;r+=1)n.push(j),j+=v}else{j=f?y+v:y;for(r=0;r<s.numTicks;r+=1)n.push(j),j-=v;n.reverse()}else if("vantageScore"==j)n=590<=s.seriesMin?[590,640,690,740,790,840,890,940,990]:900>=s.seriesMax?[501,550,600,650,700,750,800,850,900]:[501,570,630,690,750,810,870,930,990];else if("score"==j)n=450<=s.seriesMin?[450,500,550,600,650,700,750,800,850]:700>=s.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)n=550<=s.seriesMin?[550,600,650,700,750,800,850,900,950]:550>=s.seriesMax?[150,200,250,300,350,400,450,500,550]:[150,250,350,450,550,650,750,850,950];var u=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:!q()?1<m.length:!1,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,buttons:[{type:"month",count:1,text:"1m"},{type:"month",count:3,text:"3m"},{type:"month",count:6,text:"6m"},{type:"ytd",text:"YTD"},{type:"year",count:1,text:"1y"},{type:"all",text:"All"}],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:n,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 %e, %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>")});u.find(".monthTitle").text(d);u.find("ul.monthList").html(b);u.show()}}}}},credits:{enabled:!1},legend:{enabled:!1},navigator:{enabled:!1},exporting:{enabled:!1}})}})(jQuery);$(window).resize();(ret==undefined?true:ret);
4. Paste it at the prompt: >
5. Press enter.
6. Check out the charts.
Note: As CreditKarma changes their site, this method may, 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).
Note: If you're inclined to check the differences in my script to ensure I am not acting maliciously, please compare it to lines 303-312 of the 'myfinances' script loaded via edgecastcdn. The primary change is the complete removal of the variable 'g' which is replaced with the existing variable 'm'. I've also changed one date format to increase the usefulness of the on-hover chart tooltip. Finally, I resize the window, triggering a refresh on any already-displayed charts. The two versions above vary slightly in how they're wrapped: the console version just prevents 'undefined' from appearing, whereas the bookmarklet version must start with 'javascript:' and scope multiple statements.
