Align 2 charts ( pie chart, bar chart) side by side - javascript

I am trying to display those charts side by side, with the same height for the 2 divs and place the 2 charts inside.
I try to use hard code css for each: "style="height:40vh; width:40vw"" but if I change the screen they are not at the same height anymore
..............................................................................................
This is the code for pie chart:
<div id="canvas-holder" style="height:40vh; width:40vw">
<canvas id="chart-area"></canvas>
</div>
<script>
var view_DA = JSON.parse('#DATA_QUERIED');
var duyanh_lab = [];
var duyanh_data = [];
for (var i = 0; i < view_DA.length; i++) { duyanh_lab.push(view_DA[i].ZONE_NAME); };
for (var i = 0; i < view_DA.length; i++) { duyanh_data.push(view_DA[i].ZONE_VALUE); };
var config = {
type: 'pie',
data: {
datasets: [{
data: duyanh_data,
backgroundColor: [
'dark khaki',
'khaki',
'olive',
'yellow',
'yellow green',
'dark olive green',
'olive drab',
'lawn green',
],
label: 'Dataset 1'
}],
labels: duyanh_lab
},
options: {
responsive: true,
}
};
$(document).ready(function () {
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
});
</script>
**and bar-char:**
<div id="container" style="height:40vh; width:40vw">
<canvas id="canvas"></canvas>
</div>
<script>
var view_DA2 = JSON.parse('#DATA_QUERIED');
var duyanh_lab = [];
var duyanh_data = [];
for (var i = 0; i < view_DA2.length; i++) { duyanh_lab.push(view_DA2[i].ZONE_NAME); };
for (var i = 0; i < view_DA2.length; i++) { duyanh_data.push(view_DA2[i].ZONE_VALUE); };
var barChartData = {
labels: duyanh_lab,
datasets: [{
label: 'Thời gian truy cập',
backgroundColor: '#FF6384',
borderColor: '#FF6384',
borderWidth: 2,
hoverBackgroundColor: '#FF6384',
hoverBorderColor: '#FF6384',
data: duyanh_data,
}],
};
$(document).ready(function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
});
</script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var view_DA2 = JSON.parse('#DATA_QUERIED');
var duyanh_lab = [];
var duyanh_data = [];
for (var i = 0; i < view_DA2.length; i++) { duyanh_lab.push(view_DA2[i].ZONE_NAME); };
for (var i = 0; i < view_DA2.length; i++) { duyanh_data.push(view_DA2[i].ZONE_VALUE); };
var barChartData = {
labels: duyanh_lab,
datasets: [{
label: 'Thời gian truy cập',
backgroundColor: [
'red'
],
borderColor: 'red',
borderWidth: 2,
data:
duyanh_data,
}],
};
$(document).ready(function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
});
</script>


Try to add display: flex; to your style:
<div id="canvas-holder" style="height:40vh; width:40vw; display: flex;">
The default flex-direction is row.


You'll want to use flexbox to align everything properlly. Use classes to reuse your css everywhere, and you'll be good to go =)
*{
box-sizing: border-box;
}
.container {
width: 90%;
margin: auto;
}
.main_wrapper{
background-color: lightblue;
display: flex;
flex-wrap: row;
justify-content: center;
align-items: center;
height: 900px;
}
.canvas_wrapper{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
background-color: aquamarine;
}
.canvas{
width: 100%;
height: auto;
border: 1px solid black;
}
.title{
font-size: 3vw;
}
<div class="container">
<div class="main_wrapper">
<!--Canvas 1-->
<div class="canvas_wrapper">
<h1 class="title">main canvas</h1>
<canvas class="canvas chart-area"></canvas>
</div>
<!--Canvas 2-->
<div class="canvas_wrapper">
<h1 class="title">second canvas</h1>
<canvas class="canvas chart-area"></canvas>
</div>
<!--Canvas 3-->
<div class="canvas_wrapper">
<h1 class="title">third canvas</h1>
<canvas class="canvas chart-area"></canvas>
</div>
</div>
</div>
Was that what you are looking for ?

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>

Using onclick event, how to match name with multiple status by drawing lines in Vuejs?

new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'ok'
},
{
name: 'bar',
checked: false,
status: 'notok'
},
{
name: 'baz',
checked: false,
status: 'medium'
},
{
name: 'oo',
checked: false,
status: 'medium'
}
]
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
width:100%
}
.red {
color: red;
}
.bcom {
width: 100%;
display: flex;
}
.container1 {
width: 50px;
}
.container2 {
width: calc(100% - 105px);
padding: 8px 0;
height: 30px;
box-sizing: border-box;
}
.h-line {
height: 1px;
margin-bottom: 18px;
width: 100%;
background-color: black;
}
.container3{
margin-left: 5px;
width: 50px;
}
.point:hover {
width: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div>
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked"></div>
</div>
<div>
<input type="checkbox"/>
{{ group.status }}
</div>
</div>
</div>
Onclick of checkbox, how to add multiple lines from one point in Vuejs?
As seen in the image, On click of the checkbox, Based on the status, I need to match from one point to three multiple status. like "ok, notok, medium"
i have taken v-model in the checkbox,to check and perfome two way data binding But not sure....what to do further. Do I need to take computed property and write condition to check and draw three multiple lines???

there are som positioning issues here, but this sample should be enough for you to get it working:
template
<div id="demo" :ref="'plane'">
<canvas :ref="'canvas'"></canvas>
<div
class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div>
<input
type="checkbox"
v-on:click="() => onToggleCheckbox(group)"
v-model="group.checked"
:ref="'checkbox_' + group.name"
/>
<span>{{ group.name }}</span>
</div>
<div>
<span>{{ group.status }}</span>
<input type="checkbox" :ref="'status_' + group.name" />
</div>
</div>
</div>
script:
export default {
name: 'App',
data: () => ({
ctx: undefined,
draw(begin, end, stroke = 'black', width = 1) {
if (!this.ctx) {
const canvas = this.$refs['canvas'];
if (!canvas?.getContext) return;
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
this.ctx = canvas.getContext('2d');
}
if (stroke) {
this.ctx.strokeStyle = stroke;
}
if (width) {
this.ctx.lineWidth = width;
}
this.ctx.beginPath();
this.ctx.moveTo(...begin);
this.ctx.lineTo(...end);
this.ctx.stroke();
},
onToggleCheckbox(group) {
const planeEl = this.$refs['plane'];
const planeRect = planeEl.getBoundingClientRect();
const fromEl = this.$refs['checkbox_' + group.name];
const fromRect = fromEl.getBoundingClientRect();
const from = {
x: fromRect.right - planeRect.left,
y: fromRect.top + fromRect.height / 2 - planeRect.top,
};
const toEl = this.$refs['status_' + group.name];
const toRect = toEl.getBoundingClientRect();
const to = {
x: toRect.left - planeRect.left,
y: toRect.top + toRect.height / 2 - planeRect.top,
};
console.log(planeRect, from, to);
this.draw(
Object.values(from),
Object.values(to),
group.checked ? 'white' : 'black',
group.checked ? 3 : 2
);
},
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'ok',
},
{
name: 'bar',
checked: false,
status: 'notok',
},
{
name: 'baz',
checked: false,
status: 'medium',
},
{
name: 'oo',
checked: false,
status: 'medium',
},
],
}),
};
style
body {
background: #20262e;
padding: 20px;
font-family: Helvetica;
}
#demo {
position: relative;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
canvas {
position: absolute;
background: red;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #fff;
z-index: -1;
}
.bcom {
width: 100%;
display: flex;
justify-content: space-between;
z-index: 2;
}
this only draws one line but you could easily add the others. I figured you might change your data schema to something like:
getQuestions() {
{
name: string,
checked: boolean,
statuses: [string...],
},
getStatuses() {
{
name: string
}
but not knowing about your requirements here, I decided to post the above before making further changes. (here is the sort of refactor I was referring to: https://stackblitz.com/edit/vue-yuvsxa )
addressing first comment:
in app.vue only there is one data called[((questions))], inside question we are looping and setting the status.
this is easy to address with a bit of preprocessing:
questionsAndStatusesMixed: // such as [{...question, ...statuses}],
questions: [],
statuses: [],
mounted() {
const statusesSet = new Set()
this.questionsAndStatusesMixed.forEach(item => {
const question = {
name: item.name,
checked: item.checked,
answer: item.status // is this the answer or .. these never made sense to me,
statuses: this.statuses // assuming each question should admit all statuses/that is, draw a line to each
}
const status = {
name: item.name
}
this.questions.push(question)
statusesSet.add(status)
})
Array.from(statusesSet).forEach(item => this.statuses.push(item))
}

How can I change opacity of not hovered columns on highchart?

Is that possible to change the opacity of not hovered points in Highcharts, without change the default opacity?
I have this columns charts with opacity: 1 for all columns by default. But I want to set all columns with opacity: 0.3, except the hovered one, when user hover a column, like in this example:
Chart without hover in any column:
Chart with hover:
Here is the code:
Html:
this.graphic = Highcharts.chart('graph-roa', {
chart: {
zoomType: 'xy',
marginTop: 20
},
title: {
text: undefined
},
credits: {
text: '',
href: ''
},
xAxis: [{
categories: ['13/07','14/07','15/07','16/07','17/07','20/07', '21/07']
}],
yAxis: [
{
lineWidth: 1,
gridLineWidth: 0,
labels: {
formatter() {
return this.value;
},
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
align: 'high',
offset: 3,
text: 'Reais',
rotation: 0,
y: -10
}
},
{
title: {
text: ''
},
labels: {
format: '',
style: {
color: '#fff'
}
},
opposite: true
}
],
tooltip: {
shared: true,
},
legend: {
layout: 'vertical',
align: 'left',
x: 700,
verticalAlign: 'top',
y: 10,
floating: true,
backgroundColor: ('#000' && '#fff') || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Valor',
type: 'column',
color: '#106D98',
data: [20,60,40,100,20,20,20],
cursor: 'pointer',
}]
});
.graph {
// width: auto;
height: 180px;
display: block;
margin-top: 20px;
}
.demais-dados-roa {
font-family: $tt-norms-regular;
font-size: 14px;
margin-bottom: 2em;
.label {
color: $sec-5;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="row demais-dados-roa justify-content-between atual no-gutters">
<div class="col-auto">
<h3 class="graphic-title">
Repasse Esc.
</h3>
<em class="fas fa-info-circle" (click)="tooltipVisible = true"></em>
</div>
<div class="col-auto">
<div class="row no-gutters">
<h3 class="graphic-title ml-auto">
1,50k
</h3>
</div>
<div class="row no-gutters">
<p class="label">
Acum. Julho
</p>
</div>
</div>
</div>
<div id="graph-roa" class="graph"></div>

You can achieve it by using the mouseOver and mouseOut callbacks to changes the opacity of the points.
Demo: https://jsfiddle.net/BlackLabel/1srupnxk/
point: {
events: {
mouseOver() {
let series = this.series;
series.points.forEach(p => {
p.graphic.css({
opacity: 0.3
})
})
this.graphic.css({
opacity: 1
})
},
mouseOut() {
let series = this.series;
series.points.forEach(p => {
p.graphic.css({
opacity: 1
})
})
}
}
},
API: https://api.highcharts.com/highcharts/series.column.point.events.mouseOver

Here's the code.
The idea is:
.outer:hover > * { opacity: 0.4; } here all the red items are slightly faded on hover.
Now .outer:hover > *:hover is to style the current item that is hovered.
.outer {
display: inline-block;
}
.inner {
height: 100px;
width: 20px;
background: red;
display: inline-block;
margin-right: 10px;
}
.outer:hover > * {
opacity: 0.4;
}
.outer:hover > *:hover {
transform: scale(1.1);
opacity: 1;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

Update Chart.js with Button Counter

I have the following lines of code on my webpage - example/demo.
HTML:
<div class="btn-area">
<button onclick="myfunction1()">Button 1</button>
<p id="btn1-output">0</p>
<button onclick="myfunction2()">Button 2</button>
<p id="btn2-output">0</p>
<button onclick="myfunction3()">Button 3</button>
<p id="btn3-output">0</p>
</div>
<div class="q11">
<div class="question">
<div id="canvas-holder" style="width: 250px; height: 250px; margin: 0 auto;">
<canvas id="chart-area" width="250" height="250" />
</div>
</div>
</div>
CSS:
body {
background: #1F253D;
color: #FFF;
padding: 20px;
}
button {
background: #000;
border: none;
}
.btn-area {
float: left;
width: 20%;
}
.btn-area button,
.btn-area p {
display: inline;
}
.q11 {
float: left;
text-align: center;
width: 50%;
}
JavaScript:
var doughnutData = [{
value: 1,
color: "#E64C65",
highlight: "#E64C65",
label: "Button 1"
}, {
value: 1,
color: "#11A8AB",
highlight: "#11A8AB",
label: "Button 2"
}, {
value: 1,
color: "#FCB150",
highlight: "#FCB150",
label: "Button 3"
}];
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
};
var btn1Calls = 0;
var btn2Calls = 0;
var btn3Calls = 0;
function myfunction1() {
btn1Calls++;
document.getElementById('btn1-output').innerHTML = btn1Calls;
}
function myfunction2() {
btn2Calls++;
document.getElementById('btn2-output').innerHTML = btn2Calls;
}
function myfunction3() {
btn3Calls++;
document.getElementById('btn3-output').innerHTML = btn3Calls;
}
I am currently using this library to display the information in a doughnut-shaped chart.
How can I make it so that the counter on the buttons will automatically update the charts percentage and if possible, could you please provide an example using a forked version of the demo?

Could you check this link if it's what you want?
I updated the functions like this:
function myfunction1() {
btn1Calls++;
document.getElementById('btn1-output').innerHTML = btn1Calls;
doughnutData[0].value++;
myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
}
function myfunction2() {
btn2Calls++;
document.getElementById('btn2-output').innerHTML = btn2Calls;
doughnutData[1].value++;
myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
}
function myfunction3() {
btn3Calls++;
document.getElementById('btn3-output').innerHTML = btn3Calls;
doughnutData[2].value++;
myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
}
http://codepen.io/anon/pen/BNPNeP

Strange behavior Highcharts pie chart in document mode IE8

I have 4 pie charts next to each other in a bootstrap grid which all show well in IE11 document modes IE5, IE7, IE9+, but not on IE8.
What it does in document mode IE8:
When I refresh the page with ctrl+f5: the charts show correct. When I refresh with f5: the charts have a way to big container and display out of screen (and way out of the grid)
My JS:
$(function () {
var chart;
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 200
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
layout: 'vertical'
},
credits: {
enabled: false
},
title: {
margin: 30,
style: {
color: '#6e685c',
fontSize: '10px'
}
},
tooltip: {
pointFormat: 'Aantal: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size:'100%',
dataLabels: {
enabled: true,
color: '#454545',
format: '{point.y}',
distance: 10
}
}
}
}
$(document).ready(function () {
// Build the chart
options.title.text = 'Financieel fout';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-1').highcharts(options);
// Build the chart
options.title.text = 'Financieel onzeker';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-2').highcharts(options);
// Build the chart
options.title.text = 'Service desk';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-3').highcharts(options);
// Build the chart
options.title.text = 'Controle';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-4').highcharts(options);
});
$("body").width($("body").width()-200).delay(1000).width($("body").width()+200);
});
The HTML:
<div class="row">
<div class="col-md-6 graph-container border-right">
<h4>Rechtmatigheid</h4>
<div class="clearfix">
<div id="graph-1" class="col-md-6 no-horizontal-padding"></div>
<div id="graph-2" class="col-md-6 no-horizontal-padding border-right"></div>
</div>
</div>
<div class="col-md-3 graph-container border-right no-horizontal-padding">
<h4 class="padding-left">Kwaliteit</h4>
<div class="graph-container">
<div id="graph-3" class=""></div>
</div>
</div>
<div class="col-md-3 graph-container no-horizontal-padding">
<h4 class="padding-left">Workload</h4>
<div class="graph-container">
<div id="graph-4" class="no-horizontal-padding"></div>
</div>
</div>
</div>
And the CSS
/***************************************************************/
/* GRAPHS */
/***************************************************************/
.graph-container{
}
.graph-container.border-right{
border-right: 1px solid #e5e5e5;
}
.graph-container .graphs-info{
margin: 20px 0px;
}
.graphs-info{
color: #6e685c;
line-height: 26px;
}
.graphs-info .content-title{
font-size: 17px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
.graphs-info .graphs-info-title{
display: inline-block;
margin-right: 6px;
}
.graphs-info .error{
color: #830020;
}
.padding-left{
padding-left: 20px !important;
}
Do I do something wrong or is this a bug? And will this occur in IE8 (actual browser)

Use comments in HTML for IE8, like this:
<!--[if IE 8]>
<style>...</style>
<![endif]-->

The bug didn't occur on IE8 running on Host OS Windows XP. Therefor the problem is actually non-existent. Another heads up that I should really test on actual IE8 and not the document modes.

Categories

Resources