Related
I use Chart.js v4.2.1
<html>
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="barchart"></canvas>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('barchart');
var chart = new Chart(canvas,
{
type: 'bar',
data:
{
labels: ["Audi", "VW", "KIA"],
datasets:
[
{
label: "Cars",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
data: [2601, 4769, 602],
},
],
},
});
</script>
</html>
To get number of bars I execute chart.data.datasets[0].data.length and get 3.
To get the Y-value for the first bar I do chart.data.datasets[0].data[0] and get 2601.
How do I get the X-values (X-coordinates) for the bars?
(I am not interested in using any plugin).
Added:
Here is a sample where chart.scales.x is defined but chart.scales.y is not.
This happen when I add yAxisID which I need in my complete work.
<html>
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="barchart"></canvas>
<div id="debug"></div>
</div>
<script type="text/javascript">
var canvas = document.getElementById('barchart');
var chart = new Chart(canvas,
{
type: 'bar',
data:
{
labels: ["Audi", "VW", "KIA"],
datasets:
[
{
label: "Cars",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
data: [2601, 4769, 602],
yAxisID: "cars",
},
],
},
options:
{
scales:
{
cars:
{
position: "left",
ticks:
{
color: "red",
},
grid:
{
display: true,
},
},
},
},
});
var dataSets = chart.data.datasets;
var xPos = chart.scales.x.getPixelForValue(dataSets[0].data[0]);
try
{
var yPos = chart.scales.cars.getPixelForValue(dataSets[0].data[0]); // --> here y is undefined
document.getElementById("debug").innerHTML = "xPos=" + xPos + ", yPos=" + yPos;
}
catch(e)
{
document.getElementById("debug").innerHTML = "xPos=" + xPos + "<br>" + e;
}
</script>
</body>
</html>
You can use the following code: chartInstance.scales.x.getPixelForValue(chart instance.data.labels[labelIndex]
I want to update a chart.
https://jsfiddle.net/q2hLgk9z/2/
the original idea comes from here:https://jsfiddle.net/wxzpk9dn/2/
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
</head>
<div>
<input type="radio" id="columnGraph" name="graph" value="line" />
<label for="columnGraph">Line</label>
</div>
<div>
<input type="radio" id="barGraph" name="graph" value="line1" checked />
<label for="barGraph">Barra</label>
</div>
<div id="chartwind" ></div> </pre>
and script
<script>
// CHART OPTIONS by chart type
let chartOptions = {
line1: {
chart: { type: "line" },
series: [
{ name: "One", type: "line", data: [15, 20] },
{ name: "Two", type: "line", data: [30, 25] },
],
labels: ["2017", "2018"],
stroke: { width: 2 },
},
line: {
chart: { type: "line" },
series: [
{ name: "2017", type: "line", data: [65, 20] },
{ name: "2018", type: "line", data: [15, 25] },
],
labels: ["from", "to"],
stroke: { width: 5 },
},
};
//select the radiobuttons
var chartTypeControlButtons = document.querySelectorAll(
'input[type=radio][name="graphicType"]'
),
chartTypeControlButtonInitChecked = document.querySelectorAll(
'input[type=radio][name="graphicType"]:checked'
);
// Chart type changing (HANDLER)
//switch between the graphs
function changeHandler(event) {
let selectedChartType = this.value,
updatedChartOptions = chartOptions[selectedChartType];
chart.updateOptions(updatedChartOptions);
}
//Listener for the radios
Array.prototype.forEach.call(chartTypeControlButtons, function (radio) {
radio.addEventListener("change", changeHandler);
});
// Render the chart with initial options and then
let initialChartType = chartTypeControlButtonInitChecked[0].value,
// think of it as a preparing the ground
// USE 'bar' as the type. If you choose 'pie' ... you will get glithes
initialChartOptions = {
chart: {
width: 350,
type: "line",
},
series: [],
};
// Create chart with init options
// Note that the link to the chart object is in the GLOBAL scope
var chart = new ApexCharts(
document.getElementById("chartwind"),
initialChartOptions
);
chart.render(); // Firstly, prepare the ground
chart.updateOptions(chartOptions[initialChartType]); // Secondly, draw we want
</script>
<div id="chartwind"></div>
</body>
In Jsfiddle it is working but not an my PC.
I load the apexchartversion as fiddle (3.18.1) - but this does not matter.^It is the same issue with the latest version.
I get 2 errormessages:
in the start: after chart.render:Uncaught (in promise) Error: Element not found (maybe because series ist []. But it does not change with values.
then in the update mode: Uncaught TypeError: Cannot read property 'filter' of undefined
Do you have an idea, what I can try on my machine? (I have the same issue on different browsers).
Maybe you have an idea about the difference to fiddle?
Just define your script file path after your <div id="chartwind"></div>.
It will work.
Example:
index.html
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
</head>
<div>
<input type="radio" id="columnGraph" name="graph" value="line" />
<label for="columnGraph">Line</label>
</div>
<div>
<input type="radio" id="barGraph" name="graph" value="line1" checked />
<label for="barGraph">Barra</label>
</div>
<div id="chartwind" ></div>
<script src="./apex.js"></script>
apex.js
let chartOptions = {
line1: {
chart: {
type: "line"
},
series: [{
name: "One",
type: "line",
data: [15, 20]
},
{
name: "Two",
type: "line",
data: [30, 25]
},
],
labels: ["2017", "2018"],
stroke: {
width: 2
},
},
line: {
chart: {
type: "line"
},
series: [{
name: "2017",
type: "line",
data: [65, 20]
},
{
name: "2018",
type: "line",
data: [15, 25]
},
],
labels: ["from", "to"],
stroke: {
width: 5
},
},
};
var chartTypeControlButtons = document.querySelectorAll(
'input[type=radio][name="graph"]'
),
chartTypeControlButtonInitChecked = document.querySelectorAll(
'input[type=radio][name="graph"]:checked'
);
//console.log("checked", chartTypeControlButtonInitChecked.length);
//console.log("radios", chartTypeControlButtons.length);
function changeHandler(event) {
let selectedChartType = this.value,
updatedChartOptions = chartOptions[selectedChartType];
//console.log("change");
chart.updateOptions(updatedChartOptions);
}
Array.prototype.forEach.call(chartTypeControlButtons, function(radio) {
radio.addEventListener("change", changeHandler);
});
// Render the chart with initial options and then
// you can update it with ANY wished options
// let initialChartType = $(chartTypeControlButtonInitChecked).val(),
//console.log("text", chartTypeControlButtonInitChecked[0].value);
let initialChartType = chartTypeControlButtonInitChecked[0].value,
// think of it as a preparing the ground
// USE 'bar' as the type. If you choose 'pie' ... you will get glithes
initialChartOptions = {
chart: {
width: 350,
type: "line",
},
labels: ["from", "to"],
stroke: {
width: 2
},
series: [],
};
// Create chart with init options
// Note that the link to the chart object is in the GLOBAL scope
var chart = new ApexCharts(
document.getElementById("chartwind"),
initialChartOptions
);
//console.log("initialChartType", initialChartType);
chart.render(); // Firstly, prepare the ground
//console.log(chartOptions[initialChartType]);
chart.updateOptions(chartOptions[initialChartType]); // Secondly, draw we want
// chart.updateOptions(newOptions); Redraw we want
I want to put gaps between bars.
I tried ;
...
bar:{
width: {
ratio: 0.5
}
},
...
The code above didn't work for me.
The question is: why doesn't it work or how can I make it work?
Try some thing like:
var colors = ['#1f77b4', '#aec7e8', '#ff7f0e'];
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['value: ', 20, 14, 3]
],
type: 'bar',
labels: true,
color: function(color, d) {
return colors[d.index];
}
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3']
}
},
bar: {
width: {
ratio: 0.5,
}
},
grid: {
focus: {
show: false
}
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
</head>
<body>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.js"></script>
</body>
</html>
I am facing an issue with exporting a column chart with scroll bar enabled which is not exporting a full chart after a scroll. It works for the first time, but when I scroll to the right or left and then when I export, the export is not happening completely.
Here is the sample.
var processedDataArray = [
{"Series_1_Value":1054237.31,"Series_2_Value":297367.88,"Series_3_Value":955472.31, "other":123450.45, "category":"CATEGORY-1"},
{"Series_1_Value":1914955.84,"Series_2_Value":472603.94,"Series_3_Value":1717425.84,"other":234560.45, "category":"CATEGORY-2"},
{"Series_1_Value":1172527.75,"Series_2_Value":368143.09,"Series_3_Value":1073762.75,"other":345670.45, "category":"CATEGORY-3"},
{"Series_1_Value":908568.43,"Series_2_Value":309490.05,"Series_3_Value":809803.43,"other":789010.45, "category":"CATEGORY-4"},
{"Series_1_Value":8001718.08,"Series_2_Value":5983055.85,"Series_3_Value":7112833.08,"other":890102.45, "category":"CATEGORY-5"},
{"Series_1_Value":1060572.17,"Series_2_Value":317503.11,"Series_3_Value":961807.17,"other":901230.45, "category":"CATEGORY-6"},
{"Series_1_Value":2484203.07,"Series_2_Value":1189924.57,"Series_3_Value":2187908.07,"other":435260.45, "category":"CATEGORY-7"},
{"Series_1_Value":6070895.44,"Series_2_Value":2722014.27,"Series_3_Value":5379540.44,"other":678900.45, "category":"CATEGORY-8"}
];
var series1DataArray = [];
var series2DataArray = [];
var series3DataArray = [];
var series4DataArray = [];
var categories = [];
var seriesNms = ['Series 1', 'Series 2', 'Series 3', 'Other'];
var _colors = ['#2F7ED8', '#915612', '#8BBC21', '#AA86F2', '#9054B6', '#76F0A3', '#A98835', '#09ACB6'];
for (i = 0; i < processedDataArray.length; i++) {
var dataObject = processedDataArray[i];
categories.push(dataObject['category']);
series1DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['Series_1_Value'])
});
series2DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['Series_2_Value'])
});
series3DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['Series_3_Value'])
});
series4DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['other'])
});
}
$(function() {
new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'colChart',
borderColor: '#000000',
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .1)',
plotBorderColor: '#CCCCCC',
plotBorderWidth: 1,
zoomType: 'xy',
width: 960,
events: {
load: function() {
alert('Chart has loaded with exporting option ' + this.options.exporting.enabled + ", min:" + this.xAxis[0].min + ", max:" + this.xAxis[0].max + ", categories.length=" + categories.length);
}
}
},
scrollbar: {
enabled: true
},
colors: _colors,
exporting: {
enabled: true,
sourceWidth: 960,
sourceHeight: 400,
chartOptions: {
xAxis: [{
categories: categories,
max: categories.length - 1
}],
scrollbar: {
enabled: false
}
}
},
yAxis: {
title: {
text: 'Value($)'
}
},
xAxis: {
categories: categories,
max: categories.length > 5 ? 5 : categories.length - 1
},
plotOptions: {
series: {
pointPadding: 0.05,
groupPadding: 0.15
}
},
title: {
text: 'Column Chart',
align: 'center'
},
series: [{
name: seriesNms[0],
data: series1DataArray
}, {
name: seriesNms[1],
data: series2DataArray
}, {
name: seriesNms[2],
data: series3DataArray
}, {
name: seriesNms[3],
data: series4DataArray
}],
credits: {
enabled: false
}
}); //end of Chart const
}); //end of function...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="colChart"></div>
</body>
</html>
How to resolve the issue?. If you see the pop-up dialog it is not displaying the same "export enabled" boolean value.
Adding min and minRange to your exporting.chartOptions.xAxis seems to yield positive results. This does require max to still be there, and seemingly it gives varying results if any of those three are missing.
For example (updated JSFiddle):
exporting:{
enabled: true,
sourceWidth: 960,
sourceHeight: 400,
chartOptions: {
xAxis: [{
categories: categories,
min: 0, // Added for fix
minRange: categories.length-1, // Added for fix
max: categories.length-1
}],
scrollbar:{
enabled: false
}
}
}
Hopefully this resolves your issue. As to why, I do not know.
I have a chart that I would like to update whenever a form on the same page is submitted. The var chart = new Highcharts.Chart(options) expression works fine by itself (it draws a chart). When I put it inside the callback function for the .click() event, when I click the corresponding submit button, the updated plot flashes on the screen for a second and is then erased and replaced by the original plot.
I'm so close to doing what I need to, but I'm stumped by this. Thanks for your help.
Libraries:
<link type="text/css" href="css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
Here is the Javascript:
<script>
$(function() {
$("#lines").val(),colors: $("#colors").val(),},
var options = {
chart : {
renderTo : 'container',
defaultSeriesType: 'line',
zoomType: 'xy' },
title : { text : 'Foo' },
xAxis: { title: { text: 'x label' } },
yAxis: { title: { text: 'y label' } },
series : {}
}
var chart = new Highcharts.Chart(options);
$( "#submit" ).click(function() {
options.series = [{"name": 10402, "color": "rgba(255,139,0,0.5)", "data": [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}];
var chart = new Highcharts.Chart(options);
});
});
</script>
Here is the HTML body:
<body>
<form name="chartform" id="chartform">
<input type="submit" id="submit" /><br />
</form>
<div id="container" style="width: 100%; height: 800px"></div>
</body>
This is driving me nuts.
This is working fine for me:
var chart;
$(document).ready(function() {
options ={
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
zoomType: 'xy'
},
title : { text : 'Foo' },
xAxis: { title: { text: 'x label' } },
yAxis: { title: { text: 'y label' } },
series: {}
};
chart = new Highcharts.Chart(options);
series3 = [{"name": 10402, "color": "rgba(255,139,0,0.5)", data: [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}];
series2 = [{
name: '1042',
color: "rgba(255,139,0,0.5)",
data: [[ 146,55.8 ],[150,60.9]]
}, {
name: '10403',
color: "rgba(255,255,0,0.5)",
data: [[ 130,25.8 ],[150,54.9]]
}];
$( "#chartform" ).submit(function() {
options.series = series3;
var chart = new Highcharts.Chart(options);
return false;
});
});
EDIT: I believe the problem is that you are submitting the form. Do a return false and use submit handler instead of click. You can check it live in: http://jsfiddle.net/bCFHL/157/