I created a chart with Billboard.js (a chart library based on d3 v4+).
My aim was to make the lines look dashed so I used this documentation for it.
Basically, I added this code:
const regions = {}
for(const item of baselineTitle) {
regions[item]=[];
regions[item].push({"style" : "dashed"});
}
inside bb.generate:
var chart = bb.generate({
"data": {
"type": "spline",
"x": "x",
"columns": columns,
"regions": regions
},
...
When the lines are not dashed everything it's fine. I have no line on the chart for null values.
When it is dashed, it has a line on zero for all null values.
This is how my chart looks like, I put yellow color where it shouldn't be a line because the values are null for that part.
The array containing the values for that line is this one:
0:"char id"
1:null
2:null
3:null
4:2230.181884765625
5:2230.181884765625
6:2230.181884765625
7:2230.181884765625
8:2230.181884765625
9:2230.181884765625
10:2230.181884765625
11:2230.181884765625
12:2230.181884765625
13:2230.181884765625
14:2230.181884765625
15:2230.181884765625
16:4568.82470703125
17:4870.001953125
18:4671.97607421875
19:4767.93603515625
20:4729.97607421875
21:4721.1591796875
22:4799.16357421875
23:4864.5068359375
24:3512.424072265625
25:2924.76513671875
26:3047.808837890625
27:3052.245361328125
28:3045.63427734375
29:2930.223388671875
30:2410.9541015625
31:2116.904052734375
32:2064.01806640625
33:2159.795654296875
34:2232.72412109375
35:2669.738037109375
36:3420.1669921875
37:4515.5537109375
38:4703.1435546875
39:4993.89501953125
40:5207.1259765625
41:5056.1904296875
42:5222.80517578125
43:5509.8447265625
44:5453.8798828125
45:5206.78466796875
46:5155.16748046875
47:5082.36083984375
48:4002.560302734375
49:3587.09716796875
50:3569.875732421875
51:3328.478515625
52:3167.501953125
53:2847.85009765625
54:2208.728759765625
55:2152.306396484375
56:2085.06640625
57:2145.009521484375
58:2170.032958984375
59:2666.60107421875
60:3379.564208984375
61:4388.9384765625
62:4549.611328125
63:5117.0029296875
64:5279.7353515625
65:5314.0751953125
66:5404.16552734375
67:5757.20068359375
68:5631.9619140625
69:5716.732421875
70:5763.24560546875
71:5598.005859375
72:null
73:null
74:null
75:null
76:null
77:null
78:null
79:null
80:null
81:null
82:null
83:null
84:null
85:null
86:null
87:null
88:null
89:null
90:null
91:null
92:null
93:null
94:null
95:null
96:null
97:null
98:null
99:null
Do you know what's the problem here?
If you don't need to set a specific region of the line to be dashed, with the css stroke-dasharrayattribute will be more easier to implement that.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
Check out the below snippet.
bb.generate({
data: {
columns: [
["data1", 100, 200, 1000, 900, 500],
["data2", 20, 40, null, 300, 200]
],
type: "spline"
},
point: {
show: false
}
});
.bb-lines-data2 {
stroke-dasharray: 2 4;
stroke-width: 2px;
}
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
<div id="chart"></div>
</body>
</html>
Related
Setting up a line chart with line series and a horizontal selection brush (lineX) doesn't seem to provide a way of reading the selected range values. Changing the series type to bar or scatter seems to work as expected. I'm wondering if this is a bug or if more configurations are required.
var container = document.getElementById('main');
var chart = echarts.init(container);
chart.setOption({
xAxis: {
data: [3, 4, 5]
},
yAxis: {
},
brush: {
toolbox: ['lineX'],
type: 'lineX',
},
series: [{
type: 'line', // changing this to scatter or other types makes the brush selection work
data: [120, 200, 150]
}]
});
chart.on('brushSelected', function(params){
// this shows an empty array - while it should be the range selected
console.log(params.batch[0].selected[0].dataIndex)
});
#main {
width: 600px;
height: 400px;
border: 1px solid red;
}
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<div id="main"></div>
</body>
</html>
Currently, supported brush types include: scatter, bar, candlestick. (Note that parallel contains brush function by itself, which is not provided by brush component.)
https://echarts.apache.org/en/option.html#brush
I have been trying to add a number on the inside of the "Simple donut chart" from ApexCharts. This is the link to it - https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ .
To use the chart, I ran the command "npm install apexcharts --save" in my project terminal.
This is my HTML file:
<!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">
<link rel="stylesheet" href="./Chart.css">
<script src="./Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<div id="chart"></div>
<script>
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</html>
This is my CSS file:
#chart{
width:400px;
height:400px;
margin-left: auto;
margin-right: auto;
}
This is what I used in my JavaScript file:
var options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
This is the result of the code mentioned above:
Current Chart
This is a model to show how I would like the number to be displayed:
Example Chart
I would like to know if its possible to add a number inside the current chart with ApexCharts as the example chart shows.
Yes it's possible.
let options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
label: '',
formatter: () => 'Text you want'
}
}
}
}
}
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
<div id="chart"></div>
You can show the following information inside a donut:
a value of an individual donut piece (on hover to that piece)
the total of all the donut pieces
custom text
Try to change values of the total object properties to better understanding what I mean. More detailed information is here
I'm trying to create a chart that looks like this using ChartJS, D3.js, NVD3 or c3.js but I'm having trouble. Is this even possible with any of these libraries?
You can use C3.js bar charts and hide some of the x-axis but that may require extra JS to do so unless you make the x axis label ' '. If you want all the bars the same colour you'll need to use CSS (unless you declare a pattern). It will not be generated to look identical to that in C3.js without extra manipulation of the code.
You can edit data around on https://c3js.org/samples/chart_bar.html to see how your data would look if you would like to.
You can add
color: {
pattern: ['#0e9999','#06754b','#eb7a02','#9734b0']
},
To your generation of the chart with whatever pattern of colours you would like (you can have as many or as few colours as you would like. I just happened to need 4 for my code)
In your case you can do
color: {
pattern: ['#FFA500']
},
In data you can declare an 'x' to have your supplied x labels
data: {
x: 'x',
columns: [your data goes here including x labels],
type: 'bar'
}
I'm not sure about the other libraries but C3.js is essentially a wrapper for D3.js so anything that can be done in one is most likely theoretically possible in both. C3.js is just easier to understand the code for. (see: https://c3js.org/)
Update:
If this wasn't clear enough you can do:
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '1',' .','3','. ','. ','6'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
}},
color: {
pattern: ['#FFA500']
},
bar: {
space: 0.05, //sets the gap between the bars
width: {ratio:1}
},
grid: { //the lines (remove if you didn't want grid lines)
y: {
show: true
},
x: {
show: true
}
},
legend: { //hides the legends
show: false
}
});
To do something similar to what you have (you'll need to edit the data to be the exact data you want but that'll be a simple edit on your part)
If you don't want dashed grid lines add:
.c3 .c3-grid line {
stroke-dasharray: 0!important;
stroke: #808080 !important;
}
to your CSS file
I use recharts with React. I think it's the best charting library out there.
I'm currently working with Chart.js, and I need to change between two differents datasets. To do this I just change the dataset and use the Update function.
The main problem is that when you change multiple times between the datasets, the animation dissapears and it looks horrible.
Here you can see what I'm talking about and my code.
Does somebody know how could I fix it?
Thanks a lot!
And here is my code, in case the link doesn't work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<!-- import plugin script -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js'></script>
</head>
<body>
<!-- bar chart canvas element -->
<canvas id="chart" width="600" height="400"></canvas>
<button onclick="manageCharts()" id="chartDataButton">Chart 2</button>
</body>
</html>
And the javascript code
Chart.defaults.global.responsive = false;
var chartData1 = {
labels : ["L1", "l2", "l3", "l4"],
datasets : [{
label: "LEGEND",
data : [13, 23, 9, 4],
backgroundColor: "#FF88CC",
borderColor: "#000000",
borderWidth: 1,
}]
}
var chartData2 = {
labels : ["L11", "L12"],
datasets : [{
label: '{{ legend }}',
data : [7, 1],
backgroundColor: "#FEFE65",
borderColor: "#00FFFF",
borderWidth: 2,
}]
}
var pieChartOptions = {
rotation: -Math.PI,
cutoutPercentage: 30,
circumference: Math.PI,
legend: {
position: 'left'
},
animation: {
animateRotate: true,
animateScale: false
}
};
// get chart canvas
var ctx = document.getElementById("chart").getContext("2d");
var pieChart = new Chart(ctx, {
type: 'pie',
data: chartData1,
options: pieChartOptions
});
function manageCharts(){
var button = document.getElementById("chartDataButton");
var previousData = pieChart.config.data;
if(previousData == chartData1){
button.textContent = "Chart 1";
showChart2Data();
}else if(previousData == chartData2){
button.textContent = "Chart 2";
showChart1Data();
}
}
function showChart2Data(){
pieChart.config.data = chartData2;
pieChart.update();
};
function showChart1Data(){
pieChart.config.data = chartData1;
pieChart.update();
};
I've updated your code in this jsfiddle to use the destroy() function.
Using update() doesn't seem reset the animation.
Using destroy() removes the chart and then your code will recreate the new chart (and animation)
PS: Sorry for changing to jsfiddle from JS Bin. I was having troubles editing in JS Bin.
I have an old web project that uses prototype.js and I'm trying to add charting to it using C3.
Unfortunately there's an error since prototype seems to add a bunch of methods to arrays and this specific method in c3.js checkValueInTargets uses Object.keys which grabs all the random methods in the array and then throws an error.
Is there a way to "hide" my charting code from prototype or a way to use the default JS arrays?
I can't remove or upgrade prototype unfortunately.
Thanks
sample project:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
http://jsfiddle.net/Yq3DW/269/
One easy way to fix it would be to move the prototype script loading to after c3.js chart initialization call.
...
<link href="lib/c3.js/c3.css" rel="stylesheet" />
</head>
<body>
...
<div id="chart"></div>
...
<script src="lib/d3/d3.js" charset="utf-8"></script>
<script src="lib/c3.js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
</script>
<script src="lib/prototype/prototype.js"></script>
<!-- prototype code --->
</body>
If this is not possible, you could have a script block to store a reference to the native Object.keys and swap it out and back again when calling the C3 code, like so
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<script>
var originalKeys = Object.keys;
</script>
<script src="lib/prototype/prototype.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="lib/d3/d3.js" charset="utf-8"></script>
<script src="lib/c3.js/c3.js"></script>
<link href="lib/c3.js/c3.css" rel="stylesheet" />
<script>
var prototypeKeys = Object.keys;
Object.keys = originalKeys;
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
Object.keys = prototypeKeys;
</script>
</body>
</html>
Luckily tooltips don't cause any problems
Fiddle - http://jsfiddle.net/td433xt1/