Strange behavior Highcharts pie chart in document mode IE8 - javascript

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.

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>

How to set hierarchy branch in JSCharting

I want to make a kinda hierarchical graph with JSCharting to upload in Google Data Studio showing a curriculum matrix network and its pre requisites.
I made a graph like this:
Each curriculum semester is a column and the classes are under each semester.
But I need to show the pre requisites network between these semesters.
For example:
EQ101 (in 1st Semester) is a pre requisite to take EQ201 (in 2nd Semester).
MA111 + MA141 (1st Semester) are pre requisites to take MA211 (in 2nd Semester).
How can I show these relationships when user pass the mouse over the classes?
The idea would be show the relationships like this picture, but only with animation with mouse over.
The code I made is like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stacked HTML Node Chart | JSCharting</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<script type="text/javascript" src="../jsc/jscharting.js"></script>
<script type="text/javascript" src="../jsc/modules/types.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<style type="text/css">
.department {
white-space: pre-wrap;
width: 110px;
padding: 5px;
color: #424242;
font-weight: normal;
}
.units {
white-space: pre-wrap;
width: 120px;
height: 200px;
color: #212121;
font-weight: normal;
text-align: center;
font-size: 10px;
}
.units li {
list-style-type: none;
padding: 5px;
margin: 4px 0;
border-radius: 5px;
}
.units ul {
padding: 0;
}
.units hr {
border: none;
background: white;
width: 40px;
height: 1px;
}
</style>
</head>
<body>
<div id="chartDiv" style="width: 810px; height: 430px; margin: 0px auto;"></div>
<script type="text/javascript">
/*
Chart with HTML annotations.
Learn how to:
- Create complex charts.
*/
// JS
var config = {
type: 'organization down',
defaultPoint: {
outline_width: 0,
annotation: {
asHTML: true,
label: {
text: '<div class="department" style="border-bottom:5px solid %color;"><b>%position</b>%name%units</div>',
align: 'center'
}
}
},
defaultSeries: {
mouseTracking_enabled: false,
line: { width: 1, color: '#e0e0e0' }
},
series: [
{
points: [
{
name: '',
id: 'dhr',
attributes: {
position: 'Engenharia Química<br>',
units: ''
},
label_style_fontSize: 14,
color: 'white'
},
{
name: '',
id: 'ca',
parent: 'dhr',
attributes: {
position: '1o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#ba68c8'
},
{
name: '',
id: 'ca_',
parent: 'ca',
attributes: {
position: '',
units:
'<ul><li><b>EQ101</b><br>Introdução a Processos e Indústrias Químicas</li><li><b>F 128</b><br>Física Geral I</li><li><b>F 129</b><br>Física Experimental I</li><li><b>MA111</b><br>Cálculo I</li><li><b>MA141</b><br>Geometria Analítica e Vetores</li><li><b>GQ101</b><br>Química I</li><li><b>GQ102</b><br>Química Experimental I</li></ul>'
},
label_style_fontSize: 10,
color: '#ce93d8',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
},
{
name: '',
id: 'ba',
parent: 'dhr',
attributes: {
position: '2o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#f06292'
},
{
name: '',
id: 'ba_',
parent: 'ba',
attributes: {
position: '',
units:
"<ul><li><b>EQ201</b><br>Balanços de Massa e Energia</li><li><b>MA211</b><br>Cálculo II</li><li><b>MC102</b><br>Algoritmos e Programação de Computadores</li><li><b>ME414</b><br>Estatística para Experimentalistas</li><li><b>QI242</b><br>Química Inorgânica Teórica</li><li><b>QI244</b><br>Química Inorgânica Experimental</li></ul>"
},
label_style_fontSize: 10,
color: '#f48fb1',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
},
{
name: '',
id: 'rm',
parent: 'dhr',
attributes: {
position: '3o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#64b5f6'
},
{
name: '',
id: 'rm_',
parent: 'rm',
attributes: {
position: '',
units:
'<ul><li><b>CE304</b><br>Direito</li><li><b>F 328</b><br>Física Geral III</li><li><b>F 329</b><br>Física Experimental III</li><li><b>GT001</b><br>Ciência, Tecnologia e Sociedade</li><li><b>MA311</b><br>Cálculo III</li><li><b>QA313</b><br>Química III (Engenharia Química)</li><li><b>QO323</b><br>Química Orgânica I (Engenharia Química)</li></ul>'
},
label_style_fontSize: 10,
color: '#90caf9',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
},
{
name: '',
id: 't',
parent: 'dhr',
attributes: {
position: '4o Semestre<br>',
units: ''
},
label_style_fontSize: 12,
color: '#4db6ac'
},
{
name: '',
id: 't_',
parent: 't',
attributes: {
position: '',
units:
'<ul><li><b>EM312</b><br>Desenho Técnico</li><li><b>EQ415</b><br>Termodinâmica I</li><li><b>EQ531</b><br>Aplicações dos Materiais em Engenharia Química</li><li><b>F 315</b><br>Mecânica Geral I</li><li><b>MS211</b><br>Cálculo Numérico</li><li><b>Q0422</b><br>Química Orgânica II (Engenharia Química)</li></ul>'
},
label_style_fontSize: 10,
color: '#80cbc4',
annotation_label_text: '<div class="units"><b>%position</b>%name%units</div>'
}
]
}
]
};
config.series[0].points.forEach(function(point) {
point.attributes.units = point.attributes.units.replace(/<li>/g, '<li style="background-color: %color;">');
});
var chart = JSC.chart('chartDiv', config);
</script>
</body>
</html>

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>

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"])")

Flot chart: legend and font

I have configured a bar chart using the jQuery Flot library. This is the code:
<style>
.flot-chart-bar {
height: 300px;
}
.flc-bar {
font-size: 2px;
border: 1px grey solid;
}
<div class="card profilestats" style="color: #fff !important;">
<div class="card-content" style="background-color: #bdbdbd !important;min-height:320px;">
<div id="bar-tipoReclamo" class="flot-chart-bar"></div>
<br>
<div class="flc-bar" style="background-color: white; "></div>
</div>
<div class="card-action" style="background-color: #757575 !important;;">
<span>Distribuzione Tipi di Reclamo negli ultimi 3 anni</span>
</div>
And this is the bar:
$.plot($("#bar-tipoReclamo"), barData, {
series: {
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
valueLabels: {
show: true
},
xaxis: {
ticks: [[0,currentYear-2],[1,currentYear-1],[2,currentYear]]
},
legend: {
container: '.flc-bar',
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts: {
content: " %y,%s " ,
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Now the question is pretty simple: how can i reduce the font size of the words inside the legend? I already tried using CSS and using some of Legend attributes that i found online but nothing seems to work.
Bar with Legend
I want to reduce the font of the words inside the white legend under the bar.

The CSS you have should work, but font-size: 2px; is probably not what you want.
See this fiddle for a full example based on your code where the font-size is specified in the CSS.

Categories

Resources