padding top in bar chart - javascript

I am using c3.js to generate a graph. I want to put an image on top of each bar, on the label. So that the image is shown well I would like the graphic to have a space in the top that gives me the possibility of having the image without leaving the svg
https://jsfiddle.net/ao2xojnx/
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels:true,
type:'bar'
},
axis: {
}
});


There are two ways for doing this. Both have the same result and both need hardcoded values.
First way: set the y axis maximum:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
max: 700
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
Second way: set the padding.top:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
padding: {top:200, bottom:0}
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
Pay attention to the fact that, in both ways, you'll have extra ticks in the y axis.

Related

ChartJS autoskip:False not working on line chart

I have a line chart created using ChartJs. I have added a AutoSkip: false in the Y-axis under scales in my javascript as I want to show every single dates from the labels on Y-axis but some of my dates are being skipped.
The dates start from 2022-02-25 and ends at 2022-05-06. But the Y-axis is skipping some of the dates. I do not want that. I want every single dates to be displayed. Can anyone tell me what's wrong with my code?
Below is the sample of my codes:
// setup
const data = {
datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
},
y:{
reverse: true,
type: 'time',
ticks: {
autoSkip: false
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: 100vh;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1200px;
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
#media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

The time scale by default generates nice ticks because time can be verry far appart. If you want to show all the ticks you will need to set the source in the ticks to 'data'. After that the autoskip property will work.
scales: {
y: {
type: 'time',
ticks: {
source: 'data',
autoSkip: false
}
}
}
Live example:
// setup
const data = {
datasets: [{
label: 'PZ-1',
data: [{
y: '2022-02-25',
x: 40.551
}, {
y: '2022-03-01',
x: 35.889
}, {
y: '2022-03-02',
x: 34.68
}, {
y: '2022-03-03',
x: 33.182
}, {
y: '2022-03-04',
x: 30.82
}, {
y: '2022-03-05',
x: 29.864
}, {
y: '2022-03-08',
x: 28.413
}, {
y: '2022-03-10',
x: 28.413
}, {
y: '2022-03-12',
x: 28.424
}, {
y: '2022-03-15',
x: 25.578
}, {
y: '2022-03-17',
x: 27.07
}, {
y: '2022-03-19',
x: 27.42
}, {
y: '2022-03-22',
x: 27.478
}, {
y: '2022-03-24',
x: 22.817
}, {
y: '2022-03-26',
x: 22.576
}, {
y: '2022-03-29',
x: 22.326
}, {
y: '2022-03-31',
x: 22.011
}, {
y: '2022-04-02',
x: 21.672
}, {
y: '2022-04-05',
x: 21.561
}, {
y: '2022-04-07',
x: 21.307
}, {
y: '2022-04-09',
x: 34.988
}, {
y: '2022-04-12',
x: 28.89
}, {
y: '2022-04-14',
x: 28.618
}, {
y: '2022-04-17',
x: 28.862
}, {
y: '2022-04-19',
x: 27.727
}, {
y: '2022-04-21',
x: 27.493
}, {
y: '2022-04-23',
x: 27.149
}, {
y: '2022-04-26',
x: 25.862
}, {
y: '2022-04-28',
x: 25.59
}, {
y: '2022-04-30',
x: 25.37
}, {
y: '2022-05-04',
x: 24.79
}, {
y: '2022-05-06',
x: 24.927
}],
backgroundColor: '#FFD700',
borderColor: '#FFD700',
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
},
y: {
reverse: true,
type: 'time',
ticks: {
autoSkip: false,
source: 'data'
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: 100vh;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1200px;
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
#media only screen and (min-width: 1600px) {
.chartBox {
width: 1600px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

You must set a height, otherwise it will adjust to the height available and show only some Y-data.
// setup
const data = {
datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
maintainAspectRatio: false,
responsive: true,
scales: {
x: {
beginAtZero: true
},
y:{
reverse: true,
type: 'time',
ticks: {
autoSkip: false
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
overflow:auto;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
#media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>F3 Peizometer</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;height:900px;width:400px"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Loop animation with javascript

I got stuck on a looping animation till the end of page, so it should continue where it left off. Here is link to code pen
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var granica = width * 10 / 100;
console.log(width);
var animacija = anime({
targets: ".glavniDiv img",
easing: 'linear',
delay: 200,
translateX: [{
value: [0, 50],
duration: 500,
},
{
value: '+=50',
duration: 500,
}
],
translateY: [{
value: [-25, 25],
duration: 500,
},
{
value: '-=25',
duration: 500
}
],
});
.glavniDiv img {
height: 70px;
width: auto;
position: fixed;
top: 50%;
margin-top: -50px;
left: 10%;
}
.glavniDiv {}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="glavniDiv">
<img src="https://technabob.com/blog/wp-content/uploads/2011/11/111711_rg_8BitHeroes_03.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
I tried with for loop and didn't work so i don't know if i tried it wrong way or what

Json string without escape characters in highcharts

I am developing a pie chart using HighCharts. Using asp.net MVC.
I try to feed the java a data string using a ViewData like this:
data: (#ViewData["data"])
When I view this data in the JSON viewer, it looks like this:
[{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
When I put it hardcoded behind the ' data: ' property, the pie is neatly shown.
However it failes when I try to feed it from the action method. In that case, it looks like this:
"[{\"name\":\"Bouwend\",\"y\":0},{\"name\":\"Failed\",\"y\":12},{\"name\":\"Succes\",\"y\":19}]"
How can I make the JSON data without all the escape strings, so the Highcharts accepts it?
#model SATS.Tools.Tfs.Extensions.ServiceApi.Controllers.CruiseControlChart
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="../../Scripts/jquery-1.10.2.min.js"></script>
<script src="../../scripts/highcharts.js"></script>
<meta name="viewport" content="width=device-width" />
<title>CruiseControlChart</title>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart / configure the highcharts
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '#ViewData["charttitle"]'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
colorByPoint: true,
data: (#ViewData["data"])
data: [{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
//onderstaand is een setje statische test data
//data: [{
// name: "Bouwend",
// y: 3
//}, {
// name: "Build succesvol",
// y: 64,
// sliced: true,
// selected: true
//}, {
// name: "Build gefaald",
// y: 33
//}]
}]
});
});
</script>
<style type="text/css">
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="display: block">
<a href="http://vm-eli-007/ccnet/ViewFarmReport.aspx" target="_parent">
#*<div class="col-md-1" id="container" style=" min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>*#
<div class="col-md-1" id="container" style=" min-width: 90%; height: 90%; max-width: 600px; margin: 0 auto"></div>
</a>
<br/>
<div class="col-centered"><span> Oldest build time: #ViewData["eldestbuildtime"]</span></div>
</div>
</div>
</body>
</html>

Try updating code like this:
data: JSON.parse("#Html.Raw(#ViewData["data"])")

add JavaScript to w2ui panel

I am very new to JavaScript. I want to use w2ui panels to create a webpage for data visualization using D3.js.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
d3.select("body")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
</script>
</body>
</html>
My question is how to specify D3js to draw a rectangular in left pane (or any specified pane) of the w2ui panel. Thank you!

First, you should probably check out the w2ui docs for layouts / panels and learn about the different methods to fill the panels (content(), set(), load(), html(), ...).
The below example will draw your blue box into the main panel.
It's not the best method to do what you want (check out onContent for an alternative to the timeout), but it should give you an idea how to achieve your goal.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: '<div style="height: 100%; width: 100%" id="my_div"></div>' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
setTimeout(function(){
d3.select("#my_div")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
}, 100);
</script>
</body>
</html>

Justgage.js Change Title,Value,Label font-size

I am trying the reduce the font-size using [titleFontSize: 12..] and various combinations. but not working.
same i used for [valueFontSize: ..] & [labelFontSize: ..]
How can i change the font-size of Title,Value & Labels?
Code:
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js">
<script type="text/javascript">
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: 12,
titlePosition: "below",
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
label: "Mbps",
lableFontSize: "10px",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
</script>
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: "5px",
titlePosition: "below",
valueFontFamily: "Georgia",
valueFontSize: "5px",
label: "Mbps",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
#divDownloadOuter {
width: 50%;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
<div id="divDownloadOuter">
<div id="jgDownload"></div>
</div>
JSFiddle: Link

Try with titleMinFontSize. It will work.
titleMinFontSize: 20,
Check this link for other attributes.

Solution using CSS:
/* Title */
#jgDownload text:nth-child(6) tspan{
font-size: 0.8em !important;
}
/* Value */
#jgDownload text:nth-child(7) tspan{
font-size: 0.5em !important;
}
/* Label */
#jgDownload text:nth-child(8) tspan, #jgDownload text:nth-child(9) tspan, #jgDownload text:nth-child(10) tspan{
font-size: 0.9em !important;
}
Check this link with Example: https://jsfiddle.net/amitshahc/gf0gm69j/5/

To get it working with justGage v1.2.2 I used the following:
/* Value */
#jgDownload > svg:nth-child(1) > text:nth-child(6) {
font-size: 0.8em !important;
}
(the 'text:nth-child' value dictates which element to change, i.e. text:nth-child(8) and text:nth-child(9) represents the labels)
Be gentle on me as this is my first post!

Categories

Resources