I am currently working on a project where I need to display some values in a graph. I have been looking at Chart.js and created two simple charts displaying temperature and humidity. My problem is that I can not get the two charts next to each other. As now it only displays above one another.
I have tried using flexbox with flexGrow set to 1 and other values, but I would like them to scale up next to each other with the same size.
<div style={{display: "flex"}}>
<Temperature chartDataTemperature={this.state.chartDataTemperature} legendPosition="bottom" />
</div>
<div style={{display: "flex"}}>
<Humidity chartDataHumidity={this.state.chartDataHumidity} legendPosition="bottom"/>
</div>
With this code the charts are displayed on top of each other.
I have also tried putting both charts inside the same div but it does not look right.
I have added my project to GitHub if anyone would take a look.
https://github.com/henrik3/logg
You have an syntax error on
<div style={{display: "flex"}}>
This is the correct way:
<div style="display: flex;">
This is the correct way:
<div styles="{{display: flex;}}">
Take a look at this example:
<div style="display: flex;">
<div style="width: 100px; height: 100px; background-color:red;">
<p>
CHART
</p>
</div>
<div style="width: 100px; height: 100px; background-color:blue;">
<p>
CHART
</p>
</div>
</div>
https://www.w3schools.com/html/html_styles.asp
Take a look at this anwser.
Related
I want to create a dygraph graph within the Bootstrap card body's second column (it just looks nice and clean). The div used by dygraph is graphdiv. I am using this.$refs.graphdiv to try to access it from within my vue script.
If I move the graphdiv <div> outside the card div then it works (see the comment). Why will the dygraph not work within the bootstrap card? Is it just one of those compatibility things one must log with the developer and wait for a fix?
<template>
<div>
<div class="card">
<div class="card-header">HEADER</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3" style="width: 100%">
</div>
<div class="col-sm-9">
<div id="graphdiv" style="width: 100%" ref="graphdiv"></div>
</div>
</div>
</div>
</div>
</div>
<!--Comment: IF I PLACE IT HERE IT WORKS -->
</div>
</template>
Here is a reduced version of script:
<script>
import Dygraph from "dygraphs";
export default {
methods:{
plot_chart_series() {
//dataset = my data that I want to plot
const g = new Dygraph(this.$refs.graphdiv, dataset, {//options});
}
}
};
<script>
P.S.
My reason for using dygraph is I want to plot a dataset which is rather large (+-30000 datapoints), chart.js and Apexchart cannot manage that (I spent the better part of 3 hours trying to get them working). If there is no fix for my issue above, which other graphing libraries are there which are Vue friendly which can handle large datasets?
Workaround
I have managed to find a work-around and I can at least relatively narrow the problem and say that I do not think it is bootstrap.
<div class="card" ref="carder">
<div class="card-header">Graph</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<button>A_BUTTON</button>
</div>
<div class="col-sm-9">
<div ref="graphdiv" style="width: 100%"></div>
</div>
</div>
</div>
</div>
The above code snippet worked for me.
Changes to original:
I had an id="some_id" property in the containing parent div which I removed.
The entire card was wrapped in another div. This div had a ref="some_ref" property which I used from the Vue script to toggle the visibility. I did this with this.$refs.some_ref.style.display = "block"; & this.$refs.some_ref.style.display = "none";. I changed it to the following this.$refs.some_ref.style.visibility = "hidden"; and just changed the hidden to visible when I wanted to show the card. (It does not bother me that the hidden element still consumes space)
If I revert change number 2 above to the original then it fails to display. I still cannot explain it but it works.
I have my chart canvas in the following structure:
<div class="row">
<div class="col-md-4">
<div class="row">
<!-- something -->
</div>
<div class="row">
<!-- something -->
</div>
</div>
<div class="col-md-8">
<canvas class="chart chart-bubble" chart-data="c.data" chart-options="c.options" chart-series="c.series"></canvas>
</div>
</div>
Using this, I have my Chart on the right side, and next to it on the left side are two other rows. I want it to look like this:
But for some reason, the height is not fully used by the chart.
It looks like this:
I can't just set another height for the canvas, because then, the chart becomes distorted.
How can I make the y-axis longer, so the height of the chart becomes bigger and the full height of the layout is used?
The solution was to set this attribute of the options-object for the chart:
maintainAspectRatio: false
Then I could adjust the height like:
.chart-container {
position: relative;
height: 65vh;
}
How do you change the order of html elements based on the size of the screen?
For example, on large screen like desktops, the order would be like this:
element1 element2 element3
However, when seeing this on phone, it wouldn't fit the width of the screen. So, I would like it to look like this:
element2
element1
element3
Since Div2 is the main div, I would like it to be on the middle on large screens and on top on smartphone screens.
I am using Foundation as the framework for the website.
Here's an example code:
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
</div>
<div id="element2" class="column column-block">
</div>
<div id="element3" class="column column-block">
</div>
</div>
I have spent a lot of time learning html and css so that's all I really know to make a website. I have been planning to learn javascript so it would be fine if the solution requires it.
Here's the CSS way, using flexbox (take a look at this guide to help you get started with flexbox):
flex-direction is either row or column (depending on how you want your elements to flow)
Change their order with order (using order: 1 on #element2 will put it at the end)
#container {
display: flex;
flex-direction: column;
}
#element2 {
order: -1;
}
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
#1
</div>
<div id="element2" class="column column-block">
#2
</div>
<div id="element3" class="column column-block">
#3
</div>
</div>
Here's one way you could do it:
In CSS you can use a media query to display or hide content:
#media (max-width:632px){
#computer{
display: none;
}
#phone{
display: block;
}
}
You can then have 2 x html sections for both computers / smartphones for example (If you'd like to have big differences in structure etc. between devices)
Good read on media queries - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html
You just simply use class medium-up-12 instead of class on container ID.
Goo Luck.
<div id="container" class="row medium-up-12">
<div id="element1" class="column column-block">
#1
</div>
<div id="element2" class="column column-block">
#2
</div>
<div id="element3" class="column column-block">
#3
</div>
</div>
I'm trying to do is something like this:
That's one row of a <table>. In other words, it's a <tr> which contains three <td>s. Now I want to make the same structure without using <table> tag (also without using <ul> <li> tag).
I want to do that by using <div>s. Is it possible?
This is my code:
<div class="share_edit_flag">
<span>share</span>
<span>share</span>
<span>share</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
As you see, the result of my code doesn't look like the image which is in the top of my question.
As far as I know, I need to set float, display properties to them. I've tested them, but without achieving the expected result.
You can use the display:table and display:table-cell properties.
table - Let the element behave like a <table> element
table-cell - Let the element behave like a <td> element
Since you only need one row, you can skip the table-row (<tr>) element if you want. More info about the display property here.
Flexbox is also a good solution, unless you want support for older browsers and IE.
Example:
.table {
display: table;
width: 100%; //if you want the table to extend the full width of the parent
}
.table > div {
display: table-cell;
border: 1px solid red; //added this for highlight
}
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>share</span>
<span>share</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
.container {
display: flex;
height: 30px; }
.first {
flex: 1 1 auto;
background: red; }
.second {
width: 100px;
background: green; }
.third {
width: 100px;
background: yellow; }
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
You can achieved it using flexbox. And it is also flexible in container with 100% width. However, old browsers is not supported.
http://caniuse.com/#feat=flexbox
Hope it helps. Cheers!
This is very possible indeed.
Not too long ago, css flexbox was released and is now usable, prefixed, in the majority of browsers. This is used very often on the web and is a very good skill to learn.
Lately css grids crept up. Not worth spending too much time on, in my opinion, but it's a nice skill to have nevertheless
I know div elements are block level elements. They come one by one in different rows. I found one strange behavior. It is not displaying one by one.
<div id ="contend">
<div style='position:relative'> <div class='serach-box'>
<div class="container">
<p>Live Search</p>
<!--Row with two equal columns-->
<div class="row" >
<div class="col-md-3" >
<div class="demo-content">Location</div>
</div>
<div class="col-md-3" >
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
</div>
</div>
</div></div>
<div>hello</div>
<div>hello</div>
</div>
I added two div elements after completing the serach-box div. I gave serach-box a position: absolute; and its parent div position: relative;.
But why did div text appear above ? Why not below the serach-box div?
Code is below:
http://plnkr.co/edit/ONrHDKuaP9bwmT7MsQhD?p=preview
.serach-box{
width: 90%;
height: 150px;
border: 1px solid;
position:absolute;
left:5%;
}
Because the search box is absolutely positioned, it is taken out of normal flow.
Since it isn't in normal flow, it has no influence over the height of its container.
Since its container has no other content, the container ends up with a height of zero.
The elements following the container are, therefore, not pushed down by the container's height.
your position absolute will cause the text to find its way to the top.
Absolute means it will 'hover' on top of the page.
you can set the position to relative and add some with and height to place the box at the top.
just replace absolute for relative
To the div which is relatively positioned, its taking no height so, both the div's with 'hello' text are displaying there itself.
Give some min-height to the relatively positioned div.
<div style='position:relative;min-height: 32%'>
....
....
</div>
Which will work fine for you.