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>
I combined these three Elements (CSS, JavaScript, HTML) to put it into my Wix Website, which however did not work. Does anyone has an idea why it doesn't work, since in the demo it works just fine. The problem is that on the Website it shows only "89%" and the pie does not show up. The code is stored in an HTML iframe.
<head>
<style type="text/css">
.outer {
position: relative;
width: 600px;
height: 400px;
}
canvas {
position: absolute;
}
.percent {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 80px;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="secondContainer" width="600" height="400"></canvas>
<p class="percent">
89%
</p>
</div>
<script>
var options1 = {
type: 'doughnut',
data: {
labels: ["Red", "Orange", "Green"],
datasets: [{
label: '# of Votes',
data: [33, 33, 33],
backgroundColor: [
'rgba(231, 76, 60, 1)',
'rgba(255, 164, 46, 1)',
'rgba(46, 204, 113, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 5
}]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 95
}
}
var ctx1 = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx1, options1);
var options2 = {
type: 'doughnut',
data: {
labels: ["", "Purple", ""],
datasets: [{
data: [88.5, 1, 10.5],
backgroundColor: [
"rgba(0,0,0,0)",
"rgba(255,255,255,1)",
"rgba(0,0,0,0)",
],
borderColor: [
'rgba(0, 0, 0 ,0)',
'rgba(46, 204, 113, 1)',
'rgba(0, 0, 0 ,0)'
],
borderWidth: 3
}]
},
options: {
cutoutPercentage: 95,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltips: {
enabled: false
}
}
}
var ctx2 = document.getElementById('secondContainer').getContext('2d');
new Chart(ctx2, options2);
</script>
</body>
I suspect that you just need to load the ChartJS library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</head>
Or:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</body>
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>