I have created a chart using Highcharts organization chart with PHP and MySQL as follow`
let selectedNode = undefined;
let chart = Highcharts.chart('container', {
chart: {
height: "40%",
inverted: true
},
credits: {
enabled: false
},
title: {
text: 'EA Organogram'
},
series: [{
type: 'organization',
name: 'Employee Name',
keys: ['from', 'to'],
data: [["manager", "employee1"], ["manager", "employee2"], ["manager", "employee3"], ["manager", "employee4"],
["employee2", "employee5"], ["employee2", "employee6"]
],
colorByPoint: false,
color: '#bed308',
dataLabels: {
color: 'black'
},
borderColor: 'black',
nodeWidth: 65,
}],
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight:600
},
plotOptions:{
series:{
allowPointSelect: true,
point:{
cursor: 'pointer',
events:{
select: function (event) {
console.log("selected");
if(selectedNode !== undefined &&
selectedNode.selected &&
selectedNode !== this ){
selectedNode.select();
}
selectedNode = this;
},
unselect: function (event) {
selectedNode = undefined;
console.log("unselected");
}
}
}
}
}
});
$('#delNode').on('click', function(){
if(selectedNode === undefined){
alert("Select a node!");
}else{
selectedNode.remove();
chart.series[0].update();
}
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<title>Organogram</title>
</head>
<body>
<div>
<div id="container">
</div>
<button type="button" id="delNode">Delete node</button>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</body>
</html>
what I want is to delete the selected node, but when the button is clicked the most lower end node is deleted. As this question was answered in highcharts forum, but that chart also has this problem. don't know what is the issue
Related
I have this great code working here where I load the data in from an external file called test.csv.
Everything works great until I try to update the chart.js library link.
Can anyone tell me why this code doesn't work with more current versions of chart.js?
I want to update it so that I can install the plugin that lets you show the charts values. Alternatively some code that would facilitate this would work great as well!
Appreciate any help!
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Data project</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART</h1>
<h2>This is the subhead for my chart </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var dollar = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: dollar.years,
datasets: [
{
label: 'Voter support (%)',
data: dollar.vals,
backgroundColor: [
'#134D85',
'#134D85',
'#134D85',
'#134D85',
'#134D85',
],
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15,
}
},
scales: {
yAxes: [{
gridlines: {
display: true,
color: '#ffffff',
zeroLineColor: '#ffffff',
}
}],
xAxes: [{
gridLines: {
display: true,
drawOnChartArea: false
},
}],
}
}
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[1]));
});
console.log(years, vals);
return { years, vals };
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Coding Train: Data and APIs Project 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART</h1>
<h2>This is the subhead for my chart </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
// Data from: https://data.giss.nasa.gov/gistemp/
// Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var dollar = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: dollar.years,
datasets: [
{
label: 'Voter support (%)',
data: dollar.vals,
backgroundColor: [
'#134D85',
'#134D85',
'#134D85',
'#134D85',
'#134D85',
],
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15,
}
},
scales: {
yAxes: [{
gridlines: {
display: true,
color: '#ffffff',
zeroLineColor: '#ffffff',
}
}],
xAxes: [{
gridLines: {
display: true,
drawOnChartArea: false
},
}],
}
}
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[1]));
});
console.log(years, vals);
return { years, vals };
}
</script>
</body>
</html>```
For a start next time might be a good idea to read the documentation and the migration guide.
Few things that are at least wrong:
Link name has changed to lower case so 2.9.4/Chart.js -> 3.5.0/chart.js
Scales have changed from 2 arrays to objects for each scale:
options: {
scales: {
x: {
// config for default x scale
},
x2: {
// config for second x scale
},
y: {
// config for default y scale
},
}
}
title and legend config have been moved to the plugins section so options.title -> options.plugins.title and options.legend -> options.plugins.legend.
Alternativly you could also just use an older release of the datalabels plugin that has been written for V2
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
i need to do this effect in my project but i've no idea about it. Can you help me?
I've created the chart, but the effects i don't know to do.
Here is the real case:
https://statusinvest.com.br/acoes/egie3
I've created the chart:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./dist/echarts.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'VARIAÇÃO DE ENTRADA DE NOTA'
},
tooltip: {
},
legend: {
data: ['Valor']
},
xAxis: {
data: ["01/08/20", "05/08/20", "15/08/20", "30/08/20", "02/09/20", "01/10/20"]
},
yAxis: {
},
series: [{
name: 'Valor',
type: 'line',
data: [19.99, 20.5, 21.6, 18.6, 15.1, 22.5],
tension
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
If somebody knows how to do this effect in chart.js, it's valid.
Thanks!
I'm trying to make a chart like this screenshot.
Now i'm using chartjs as given below:-
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart"></canvas></div>
</div>
<script>
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false,'start'].forEach(function(boundary, index) {
utils.srand(8);
new Chart('chart', {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
});
</script>
</body>
</html>
There is issue this is not exactly as screenshot, how can i make it same as in screenshot?
You are using the charts correctly, and you are using the appropriate type: line. All you have to do to show a chart exactly as the image's is set the right values. I hope this gives you an idea
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
const canvas = document.getElementById('chart-' + index);
if(canvas)
{
utils.srand(8);
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
//data: generateData(),
data: [0, 0, 40, 0,0, 50, 0, 0, 0],
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
}
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
</div>
</body>
</html>
Following one example we can format the tick text. I see that this is set to multiline: true by default, which is fine, but I also want to be able to control where the line breaking happens. Is there a way to do that?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
rotate: -75,
format: function (x) {
return x.getFullYear() + ' control this line breaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>
</html>
There's no <br> for svg text nodes. To line break, it needs to add a <tspan> node for each line of text.
For this moment, you can handle line-breaking with the axis.x.tick.width option.
axis: {
x: {
tick: {
width: 80
}
}
},
UPDATE - billboard.js now supports multiline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
//rotate: -20,
format: function (x) {
return x.getFullYear() + ' \ncontrol \nthis \nline \nbreaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>
</html>
I trying to get highcharts to draw a linked graph. It works when I have not so much data in my data set. Now I have tried to put a dataset with ~30.000 points. I see the mouse over with the points, but the line is not plot?
I have read about turboThreshold: and have set it to turboThreshold: 40000 but it does still not plot the line??
Any ideas what I do wrong?
/Jesper
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.chart {
min-width: 200px;
max-width: 1250px;
height: 350px;
margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<title>Highcharts Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<script type='text/javascript'>//<![CDATA[
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('http://vels.dk/beer/getdata.php?name=velsdk002', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
//text: dataset.name,
text: null,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
crosshair: true,
events: {
setExtremes: syncExtremes
}
},
yAxis: {
title: {
text: dataset.name
},
opposite: true, //flytter skala til højre
labels: {
align: 'left',
x: 0,
y: -2
},
plotLines: [{
value: dataset.min,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Final Gravity - XX SG',
x: 30
}
}, {
value: dataset.max,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Starting Gravity - XX SG',
x: 30
}
}]
},
plotOptions: {
series: {
turboThreshold: 40000,
marker: {
enabled: false
}
}
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
//]]>
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>