How do I get a live USD/BTC price chart on my website?

[ATC777]

Hey guys,

I wanna put a live USD/BTC price chart on my website, like the Mt Gox chart. But I can't seem to find the embed code anywhere online. Could anyone help me out?

Thanks,

--ATC--

[BkkCoins]

Code:

http://bitcoincharts.com/charts/chart.png?m=mtgoxUSD&v=1&t=S&noheader=1&height=80&width=600&r=60

Code:

http://bitcoincharts.com/charts/chart.png?m=mtgoxUSD&v=1&t=S&noheader=1&height=80&width=600&r=2

I'm not sure if they like you hot linking the chart but it is doable

[ATC777]

I don't get what you're doing... if I just post the link it just shows the link as text. If I wrap it in <img> tags in the HTML it just puts up a static chart (frozen in time) at the moment I copied the link.

[payb.tc]

If I wrap it in <img> tags in the HTML it just puts up a static chart (frozen in time) at the moment I copied the link.

actually it's frozen at the time the page is loaded, so refreshing the page will update the chart.

[ATC777]

If I wrap it in <img> tags in the HTML it just puts up a static chart (frozen in time) at the moment I copied the link.

actually it's frozen at the time the page is loaded, so refreshing the page will update the chart.

Which page? My page, or BitcoinCharts.com?

[BkkCoins]

I don't get what you're doing... if I just post the link it just shows the link as text. If I wrap it in <img> tags in the HTML it just puts up a static chart (frozen in time) at the moment I copied the link.

The chart is generated when the page load occurs not when you copy the link.

If you wanted it to update every few minutes then you could use a small bit of js code to do that. But if your site is busy that could put unwanted load on the bitcoincharts server. If that's the case it might be nicer of you to cache it on your server and serve from there.

[ATC777]

I don't get what you're doing... if I just post the link it just shows the link as text. If I wrap it in <img> tags in the HTML it just puts up a static chart (frozen in time) at the moment I copied the link.

The chart is generated when the page load occurs not when you copy the link.

If you wanted it to update every few minutes then you could use a small bit of js code to do that. But if your site is busy that could put unwanted load on the bitcoincharts server. If that's the case it might be nicer of you to cache it on your server and serve from there.

I just want it to update once when the user loads my page, and update again if they refresh it. Not trying to kill their bandwidth. 

But I'm having trouble here... can you show me the HTML snippet used to make this work?

[BkkCoins]

I just want it to update once when the user loads my page, and update again if they refresh it. Not trying to kill their bandwidth.  

But I'm having trouble here... can you show me the HTML snippet used to make this work?

This should work fine,

Code:

<img src="http://bitcoincharts.com/charts/chart.png?m=mtgoxUSD&v=1&t=S&noheader=1&height=80&width=750&r=2">

It must have the parameters after ?... since chart.png is not a png but is a script that generates png content. Keep in mind that they likely cache the content and so it's not going to change every time you load it. But it does update as you can see by checking my first post above.

[ATC777]

Ok, I kinda get it now... bear with me, I'm an application and game developer trying to do web design. 

How would we go about doing that for this version of the chart:
http://bitcoincharts.com/charts/mtgoxUSD#rg90ztgSza1gEMAzm1g14za2gEMAzm2g60zi1gMACDzvzcv

?

Thanks for all your help!

--ATC--

[BkkCoins]

Ok, I kinda get it now... bear with me, I'm an application and game developer trying to do web design.  

How would we go about doing that for this version of the chart:
http://bitcoincharts.com/charts/mtgoxUSD#rg90ztgSza1gEMAzm1g14za2gEMAzm2g60zi1gMACDzvzcv

?

Thanks for all your help!

--ATC--

Use that tool to create what you want and then right click and choose view image. It will show just the image with the url needed. I edited out the SubmitButton arg as I don't think that is needed, and edited the width arg, added height, to fit below as an example.

Code:

http://bitcoincharts.com/charts/chart.png?width=600&height=90&m=mtgoxUSD&r=90&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=EMA&m1=14&a2=EMA&m2=60&x=0&i1=MACD&i2=&i3=&i4=&v=1&cv=1&ps=0&l=0&p=0&

The important thing is the args passed to the chart.png script determine what it draws.

[ATC777]

+1 for BkkCoins! 

Thanks for the great explanation and HTML snippet!

[franky1]

add this code to your page

<script language=javascript>
function startInterval()
{
    setInterval("UpdateChart();",60000);
    UpdateChart();
}

function UpdateChart()
{
    document.getElementById("Div1").innerHTML="<img src='http://bitcoincharts.com/charts/chart.png?width=600&height=90&m=mtgoxUSD&r=90&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=EMA&m1=14&a2=EMA&m2=60&x=0&i1=MACD&i2=&i3=&i4=&v=1&cv=1&ps=0&l=0&p=0&
'>";
}
</script>
<body onload="javascript:startInterval();">
<DIV ID="Div1"><img src="http://bitcoincharts.com/charts/chart.png?width=600&height=90&m=mtgoxUSD&r=90&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=EMA&m1=14&a2=EMA&m2=60&x=0&i1=MACD&i2=&i3=&i4=&v=1&cv=1&ps=0&l=0&p=0&
"></DIV>
</body>

the 60000 refers to 60 seconds before it updates (without havng the requirement to refresh the whole page). change it to what you want but dont be too selfish to try grabbing it every second or your abusing the bitcoincharts bandwidth

[ATC777]

add this code to your page

<script language=javascript>
function startInterval()
{
    setInterval("UpdateChart();",60000);
    UpdateChart();
}

function UpdateChart()
{
    document.getElementById("Div1").innerHTML="<img src='http://bitcoincharts.com/charts/chart.png?width=600&height=90&m=mtgoxUSD&r=90&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=EMA&m1=14&a2=EMA&m2=60&x=0&i1=MACD&i2=&i3=&i4=&v=1&cv=1&ps=0&l=0&p=0&
'>";
}
</script>
<body onload="javascript:startInterval();">
<DIV ID="Div1"><img src="http://bitcoincharts.com/charts/chart.png?width=600&height=90&m=mtgoxUSD&r=90&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=EMA&m1=14&a2=EMA&m2=60&x=0&i1=MACD&i2=&i3=&i4=&v=1&cv=1&ps=0&l=0&p=0&
"></DIV>
</body>

the 60000 refers to 60 seconds before it updates (without havng the requirement to refresh the whole page). change it to what you want but dont be too selfish to try grabbing it every second or your abusing the bitcoincharts bandwidth

Thanks, franky. Web design and all that it entails (HTML, Javascript, CSS, etc) is sort of a "new frontier" for me... something I have very little experience with. If you want to write a video game [engine] or an operating system I'm the guy to call, but when it comes to a website I'm a total n00b lol. So I appreciate everyone's time and patience! 

I've got the chart working on my page now. It updates when the page is loaded, as I wanted it. But I'll save franky's script in case I wanna change it to a dynamic chart. Right now I think it's fine, and I don't wanna burn up bitcoincharts.com's bandwidth any more than this without asking permission first. Perhaps they would be cool with me updating my charts every few minutes if I pay them a little for the traffic.

[BkkCoins]

That code could be a little more compact and clean by setting the img directly and updating the interval in the same function.

Of course, this only makes sense to use on a chart changing every minute. The chart you have is over months so would never change anyway.

Code:

<script language=javascript>
function UpdateChart() {
    document.getElementById("chart").src="http://bitcoincharts.com/charts/chart.png?width=600&height=90&m=mtgoxUSD&r=90&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=EMA&m1=14&a2=EMA&m2=60&x=0&i1=MACD&i2=&i3=&i4=&v=1&cv=1&ps=0&l=0&p=0&";
    setTimeout("UpdateChart();", 60000);
}
</script>

<body onload="javascript:UpdateChart();">
<div><img id='chart'></div>

If you do want to update more often you might be able to arrange a deal where you put a byline back link indicating you got the chart from them. They use the blockchain.info pool chart by having it link to the original source, in similar fashion.

[ATC777]

Thanks again! 

I see that you're "looking for small jobs" and offering services as a Linux web admin. I will definitely keep you in mind.

[bitcoinvest]

Greetings,

Works great on both versions

Can you please tell me how to get ONLY the price (i mean the same way, every 60 seconds to have updated)
I want to put in in header of my website and i just need the price not all those information...

Thanks in advance!

[skull88]

Greetings,

Works great on both versions

Can you please tell me how to get ONLY the price (i mean the same way, every 60 seconds to have updated)
I want to put in in header of my website and i just need the price not all those information...

Thanks in advance!

Really interested in this too.

And if someone has an idea to accomplish the same for BTC/EUR and BTC/LTC, it would be a great help to me if you wanted to share.