I'm trying to use a pie Highchart to change the series of a line chart. It worked as expected until the different series to choose from have different number of elements. I don't know how to update the values of the series AND the categories shown on xAxis.
Html code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container-pie" style="height: 300px;"></div>
<div id="container-line" style="height: 300px;"></div>
JS code:
Highcharts.setOptions({
credits: {
enabled: false
}
});
var circuits = {
linechart_Mar_22: {
name: 'Circuit 1',
areaName: 'First floor',
color: Highcharts.getOptions().colors[0],
data: [3, 15, 26, 13, 23, 91, 13],
ents: ["A", "B", "D", "E", "F", "G", "H"]
},
linechart_Dec_21: {
name: 'Circuit 2',
areaName: 'Second floor',
color: Highcharts.getOptions().colors[1],
data: [92, 34, 56, 88, 18, 23],
ents: ["A", "B", "C", "D", "E", "F"]
},
linechart_Sep_21: {
name: 'Circuit 3',
areaName: 'Parking',
color: Highcharts.getOptions().colors[2],
data: [29, 12, 53, 19, 29, 10, 34, 77],
ents: ["A", "B", "C", "D", "E", "F", "G", "H"]
},
linechart_Jun_21: {
name: 'Circuit 4',
areaName: 'Roof',
color: Highcharts.getOptions().colors[3],
data: [88, 92, 91, 23, 50, 29, 31, 10],
ents: ["A", "B", "C", "D", "E", "F", "G", "H"]
}
};
Highcharts.chart('container-pie', {
chart: {
type: 'pie'
},
title: {
text: 'Areas'
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var circuitName = this.name,
circuitSeries = [];
for (var name in circuits) {
circuits[name].areaName === circuitName ? circuitSeries.push(circuits[name]) : null;
}
if (Highcharts.charts.length === 1) {
Highcharts.chart('container-line', {
chart: {
type: 'column'
},
title: {
text: 'Circuit'
},
series: circuitSeries,
xAxis: {
type: 'category',
tickInterval: 1,
gridLineWidth:1,
labels: {
enabled: true, step:1,
rotation: 90
},
categories: circuits[name].ents
},
});
} else {
Highcharts.charts[1].update({
series: circuitSeries
});
}
}
}
}
}
},
series: [{
name: 'Areas',
data: [{
name: 'First floor',
y: 1
}, {
name: 'Second floor',
y: 1
}, {
name: 'Parking',
y: 1
}, {
name: 'Roof',
y: 1
}]
}]
});
You can use this fiddle to see what happens.
http://jsfiddle.net/cjxm0huz/
Related
I have a line chart that has a minimum value for the Y-axis. Sometimes the data goes under this minimum value and I don't want to stretch the chart because of this one point, but I want to have the tooltip to show the data when I move my cursor to the value in the X-axis.
I've created a codepen about the problem: codepen
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["R", "B", "Y", "G", "P", "O"],
datasets: [
{
label: "# of Votes",
data: [12, 13, 11, 12, 9, 13]
}
]
},
options: {
scales: {
y: {
min: 10
},
},
interaction: {
intersect: false,
mode: 'nearest',
axis: 'x',
},
}
});
You can define interaction.mode: 'x' as explained here.
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: "line",
data: {
labels: ["R", "B", "Y", "G", "P", "O"],
datasets: [{
label: "# of Votes",
data: [12, 13, 11, 12, 9, 13]
}]
},
options: {
scales: {
y: {
min: 10
}
},
interaction: {
intersect: false,
mode: 'x'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
I am trying to create pdf with JavaScript using pdfmake. My question is I have array but I cannot loop array.
PDF
function printPDF() {
var activities = [
['Work', 9],
['Eat', 1],
['Commute', 2],
['Play Game', 1],
['Sleep', 7]
];
var dd = {
content: [{
text: 'Teslim Formu',
style: 'header'
},
{
style: 'tableExample',
table: {
body: [
[{
text: 'Toplam Adet',
style: 'subheader'
}, {
text: 'Etiket Değeri',
style: 'subheader'
}, {
text: 'Toplam Ağırlık',
style: 'subheader'
}, {
text: 'Sigorta Değeri',
style: 'subheader'
}, {
text: 'Mağaza Adı',
style: 'subheader'
}, {
text: 'Mağaza Yetkilisi',
style: 'subheader'
}],
["a", "b", "c", "d", "f", "g", "f"]
]
}
},
{
text: 'Ürün Bilgisi',
style: 'margin-header'
},
{
style: 'tableExample',
table: {
body: [
[{
text: 'Adet',
style: 'subheader'
}, {
text: 'Barkod No',
style: 'subheader'
}],
activities.flatMap((item) => {
return [item[0], item[1]]
})
]
}
},
],
styles: {
header: {
fontSize: 14,
bold: true,
margin: [0, 0, 0, 10]
},
'margin-header': {
fontSize: 14,
bold: true,
margin: [0, 20, 0, 10]
},
subheader: {
fontSize: 12,
bold: true,
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
}
},
defaultStyle: {
// alignment: 'justify'
}
}
pdfMake.createPdf(dd).open();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js"></script>
<button class="convertPdf" onclick="printPDF()">PDF</button>
This is my code.
I am trying to do something like this. But It doesn't allow me to insert more than 1 array. It allows if my activities array just ['Work',9]. But If I add array more than Work 9 it gives me error : "Cannot read properties of undefined (reading '_calcWidth')".
Your body's first array has 6 elements, while the second one has 7 ('a', 'b' ...).
As seen in pdfmake's playground, the table body's arrays cannot have different sizes :
table: {
body: [
["A", "B", "C"],
["D", "E"], (error: pdfmake expected 3 elems here)
],
}
As a workaround, you can add an empty string to the smaller arrays, to equalize :
table: {
body: [
["A", "B", "C"],
["C", "D", ""],
],
}
How to use the visualMap to color lines based on their value on the X-axis. I want to color red for all values greater than 23 and green for all values greater than 23.
My script looks like the following:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main_chart'));
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
visualmap: {
show: false,
dimension: 0,
min: 0,
max: 10,
range: [0, 23],
inRange: {
color: 'red'
},
outOfRange: {
color: 'green'
}
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html
Unfortunately this doesn't work like this.
In general, there is a good description somewhere how this works with the visualMap, in the official documentary of echarts I don't get it.
I assume you want to color red for all values less than 23 and green for all values greater than 23.
you can use visualMap like this
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}],
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>
I am using Kendo charts. I need to show the value of respective stacked bar chart in the below format. Please find the below image and JSfiddle URL for reference.
Sample Code
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
data: [10, 10, 10, 10, 10],
color: "#32CD32",
}, {
name: "BB",
data: [30, 10, 10, 10, 45],
color: "#0000FF",
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
categories: ['A', 'B', 'C', 'D', 'E'],
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
Expected output
You could use data binding and label templates. Bind to:
var data = [
{"Category": "A", "AA": 10, "BB": 30},
{"Category": "B", "AA": 10, "BB": 10},
{"Category": "C", "AA": 10, "BB": 10},
{"Category": "D", "AA": 10, "BB": 10},
{"Category": "E", "AA": 10, "BB": 45}
];
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
DEMO
$(function () {
var data = {
animal: [2, 3, 1, 6],
vehicle: [03, 15, 14],
fruits: [20, 50, 100]
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
bar: {
point: {
events: {
click: secondChart
}
}
}
},
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 34,
name: 'vehicle'
}, {
y: 67,
name: 'fruits'
}]
}]
});
function secondChart(e) {
var point = this;
$("#detail").highcharts({
chart: {
type: 'column'
},
plotOptions: {
series: {
point: {
events: {
click: thirdChart
}
}
}
},
title: {
text: point.name + ':' + point.y
},
series: [{
name: 'Chart 2',
data: data[point.name]
}]
});
}
function thirdChart(e) {
var data = {
animal: [1, 6, 3, 5],
vehicle: [01, 19, 24],
fruits: [30, 80, 100],
birds: [20, 40, 80]
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'sub_detail',
type: 'column'
},
plotOptions: {
bar: {
point: {
events: {
click: function () {
alert('Category: ');
}
}
}
}
},
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 50,
name: 'vehicle'
}, {
y: 167,
name: 'fruits'
}, {
y: 128,
name: 'birds'
}]
}]
});
}
});
When I click the second bar I want different graph values to populate the third graph. I can't get figure out the problem. On clicking the second graph I am getting the same values on third graph.
I have three divs:
div id container
div id detail
div id sub_detail
This is how you add data for a second chart:
series: [{
name: 'Chart 2',
data: data[point.name]
}]
And this is code for third chart:
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 50,
name: 'vehicle'
}, {
y: 167,
name: 'fruits'
}, {
y: 128,
name: 'birds'
}]
}]
I hope, that you can see the difference?
Should be:
series: [{
name: 'Chart 3',
data: data[this.name]
}]