how to embed a live chart from another source in html

up vote
0
down vote

favorite

I am working on a sample to try and show the management here a better way of working things, please understand I am 100% novice, I do not know how to code, but am having a go anyway as this could improve how we work, and I'm always for improvement. Part of the issue we have is available data, i.e wallboards of ticket volumes, engineer availability, international clocks for various destinations etc. What we have at the moment is a mess, and the solution we are looking at is probably worse.

I have started creating a very basic page as a demo, but want to embed a current live set of charts from an internal source. By this I mean we have an internal server that we currently use to display pie charts, and stats on numbers created/closed for the day. I have the URL for said page, but how can I embed the charts from within that page, or the page itself and clip any excess space.

The page itself

The below is what I've done so far, it breaks the page into five for each user, I will worry about how to update the fields in an easier fashion at a later date (it would be nice to create some form of feed from our systems but it is very locked down here so doubtful. Plus that is a little beyond me at this stage). There is the clocks we need, and space for engineer tickets and availability.

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

    box-sizing: border-box;

}



/* Create four equal columns that floats next to each other */

.column {

    float: left;

    width: 20%;

    padding: 10px;

    }



/* Clear floats after the columns */

.row:after {

    content: "";

    display: table;

    clear: both;

}

</style>

</head>

<body>



<div style="text-align: center;">

<h2>Systems Team Status</h2>



<div class="row">

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ian</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/timezone/australia--sydney"><span style="color:gray;">Current local time in</span><br />Australia/Sydney</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Australia%2FSydney" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Jon</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/de"><span style="color:gray;">Current local time in</span><br />Germany</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FBerlin" width="100%" height="90" frameborder="0" seamless></iframe> </div>

     </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Janet</h2>

<p><b>Availability</b></p>

<br />

    <p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span style="color:gray;">Current local time in</span><br />New York City, United States</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Sonali</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/in"><span style="color:gray;">Current local time in</span><br />India</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FKolkata" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ross</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/1850147"><span style="color:gray;">Current local time in</span><br />Tokyo, Japan</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FTokyo" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

<div style="HEIGHT:45%;WIDTH:100%; COLSPAN="5; text-align:bottom" style="border-width:0px;border-top:1pt solid Black"><IMG SRC="Q:DepartmenteBusinessSystemsTestlogo.png;"></div>

</div>

</body>

</html>

I'm aware that resolution will be way out if being crammed into half a screen, but I was simply going to shrink it down for now if possible. This is just a demo, and if they get the gist then it will go to people far better than I to write/code (hopefully, either that or I get told to run with it, hopefully not!).

You will note my attempt to put an image on the page at the end. This was just to see if I could get anything to display, but instead I get a small square box about 5px X 5px, with a cross in. This didn't bode well for getting the charts to show up hence having to ask.

I have had a look through previous questions but can't see anything that fits the bill. A Google search wasn't much help either.

Any advice is much appreciated. Please break things down as mentioned I am not a coder, but am happy to give things a try and see if I can make them work.

****EDIT****
So after posting I continued to Google. I had tried an iframe before but cleraly didn't have the syntax right. I've now got :

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe>

This puts it in almost as a perfect fit, but when set to full screen it all displays so should work fine for my purpose. Have I done it the best way is now the question? Also, how can I scale the image?.

edited Nov 26 at 10:06

asked Nov 26 at 9:57

Rossco

113

add a comment |

up vote
0
down vote

favorite

The page itself

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

    box-sizing: border-box;

}



/* Create four equal columns that floats next to each other */

.column {

    float: left;

    width: 20%;

    padding: 10px;

    }



/* Clear floats after the columns */

.row:after {

    content: "";

    display: table;

    clear: both;

}

</style>

</head>

<body>



<div style="text-align: center;">

<h2>Systems Team Status</h2>



<div class="row">

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ian</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/timezone/australia--sydney"><span style="color:gray;">Current local time in</span><br />Australia/Sydney</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Australia%2FSydney" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Jon</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/de"><span style="color:gray;">Current local time in</span><br />Germany</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FBerlin" width="100%" height="90" frameborder="0" seamless></iframe> </div>

     </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Janet</h2>

<p><b>Availability</b></p>

<br />

    <p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span style="color:gray;">Current local time in</span><br />New York City, United States</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Sonali</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/in"><span style="color:gray;">Current local time in</span><br />India</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FKolkata" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ross</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/1850147"><span style="color:gray;">Current local time in</span><br />Tokyo, Japan</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FTokyo" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

<div style="HEIGHT:45%;WIDTH:100%; COLSPAN="5; text-align:bottom" style="border-width:0px;border-top:1pt solid Black"><IMG SRC="Q:DepartmenteBusinessSystemsTestlogo.png;"></div>

</div>

</body>

</html>

I have had a look through previous questions but can't see anything that fits the bill. A Google search wasn't much help either.

Any advice is much appreciated. Please break things down as mentioned I am not a coder, but am happy to give things a try and see if I can make them work.

****EDIT****
So after posting I continued to Google. I had tried an iframe before but cleraly didn't have the syntax right. I've now got :

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe>

edited Nov 26 at 10:06

asked Nov 26 at 9:57

Rossco

113

add a comment |

up vote
0
down vote

favorite

The page itself

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

    box-sizing: border-box;

}



/* Create four equal columns that floats next to each other */

.column {

    float: left;

    width: 20%;

    padding: 10px;

    }



/* Clear floats after the columns */

.row:after {

    content: "";

    display: table;

    clear: both;

}

</style>

</head>

<body>



<div style="text-align: center;">

<h2>Systems Team Status</h2>



<div class="row">

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ian</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/timezone/australia--sydney"><span style="color:gray;">Current local time in</span><br />Australia/Sydney</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Australia%2FSydney" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Jon</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/de"><span style="color:gray;">Current local time in</span><br />Germany</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FBerlin" width="100%" height="90" frameborder="0" seamless></iframe> </div>

     </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Janet</h2>

<p><b>Availability</b></p>

<br />

    <p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span style="color:gray;">Current local time in</span><br />New York City, United States</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Sonali</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/in"><span style="color:gray;">Current local time in</span><br />India</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FKolkata" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ross</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/1850147"><span style="color:gray;">Current local time in</span><br />Tokyo, Japan</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FTokyo" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

<div style="HEIGHT:45%;WIDTH:100%; COLSPAN="5; text-align:bottom" style="border-width:0px;border-top:1pt solid Black"><IMG SRC="Q:DepartmenteBusinessSystemsTestlogo.png;"></div>

</div>

</body>

</html>

I have had a look through previous questions but can't see anything that fits the bill. A Google search wasn't much help either.

Any advice is much appreciated. Please break things down as mentioned I am not a coder, but am happy to give things a try and see if I can make them work.

****EDIT****
So after posting I continued to Google. I had tried an iframe before but cleraly didn't have the syntax right. I've now got :

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe>

edited Nov 26 at 10:06

asked Nov 26 at 9:57

Rossco

113

The page itself

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

    box-sizing: border-box;

}



/* Create four equal columns that floats next to each other */

.column {

    float: left;

    width: 20%;

    padding: 10px;

    }



/* Clear floats after the columns */

.row:after {

    content: "";

    display: table;

    clear: both;

}

</style>

</head>

<body>



<div style="text-align: center;">

<h2>Systems Team Status</h2>



<div class="row">

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ian</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/timezone/australia--sydney"><span style="color:gray;">Current local time in</span><br />Australia/Sydney</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Australia%2FSydney" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Jon</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/de"><span style="color:gray;">Current local time in</span><br />Germany</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FBerlin" width="100%" height="90" frameborder="0" seamless></iframe> </div>

     </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Janet</h2>

<p><b>Availability</b></p>

<br />

    <p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span style="color:gray;">Current local time in</span><br />New York City, United States</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#FFFF;">

    <h2>Sonali</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/in"><span style="color:gray;">Current local time in</span><br />India</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FKolkata" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

  <div class="column" style="background-color:#F5F5F5;">

    <h2>Ross</h2>

    <p><b>Availability</b></p>

<br />

<p>No outstanding tickets</p>

<br />

<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/1850147"><span style="color:gray;">Current local time in</span><br />Tokyo, Japan</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FTokyo" width="100%" height="90" frameborder="0" seamless></iframe> </div>

  </div>

<div style="HEIGHT:45%;WIDTH:100%; COLSPAN="5; text-align:bottom" style="border-width:0px;border-top:1pt solid Black"><IMG SRC="Q:DepartmenteBusinessSystemsTestlogo.png;"></div>

</div>

</body>

</html>

I have had a look through previous questions but can't see anything that fits the bill. A Google search wasn't much help either.

Any advice is much appreciated. Please break things down as mentioned I am not a coder, but am happy to give things a try and see if I can make them work.

****EDIT****
So after posting I continued to Google. I had tried an iframe before but cleraly didn't have the syntax right. I've now got :

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe>

html

edited Nov 26 at 10:06

asked Nov 26 at 9:57

Rossco

113

edited Nov 26 at 10:06

asked Nov 26 at 9:57

Rossco

113

edited Nov 26 at 10:06

asked Nov 26 at 9:57

Rossco

113

asked Nov 26 at 9:57

Rossco

113

asked Nov 26 at 9:57

Rossco

113

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> works.

I've noticed due tothe set up of the page if I scale it leaves blank spaces, so going to play around. But for now it looks ok.

answered Nov 26 at 13:03

Rossco

113

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "3"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1378426%2fhow-to-embed-a-live-chart-from-another-source-in-html%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> works.

I've noticed due tothe set up of the page if I scale it leaves blank spaces, so going to play around. But for now it looks ok.

answered Nov 26 at 13:03

Rossco

113

add a comment |

up vote
0
down vote

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> works.

I've noticed due tothe set up of the page if I scale it leaves blank spaces, so going to play around. But for now it looks ok.

answered Nov 26 at 13:03

Rossco

113

add a comment |

up vote
0
down vote

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> works.

I've noticed due tothe set up of the page if I scale it leaves blank spaces, so going to play around. But for now it looks ok.

answered Nov 26 at 13:03

Rossco

113

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> works.

I've noticed due tothe set up of the page if I scale it leaves blank spaces, so going to play around. But for now it looks ok.

answered Nov 26 at 13:03

Rossco

113

answered Nov 26 at 13:03

Rossco

113

answered Nov 26 at 13:03

Rossco

113

answered Nov 26 at 13:03

Rossco

113

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Super User!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Jtdylktuy