asked on

Creating HTML bar chart without any scripts

Hello Experts,

I am looking to build a bar chart without having any dependency on any other URL or reference to any other website.
Simply using html to create the bar chart manually.

The above is the chart data for which I am looking to build the chart.

Thanks,
Sloba

Dave Baldwin

HTML is not a programming language. It can not query your database and it can not use the data to create a display table. You have to use a script and/or programming language for both of those tasks.

zephyr_hex (Megan)

You can use CSS to style HTML as a bar chart. There are many demos of this on the web. Just google for CSS bar chart.

Serena Hsi

What zephyr_hex is referring to looks something like this:

<!DOCTYPE html>
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

Open in new window

Here's a tutorial on how this is done:
https://bost.ocks.org/mike/bar/

Swadhin Ray

ASKER

This has a use of the source :

<script src="//d3js.org/d3.v3.min.js"></script>

Are we saying without this we cannot do . For example I dont want to use any source the source should be present within the script, so that If i save the output where I dont have internet connection then I should be able to see the charts like similar to excel or word output for charts.

And Yes the output can be placed as a Table not directly connecting from HTML .

Scott Fell

>This has a use of the source :

But you can easily put the js code on your own server. Say you have a folder called, "scripts_folder". Then upload the file d3.v3.min.js to your scripts_folder and change the code to:

<script src="/scripts_folder/d3.v3.min.js"></script>

Open in new window

Do the same for all of your supporting scripts.

Dave Baldwin

If he needs the code to work without an internet connection, then it needs to be included in the page, not loaded from a 'src'.

Swadhin Ray

ASKER

I created the sample html file with how i need to display it .

I want to include the below source within the HTML file so that I can run the html file without internet .

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Open in new window

Sample.html

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Swadhin Ray

ASKER

Tried but internally the loader.js file is calling other URL's ... So again went into same error when running offline.

Is there a possible way to use CSS class to build the bar charts ? So that I dont have to depend on the source?

zephyr_hex (Megan)

And the HTML & CSS in this comment does not have a use of any included resources. It is pure HTML and CSS. See the JS Fiddle here for a demo: https://jsfiddle.net/zephyr_hex/19u36bno/

Swadhin Ray

ASKER

Can you provide an example on the bar chart what I shared on the HTML file?

zephyr_hex (Megan)

Yes, it is possible to use CSS to build bar charts. See the example in my last comment, or Google for CSS Bar Charts.
If you have a specific question about how to implement it, I'd be happy to try to answer your question(s). However, I'm not going to do all the work for you ;)

zephyr_hex (Megan)

And no, I can't provide a specific example using the HTML you attached. It's using Google Charts, and that can not be used offline per their terms.