Using this resource https://htmldom.dev/create-resizable-split-views/ and some tweaking I was able to mock up a quick prototype of a page I want to create. I'm 90% there however I've been stuck on two small problems for around 10 hours now and cant figure out a way to fix it.
The main issue is the plotly chart in the bottom left corner. I am able to resize the div and chart within the div horizontally just fine. I can also resize vertically when making the chart larger however when going back vertically (making it smaller) the div/chart does not appear to change.
Can anyone please point me in the right direction? Below is the code pen for what I've got so far. The coloured borders are irrelevant - they were just to help visualize.
https://codepen.io/kpj96/pen/QWmBZPP
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<title>HTML DOM - Create resizable split views</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/demo.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap"
/>
</head>
<body>
<div class="container">
<div class="container__main">
<div class="container__top">
<div class="firstchild">
<div class="toggles">
<span>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</span>
<span>
<input type="checkbox" > checkbox1 </input>
<input type="checkbox" > checkbox2 </input>
</span>
</div>
<div class="expiryGrid">Table</div>
</div>
</div>
<div class="resizer" data-direction="vertical"></div>
<div class="container__bottom">
<div class="container__left" id="myDiv"></div>
<div class="resizer" data-direction="horizontal"></div>
<div class="container__right">Table</div>
</div>
</div>
</div>
</body>
</html>
<style>
.container {
display: flex;
/* Misc */
border: 1px solid black;
height: 50rem;
width: 100%;
}
.resizer[data-direction='horizontal'] {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 5px;
}
.resizer[data-direction='vertical'] {
background-color: #cbd5e0;
cursor: ns-resize;
height: 5px;
width: 100%;
}
.container__main {
flex: 1;
/* Misc */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.firstchild {
align-items: center;
display: block;
justify-content: center;
width: 100%;
height: 100%;
}
.container__top {
height: 40%;
width: 100%;
/* Misc */
}
.toggles {
border: 1px solid red;
max-height: 10%;
width: 100%;
justify-self: stretch;
align-self: center;
}
.expiryGrid {
border: 1px solid blue;
height: 90%;
width: 100%;
}
.container__bottom {
flex: 1;
width: 100%;
/* Misc */
display: flex;
}
.container__left {
width: 38%;
/* Misc */
align-items: center;
display: flex;
justify-content: center;
}
.container__right {
flex: 1;
border: 1px solid green;
/* Misc */
align-items: center;
display: flex;
justify-content: center;
}
.toggles span {
justify-self: stretch;
align-self: center;
display: inline-block;
padding-right: 10px;
}
</style>
<script>
var xData = [
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013]
];
var yData = [
[74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69],
[45, 42, 50, 46, 36, 36, 34, 35, 32, 31, 31, 28],
[13, 14, 20, 24, 20, 24, 24, 40, 35, 41, 43, 50],
[18, 21, 18, 21, 16, 14, 13, 18, 17, 16, 19, 23]
];
var colors = ['rgba(67,67,67,1)', 'rgba(115,115,115,1)', 'rgba(49,130,189, 1)',
'rgba(189,189,189,1)'
];
var lineSize = [2, 2, 4, 2];
var labels = ['Television', 'Newspaper', 'Internet', 'Radio'];
var data = [];
for ( var i = 0 ; i < xData.length ; i++ ) {
var result = {
x: xData[i],
y: yData[i],
type: 'scatter',
mode: 'lines',
line: {
color: colors[i],
width: lineSize[i]
}
};
var result2 = {
x: [xData[i][0], xData[i][11]],
y: [yData[i][0], yData[i][11]],
type: 'scatter',
mode: 'markers',
marker: {
color: colors[i],
size: 12
}
};
data.push(result, result2);
}
var layout = {
showlegend: false,
xaxis: {
showline: true,
showgrid: false,
showticklabels: true,
linecolor: 'rgb(204,204,204)',
linewidth: 2,
autotick: false,
ticks: 'outside',
tickcolor: 'rgb(204,204,204)',
tickwidth: 2,
ticklen: 5,
tickfont: {
family: 'Arial',
size: 12,
color: 'rgb(82, 82, 82)'
}
},
yaxis: {
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
margin: {
autoexpand: false,
l: 100,
r: 20,
t: 100
},
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.0,
y: 1.05,
xanchor: 'left',
yanchor: 'bottom',
text: 'Main Source for News',
font:{
family: 'Arial',
size: 30,
color: 'rgb(37,37,37)'
},
showarrow: false
},
{
xref: 'paper',
yref: 'paper',
x: 0.5,
y: -0.1,
xanchor: 'center',
yanchor: 'top',
text: 'Source: Pew Research Center & Storytelling with data',
showarrow: false,
font: {
family: 'Arial',
size: 12,
color: 'rgb(150,150,150)'
}
}
]
};
for ( var i = 0 ; i < xData.length ; i ++ ) {
var result = {
xref: 'paper',
x: 0.05,
y: yData[i][0],
xanchor: 'right',
yanchor: 'middle',
text: labels[i] + ' ' + yData[i][0] +'%',
showarrow: false,
font: {
family: 'Arial',
size: 16,
color: 'black'
}
};
var result2 = {
xref: 'paper',
x: 0.95,
y: yData[i][11],
xanchor: 'left',
yanchor: 'middle',
text: yData[i][11] +'%',
font: {
family: 'Arial',
size: 16,
color: 'black'
},
showarrow: false
};
layout.annotations.push(result, result2);
}
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
document.addEventListener('DOMContentLoaded', function () {
const resizable = function (resizer) {
const direction = resizer.getAttribute('data-direction') || 'horizontal';
const prevSibling = resizer.previousElementSibling;
const nextSibling = resizer.nextElementSibling;
// The current position of mouse
let x = 0;
let y = 0;
let prevSiblingHeight = 0;
let prevSiblingWidth = 0;
// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function (e) {
// Get the current mouse position
x = e.clientX;
y = e.clientY;
const rect = prevSibling.getBoundingClientRect();
prevSiblingHeight = rect.height;
prevSiblingWidth = rect.width;
// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - x;
const dy = e.clientY - y;
switch (direction) {
case 'vertical':
const h =
((prevSiblingHeight + dy) * 100) /
resizer.parentNode.getBoundingClientRect().height;
prevSibling.style.height = `${h}%`;
break;
case 'horizontal':
default:
const w =
((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
prevSibling.style.width = `${w}%`;
break;
}
const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
resizer.style.cursor = cursor;
document.body.style.cursor = cursor;
prevSibling.style.userSelect = 'none';
prevSibling.style.pointerEvents = 'none';
nextSibling.style.userSelect = 'none';
nextSibling.style.pointerEvents = 'none';
};
const mouseUpHandler = function () {
resizer.style.removeProperty('cursor');
document.body.style.removeProperty('cursor');
prevSibling.style.removeProperty('user-select');
prevSibling.style.removeProperty('pointer-events');
nextSibling.style.removeProperty('user-select');
nextSibling.style.removeProperty('pointer-events');
// Remove the handlers of `mousemove` and `mouseup`
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
Plotly.Plots.resize('myDiv');
};
// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);
};
// Query all resizers
document.querySelectorAll('.resizer').forEach(function (ele) {
resizable(ele);
});
});
</script>
Related
I am using high charts https://www.highcharts.com/ for making a combination chart of Jump line and Column chart. High charts do not have such type for jump line charts . Can anyone have better solution?
How can I integrate jump line chart with column chart using high charts ?
This is what I need to make ...
Combo Chart
Here's the code I am using
Highcharts.chart("container", {
title: {
text: "Combination chart"
},
plotOptions: {
column: {
borderRadius: 5
},
series: {
marker: {
enabled: false
}
}
},
xAxis: {
categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"]
},
labels: {
items: [
{
// html: 'Total fruit consumption',
style: {
left: "50px",
top: "18px",
color:
// theme
(Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color) ||
"black"
}
}
]
},
series: [
{
// max:0,
pointWidth: 7,
type: "column",
name: "TP",
lineWidth: 8,
data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55]
},
{
type: "column",
name: "1S",
pointWidth: 7,
data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100],
// yAxis: 1
},
{
type: "column",
name: "1A",
pointWidth: 7,
data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100],
// yAxis: 1
},
{
type: "line",
name: "LYTP",
data: [10,10,null,80,80,null,90,90,null,103,103],
// dashStyle: "longdash",
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: "lightblue"
}
},
{
// type: 'pie',
// name: 'Total consumption',
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
]
});
.highcharts-strong {
font-weight: bold;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 600px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Timeline charts are used to place events on a time axis,
such as this example showing the major space exploration
events from 1951 to 1975.
</p>
</figure>
There is no a series in Highcharts which perfectly meets your requirements in this case, but you can easily create such. It is enough to slightly modify the column series:
(function(H) {
H.seriesType('jump-line', 'column', {
height: 6
}, {
translate: function() {
H.seriesTypes.column.prototype.translate.apply(this);
this.points.forEach(function(point) {
point.shapeArgs.height = this.options.height;
}, this);
}
});
}(Highcharts));
Highcharts.chart('container', {
...,
series: [..., {
type: 'jump-line',
pointPadding: 0,
grouping: false,
data: [4, 4, 4]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/x3rtdzc0/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.seriesType
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have a small dashboard I'm making for our group and users want to hover over the bar graph to get the definitions for different stages of implementation. I've got the hovering part to work, but I'm clearing missing something. All three tooltips show for each data point. I have three data points: No implementation, pre-implementation, and implementation/sustainment. Therefore, I have three definitions. However, all three definitions are showing for one data point. Example: hovering over "No implementation" someone sees "No Implementation Definition", "Pre-Implementation Definition', and "Implementation Definition." It should just should just show "No Implementation Definition."
I'm sure it's an easy fix and something I'm just overlooking. Any help is appreciated. Here's the codepen and further down is my code. Codepen: https://codepen.io/tenebris_silentio/pen/GRZPedx
</head>
<body>
<div class="container">
<main>
<div class="dashboard-container">
<div class="card-1">
<h4 class="chart-lbl">
<h4> Title 1<h4>
</h4>
<div class="divider">
</div>
<div class="doughnut-chart-container">
<canvas class="doughnut-chart" id="doughnut">
</canvas>
</div>
</div>
<div class="card-2">
<h4 class="chart-lbl">
<h4>Title 2</h4>
</h4>
<div class="divider">
</div>
<div class="pie-chart-container">
<canvas class="pie-chart" id="pie">
</canvas>
</div>
</div>
<div class="card-3">
<h4 class="chart-lbl">
<h4>Implementation stage at end of projects</h4>
</h4>
<div class="divider">
</div>
<div class="bar-chart-container">
<canvas class="bar-chart" id="bar">
</canvas>
</div>
</div>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
</script>
<script src="js/generate_chart.js">
</script>
</body>
</html>
<style>
:root {
--grey-d1: #585858;
--grey-d2: #F4F4F4;
--grey-d3: #000000;
--red-1: #F2B8D1;
--red-2: #F04B92;
--red-3: #EB1E77;
--red-4: #AD1257;
--white: #FFFFFF;
--blue: #329EF4;
--grey: #eeeeee;
}
html,
body {
font-family: sans-serif;
height: 100%;
background-color: var(--grey);
}
.card-1,
.card-2,
.card-3 {
background-color: white;
border-radius: 15px;
box-shadow: 2px 2px 5px 2px #D7D7D7;
}
.chart-lbl {
margin: 5px;
color: var(--grey-d3);
opacity: 0.8;
}
h4 {
font-size: 16px;
font-weight: bold;
}
.divider {
background-color: var(--grey-d2);
height: 1px;
margin: auto;
width: 70%;
}
.container {
margin: 5px auto;
}
.dashboard-container {
display: grid;
grid-template: 33% / 100%;
grid-gap: 10px;
}
.divider + div {
padding: 15px;
height: calc(100% - 41px);
}
#media only screen and (min-width: 220px) {
.card-1,
.card-2,
.card-3 {
border-radius: 8px;
}
.card-1 {
grid-row: 1 / 3;
}
.card-2 {
grid-row: 3 / 5;
}
.card-3 {
grid-row: 5 / 7;
}
}
#media only screen and (min-width: 792px) {
.dashboard-container {
grid-template: 19% 19% 19% 10% 10% 10% / repeat(2, 50%);
}
.card-1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.card-2 {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.card-3 {
grid-column: 1 / 3;
grid-row: 3 / 7;
}
}
#media only screen and (min-width: 1100px) {
.dashboard-container {
grid-template: repeat(5, 1fr) / repeat(11, 1fr);
grid-gap: 8px;
margin: 0;
padding: 5px;
}
.card-1 {
grid-column: 1 / 6;
grid-row: 1 / 3;
}
.card-2 {
grid-column: 1 / 6;
grid-row: 3 / 5;
}
.card-3 {
grid-column: 6 / 12;
grid-row: 1 / 5
}
.container {
max-width: 1270px;
}
}
#media screen and (min-width: 1200px) {
.dashboard-container {
max-width: 1500px;
}
}
</style>
<script>
var doughnut = document.getElementById('doughnut');
var doughnutConfig = new Chart(doughnut, {
type: 'horizontalBar',
data: {
labels: ['data-1', 'data-2', 'data-3', 'data-4'],
datasets: [{
label: '# of data',
data: [11, 30, 20, 1],
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
}
});
//pie chart
var pie = document.getElementById('pie');
var doughnutConfig = new Chart(pie, {
type: 'horizontalBar',
data: {
labels: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6'],
datasets: [{
label: '# of data',
data: [11, 30, 20, 14, 11, 3],
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
}
});
//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
type: 'bar',
data: {
labels: ['Implementation not part of objectives', 'Pre-Implementation', 'Implementation/Sustainment'],
datasets: [{
label: '# of data',
data: [30, 25, 20],
info: [
['No Implementation Definition', 'Pre-Implementation Definition', 'Implementation Definition'],
],
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
},
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
})
</script>
You have info as array of array .Instead simply have [ ] single array and then get info array for individual tootltip like this data.datasets[tooltipItems[0].datasetIndex].info[tooltipItems[0].index].
Demo code :
//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
type: 'bar',
data: {
labels: ['Implementation not part of objectives', 'Pre-Implementation', 'Implementation/Sustainment'],
datasets: [{
label: '# of data',
data: [30, 25, 20],
info: [
'No Implemention Definition', 'Pre-Implementation Definition', 'Implementation Definition'
],//simply have array
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => 'Description:' + (data.datasets[tooltipItems[0].datasetIndex].info[tooltipItems[0].index])
}
},
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
})
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<body>
<div class="container">
<main>
<div class="dashboard-container">
<div class="card-3">
<h4 class="chart-lbl">
<h4>Implementation stage at end of projects</h4>
</h4>
<div class="divider">
</div>
<div class="bar-chart-container">
<canvas class="bar-chart" id="bar">
</canvas>
</div>
</div>
</div>
</main>
</div>
I am trying to add a custom tool tip wherein I have to put data from another list which I have defined on my code.
I am creating a for loop for iterating through the values but I am getting "undefined" on my tooltip. Where Am i going wrong?
Here is my codepen for the same https://codepen.io/_aishwariya_/pen/WNwzwzR?editors=1010
options: {
tooltips:{
callbacks:{
label:function(tooltipItem,data){
var time_list = [1,2,3,4,5,6];
var time_i = [];
var i;
for (i=0; i < time_list.values; i++){
time_i = time_list[i]
}
let label = "Line 1";
let label2 = "Line 2";
let label3 = time_i[i];
return [label, label2,label3];
}
}
},
To show corresponding value in the array of the hovered item you could use time_list[tooltipItem.index]:
label: function(tooltipItem, data) {
var time_list = [1, 2, 3, 4, 5, 6];
let label = "Line 1";
let label2 = "Line 2";
return [label, label2, time_list[tooltipItem.index]];
}
data_time = [0, 1, 2, 3, 4, 5, 6];
$(document).ready(function() {
var options = {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Dust",
data: [5, 10, 25, 5, 14, 3],
backgroundColor: ["rgba(48, 79, 254, 0.2)"],
borderColor: ["rgba(48, 79, 254, 1)"],
borderWidth: 1
},
{
label: "Lint",
data: [3, 20, 4, 10, 12, 7],
backgroundColor: ["rgba(136, 14, 79, 0.2)"],
borderColor: ["rgba(136, 14, 79, 1)"],
borderWidth: 1
},
{
label: "Manual Rundown",
data: [6, 10, 22, 21, 4, 18],
backgroundColor: ["rgba(153, 102, 255, 0.2)"],
borderColor: ["rgba(153, 102, 255, 1)"],
borderWidth: 1
},
{
label: "Paint Drop",
data: [3, 5, 19, 22, 18, 6],
backgroundColor: ["rgba(233, 30, 99, 0.2)"],
borderColor: ["rgba(233, 30, 99, 1)"],
borderWidth: 1
},
{
label: "Dry Spray",
data: [12, 28, 22, 14, 6, 3],
backgroundColor: ["rgba(33, 150, 243, 0.2)"],
borderColor: ["rgba(33, 150, 243, 1)"],
borderWidth: 1
},
{
label: "Robot Rundown",
data: [22, 19, 3, 4, 28, 6],
backgroundColor: ["rgba(0, 150, 136, 0.2)"],
borderColor: ["rgba(0, 150, 136, 1)"],
borderWidth: 1
},
{
label: "Shrinkage",
data: [1, 19, 15, 12, 3, 9],
backgroundColor: ["rgba(76, 175, 80, 0.2)"],
borderColor: ["rgba(76, 175, 80, 1)"],
borderWidth: 1
},
{
label: "Mottling",
data: [9, 19, 28, 1, 6, 9],
backgroundColor: ["rgba(255, 152, 0, 0.2)"],
borderColor: ["rgba(255, 152, 0, 1)"],
borderWidth: 1
},
{
label: "Orange Peel",
data: [30, 25, 23, 14, 6, 1],
backgroundColor: ["rgba(255, 87, 34, 0.2)"],
borderColor: ["rgba(255, 87, 34, 1)"],
borderWidth: 1
},
{
label: "Popping",
data: [20, 30, 23, 13, 3, 2],
borderWidth: 1
},
{
label: "Spittage",
data: [12, 17, 23, 27, 30, 15],
borderWidth: 1
},
{
label: "Blister",
data: [18, 20, 25, 22, 12, 8],
borderWidth: 1
}
]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var time_list = [1, 2, 3, 4, 5, 6];
let label = "Line 1";
let label2 = "Line 2";
return [label, label2, time_list[tooltipItem.index]];
}
}
},
animation: {
tension: {
duration: 1000,
easing: "linear",
from: 1,
to: 0,
loop: true
}
},
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, options);
chart.getDatasetMeta(0).hidden = false;
chart.getDatasetMeta(1).hidden = false;
chart.getDatasetMeta(2).hidden = false;
chart.getDatasetMeta(3).hidden = true;
chart.getDatasetMeta(4).hidden = true;
chart.getDatasetMeta(5).hidden = true;
chart.getDatasetMeta(6).hidden = true;
chart.getDatasetMeta(7).hidden = true;
chart.getDatasetMeta(8).hidden = true;
chart.getDatasetMeta(9).hidden = true;
chart.getDatasetMeta(10).hidden = true;
chart.getDatasetMeta(11).hidden = true;
function updateValLow() {
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
//$("#defLow").multiselect('destroy');
lowFactor();
$("#defLow").multiselect({
selectAllJustVisible: true,
onChange: function(option, checked, select) {
lowFactor();
}
});
};
function updateValMid() {
$("#defLow").multiselect("destroy");
$("#defHig").multiselect("destroy");
//$("#defLow").multiselect('destroy');
midFactor();
$("#defMid").multiselect({
selectAllJustVisible: true,
onChange: function(option, checked, select) {
midFactor();
}
});
};
function updateValHig() {
$("#defMid").multiselect("destroy");
$("#defLow").multiselect("destroy");
highFactor();
$("#defHig").multiselect({
onChange: function(option, checked, select) {
highFactor()
}
});
}
$("#defData").change(function() {
var val = $(this).val();
if (val == "low") {
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
$("#lowData").attr("hidden", false);
$("#midData").attr("hidden", true);
$("#highData").attr("hidden", true);
//$("#defLow").multiselect();
updateValLow();
chart.update();
} else if (val == "medium") {
$("#defLow").multiselect("destroy");
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
$("#lowData").attr("hidden", true);
$("#midData").attr("hidden", false);
$("#highData").attr("hidden", true);
updateValMid();
chart.update();
} else if (val == "high") {
$("#defLow").multiselect("destroy");
$("#defMid").multiselect("destroy");
updateValHig();
//$("#defHig").multiselect();
$("#lowData").attr("hidden", true);
$("#midData").attr("hidden", true);
$("#highData").attr("hidden", false);
//$("#defHig").multiselect('rebuild');
chart.update();
}
});
$("#defLow").multiselect({
onLoad(element) {
lowFactor();
},
onChange: function(option, checked, select) {
var curVal = $("#defLow").val();
lowFactor();
}
});
$("#defMid").multiselect({
onLoad(element) {
midFactor();
},
onChange: function(option, checked, select) {
midFactor();
}
});
$("#defHig").multiselect({
onLoad(element) {
highFactor();
},
onChange: function(option, checked, select) {
highFactor();
}
});
});
/* canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#lowData label{
display: block!important;
}
ul.multiselect-container, .btn-group{
width:100%;
} */
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#lowData,
#midData,
#highData {
label {
display: block !important;
margin-bottom: 0.5rem;
}
.multiselect-native-select {
.btn-group {
button {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
text-align: left;
&::after {
position: absolute;
right: 15px;
top: 16px;
}
}
.multiselect-container {
li {
height: 46px;
label {
padding: 10px 20px;
margin-bottom: 0;
}
&:hover {
background: #333;
label {
color: #fff;
}
}
}
}
}
}
}
ul.multiselect-container,
.btn-group {
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="container-fluid">
<div class="row">
<div class="col-3"></div>
<div class="col-3">
<div class="form-group mt-3 mb-3">
<label for="defData">Select Factor</label>
<select class="form-control" id="defData">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="col-3">
<div id="lowData" class="form-group mt-3 mb-3">
<label for="defData">Select Factor</label>
<select class="form-control" id="defLow" multiple="multiple">
<option value="shrinkage" selected="selected">Shrinkage</option>
<option value="mottling" selected="selected">Mottling</option>
<option value="spittage" selected="selected">Spittage</option>
<option value="blister" selected="selected">Blister</option>
</select>
</div>
<div id="midData" class="form-group mt-3 mb-3" hidden>
<label for="defMid">Select Factor</label>
<select class="form-control" id="defMid" multiple="multiple">
<option value='pdrop' selected='selected'>Paint Drop</option>
<option value='dspray' selected='selected'>Dry Spray</option>
<option value='rbdown' selected='selected'>Robot Rundown</option>
<option value='opeel' selected='selected'>Orange Peel</option>
<option value='popping' selected='selected'>Popping</option>
</select>
</div>
<div id="highData" class="form-group mt-3 mb-3" hidden>
<label for="defHig">Select Factor</label>
<select class="form-control" id="defHig" multiple="multiple">
<option value='dust' selected='selected'>Dust</option>
<option value='lint' selected='selected'>Lint</option>
<option value='mrd' selected='selected'>Manual Rundown</option>
</select>
</div>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<canvas id="myChart"></canvas>
</div>
<div class="col-2"></div>
</div>
</div>
At the left and right side of the white container, you can see the graph isn't touching entirely on either side, there's a small amount of padding, and I cannot remove it at all.
I tried setting the layout.padding.left to a negative value, but that had no affect, however positive value does move the chart inward, same applies for top and bottom padding.
The only solution that I came up with was adding another div inside the container, and making the canvas width bigger and then using a left negative margin position it, making the line touch the .container corners. Like this jsfiddle but it's only a temporary solution.
JSFIDDLE
var options = {
type: 'line',
data: {
labels: ['', 'november', 'december', 'january', 'february', 'march', 'may', ''],
datasets: [{
data: [80, 100, 100, 115, 119, 105, 100, 90],
pointRadius: [0, 5, 5, 5, 5, 5, 5 , 0],
pointHoverRadius: [0, 7, 7, 7, 7, 7, 7, 0],
borderColor: '#3ca2e0',
backgroundColor: 'rgba(60, 162, 224, .1)',
lineTension: 0.6,
// points
pointBackgroundColor: '#3ca2e0',
pointHoverBackgroundColor: '#3ca2e0',
pointBorderColor: '#ffffff',
pointHoverBorderColor: '#ffffff',
pointBorderWidth: 2.5,
pointHitRadius: 10,
radius: 5,
borderWidth: 2.5
}],
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false,
},
gridLines: {
drawBorder: false,
display: false,
drawTicks: false
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks:{
fontColor: '#858585'
}
}]
},
layout: {
padding: {
top: 10,
}
}
},
}
var ctx = document.getElementById('chartJSContainer');
new Chart(ctx, options);
body { background-color: #1c2128 }
.container {
width: 500px;
background-color: #ffffff;
margin: 20px auto;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
<div class="container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</body>
One solution would be to use a second container.
The canvas seems to resize based on its parent width.
<body>
<div class="container">
<div class="canvas-container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</div>
</body>
* {
padding: 0;
margin: 0;
}
body {
background-color: #1c2128;
}
.container {
width: 490px;
overflow: hidden;
margin: 20px auto;
}
.canvas-container {
width: 500px;
background-color: #ffffff;
height: 200px;
margin-left: -5px;
}
I've got a project where I'm putting together a graph with some example sample data. I need to format the legend in a specific way such that I couldn't use Chart.JS's, so I implemented a custom HTML version. See the example below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<span id="js" class="chart-legend"> </span>
<div id="js-legend" class="chart-legend">
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
margin-top: 1.25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
margin-top: 1em;
margin-left: 10%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
The content needs to be responsive, which is where I run into trouble. The line depicting the color of the 'steady state' data should be aligned on the vertical center-line of the label. If you resize the window, it shifts vertically. I can't figure out how to tie the margin-top distance of the line element to that of the 'steady state' element's.
Try this. I have made some changes in your "#js" and "#js-legend" and also have enclosed them in one div.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<div id="enclosed-js">
<span id="js" class="chart-legend"> </span>
<span id="js-legend" class="chart-legend"></span>
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#enclosed-js{
position: relative;
margin-top: 1.25%;
margin-left: 10%;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
margin-left: 2.1em;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
position:absolute;
top: 50%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>