create updateBarChart(selectedDimension) function then
how to Create a bar chart that displays one of the numerical dimensions associated with each World Cup:
Average Attendance
Number of Goals
Number of Games
Number of Participants
Implement the bar chart such that it displays the dimension specified in the selectedDimension parameter.
then the bar-chart updates the data it shows depending on the selection of the drop-down box.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<header>
<h1>Exploring FIFA World Cup Statistics</h1>
</header>
<div id="bar-chart" class="view">
<h2 class="">Bar Chart</h2>
<div id="plot-selector">
<label>Plot:</label>
<select id="dataset" onchange="chooseData()">
<option selected value="attendance">Attendance</option>
<option value="teams">Teams</option>
<option value="matches">Matches</option>
<option value="goals">Goals</option>
</select>
</div>
</div>
<div id="container" style="width:100%;max-width:900px;"></div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("container", {
animationEnabled: true,
theme: "light1",
title: {
text: ""
},
axisY: {
title: "Attendance"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "Years",
dataPoints: [
{ y: 32808, label: "1930" },
{ y: 21352, label: "1934" },
{ y: 20872, label: "1938" },
{ y: 47511, label: "1950" },
{ y: 29561, label: "1954" },
{ y: 23423, label: "1958" },
{ y: 27911, label: "1962" },
{ y: 48847, label: "1966" },
{ y: 50124, label: "1970" },
{ y: 49098, label: "1974" },
{ y: 40678, label: "1978" },
{ y: 40571, label: "1982" },
{ y: 46039, label: "1986" },
{ y: 48388, label: "1990" },
{ y: 68991, label: "1994" },
{ y: 43517, label: "1998" },
{ y: 42268, label: "2002" },
{ y: 52491, label: "2006" },
{ y: 49669, label: "2010" },
{ y: 52918, label: "2014" }
]
}]
});
chart.render();
}
</script>
</body>
Make your chooseData() function do something like this:
if select value is attendance
var chart = new CanvasJS.Chart("container", {options_and_data_for_attendance});
else if select value is teams
var chart = new CanvasJS.Chart("container", {options_and_data_for_teams});
else if select value is matches
var chart = new CanvasJS.Chart("container", {options_and_data_for_matches});
else // select value is goals
var chart = new CanvasJS.Chart("container", {options_and_data_for_goals});
chart.render();
One of the ways, as described above is to change your ChooseData() function to switch between the charts, with the respective dropdowns.
Another way could be to add all the datasets into different Js arrays, and with different dropdowns, push the appropriate array into the datapoints object, hence effectively switching between the arrays, keeping one single chart.
Related
I was wondering how can you achieve the following:
I'm using a Date format of year and month ( i.e 2022-01), but Plotly is not providing an option to have a simple date value for the x Axis, Chart.JS actually allows you to define the date by month, so what is happening is that if you zoom in to one month, then you can see days and even hours, so how do I change that?
Secondly, is there a way to control how the X-axis is displayed?, for example perhaps when you have more than one year is better to show quarters, but as you zoom in for a 1-year period, then I would like to see every month display?, but I don't want to have more granularity, I would like to have only the month display in the graph
https://jsfiddle.net/60ucqz8w/
var Deals = {
x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
y: [11241, 234021, 26544, 28856, 70463, 28856, 155019],
name: 'Deals',
type: 'bar',
marker: {
color: 'rgb(0,131,117)',
}
};
var Leads = {
x: ['2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-11', '2023-01', '2023-02'],
y: [7255, 5155, 61950, 63000, 5155, 19845, 20905, 5155, 15750],
name: 'Leads',
type: 'bar',
marker: {
color: 'rgb(160,220,210)',
}
};
var Cumulative = {
x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
y: [11241, 245262, 271806, 300662, 371125, 399981, 555000],
name: 'Cumulative Deals',
type: 'line',
marker: {
color: 'rgb(0,131,117)',
}
};
var data = [Deals,Leads,Cumulative];
var layout = {
title: "Sales Forecast",
barmode: 'stack',
xaxis: {
autorange: true,
rangeselector: {
buttons: [{
step: 'all'
},
{
count: 1,
label: 'YTD',
step: 'year',
stepmode: 'todate'
},
{
count: 6,
label: '6m',
step: 'month',
stepmode: 'todate'
}]},
rangeslider: { },
type: 'date',
tickfont:{
size: 14
},
},
yaxis: {
tickfont:{size: 14}
}
};
Plotly.newPlot('DivBarChart', data,layout);```
You code was mostly right the only thing that needed fixing is the scrollZoom: true. The code won't work unless you put scrollZoom: true because the function won't be active unless specified. You need this so you can enable it for your graph. You need to select the timeframe using you mouse. Click and drag to see your timeframe.
var Deals = {
x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
y: [11241, 234021, 26544, 28856, 70463, 28856, 155019],
name: 'Deals',
type: 'bar',
marker: {
color: 'rgb(0,131,117)',
}
};
var Leads = {
x: ['2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-11', '2023-01', '2023-02'],
y: [7255, 5155, 61950, 63000, 5155, 19845, 20905, 5155, 15750],
name: 'Leads',
type: 'bar',
marker: {
color: 'rgb(160,220,210)',
}
};
var Cumulative = {
x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
y: [11241, 245262, 271806, 300662, 371125, 399981, 555000],
name: 'Cumulative Deals',
type: 'line',
marker: {
color: 'rgb(0,131,117)',
}
};
var data = [Deals, Leads, Cumulative];
var layout = {
title: "Sales Forecast",
barmode: 'stack',
};
Plotly.newPlot('DivBarChart', data, layout, {
scrollZoom: true
});
<div class="col-sm-4">
<div id='DivBarChart' class="container"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</div>
See scroll and zoom in or plotly.js docs for more information.
I want to update my Tooltip in my canvas js Chart without reloading the whole chart.
let arr = this.graph_arr;
let a = [];
let b = [];
arr.map((val) => {
val.data.map((val2) => {
b.push({
x: new Date(val2.date),
y: val2.revenue,
cn: val2.check_in,
rp: val2.rev_par,
arr: val2.avrr,
adr: val2.avg_daily_rate,
date: moment(val2.date).format('Do, MMMM'),
day: moment(val2.date).format('dddd')
})
})
a.push({
type: "spline",
name: val.channel_img.split('.')[0].toUpperCase(),
markerSize: 1,
showInLegend: true,
dataPoints: b,
label: val.channel_img,
})
b = [];
})
let chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
axisY2: {
valueFormatString: "1'%'"
},
axisY: {
suffix: "%"
},
axisX: {
gridThickness: 1,
valueFormatString: "DD/MMM"
},
legend: {
cursor: "pointer",
itemclick: this.toogleDataSeries
},
toolTip: {
shared: false,
content: this.selected == 'arr' ?
`<div style='\"'width: 210px;'\"'>ARR: {arr}, date: {date} </div>` :
this.selected == 'adr' ?
`<div style='\"'width: 210px;'\"'>ARR: {arr}, date: {date] </div>` : null,
cornerRadius: '8'
},
data: a
});
chart.render();
I have this Custom Tooltip. I want to change data in it from a dropdown without reloading. Currently I am using ternary operator and reloading chart. I want to change Tooltip content without reloading when user select from dropdown.
You can programmatically show toolip by using showAtX method. Below is an example:
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Show Tooltip based on dropdown"
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});
chart.render();
var xVal = document.getElementById("xVal");
//Pass dataPoints as option to drop-down
for(var i=0; i<chart.options.data[0].dataPoints.length;i++){
var xValOption = document.createElement("option");
xValOption.text = chart.options.data[0].dataPoints[i].x = chart.options.data[0].dataPoints[i].x;
xVal.appendChild(xValOption);
}
xVal.addEventListener( "change", showTooltip);
//
function showTooltip(e){
if(xVal.value)
chart.toolTip.showAtX(Number(xVal.value));
else
chart.toolTip.hide();
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 80%; float: left"></div>
<div style="float: right; width: 15%">
Show Tooltip for <select id="xVal">
<option>Select</option>
</select>
</div>
I'm using CanvasJS to create a stacked bar chart by week. Our weeks start on Saturday, but CanvasJS seems to default to weeks starting on Sunday. Thus, the labels for this chart start on 11/3 rather than 11/2 as I need.
I found this post on the CanvasJS forum which suggests that setting minimum and maximum might help, but when I tried that, it merely shifted the plot area (as you'd expect), but the labels still reflect Sundays, not Saturdays
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Evening Sales of a Restaurant"
},
axisX: {
intervalType: "week",
interval: 1
},
data: [
{
type: "stackedBar",
dataPoints: [
{ x: new Date("11/2/2019"), y: 71 },
{ x: new Date("11/9/2019"), y: 55},
{ x: new Date("11/16/2019"), y: 50 },
{ x: new Date("11/23/2019"), y: 65 },
{ x: new Date("11/30/2019"), y: 95 }
]
},
{
type: "stackedBar",
dataPoints: [
{ x: new Date("11/2/2019"), y: 20 },
{ x: new Date("11/9/2019"), y: 35},
{ x: new Date("11/16/2019"), y: 30 },
{ x: new Date("11/23/2019"), y: 45 },
{ x: new Date("11/30/2019"), y: 25 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
From CanvasJS:
It’s not possible to control the starting point of label, as of now.
We will reconsider this behaviour in future releases.
https://canvasjs.com/forums/topic/how-to-label-axisx-by-week-starting-on-saturday/
There are multiple charts on one page.
Each chart line is common.
I want to display a legend that is common to multiple charts like the figure.It shows and hides all chart lines with OnClick like the default legend.
THIS PICT IS FAKE
Is that possible? how?
I had tried Chart.js sync legend toggle on multiple charts, One legend, multiple charts Chart JS and etc.
But, those solutions have one chart with legend, and that legend affects other charts.
Should I hide the chart and show only the legend?
Should I draw a chart with no data?
I would be grad if you could tell me
HTML
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<div>
<canvas id="myChartA"></canvas>
</div>
<div>
<canvas id="myChartB"></canvas>
</div>
JS
var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");
let data_A1 = [{
x: "2019-01-01 00:01:38",
y: "13.0"
},
{
x: "2019-01-01 01:01:39",
y: "11.0"
},
{
x: "2019-01-01 02:01:40",
y: "16.0"
},
{
x: "2019-01-01 03:01:41",
y: "15.0"
},
{
x: "2019-01-01 04:01:42",
y: "14.0"
}
];
var data_A2 = [{
x: "2019-01-01 00:01:42",
y: 14.671
}, {
x: "2019-01-01 01:01:42",
y: 13.691
}, {
x: "2019-01-01 02:01:42",
y: 16.691
}, {
x: "2019-01-01 03:01:42",
y: 17.691
}, {
x: "2019-01-01 04:01:42",
y: 18.691
}];
let data_B1 = [{
x: "2019-01-02 00:01:38",
y: "12.0"
},
{
x: "2019-01-02 01:01:39",
y: "11.0"
},
{
x: "2019-01-02 02:01:40",
y: "13.0"
},
{
x: "2019-01-02 03:01:41",
y: "14.0"
},
{
x: "2019-01-02 04:01:42",
y: "16.0"
}
];
var data_B2 = [{
x: "2019-01-02 00:00:00",
y: 14.671
}, {
x: "2019-01-02 01:01:42",
y: 13.691
}, {
x: "2019-01-02 02:01:42",
y: 16.691
}, {
x: "2019-01-02 03:01:42",
y: 15.691
}, {
x: "2019-01-02 04:01:42",
y: 14.691
}];
var myChartA = new Chart(ctxA, {
type: 'line',
data: {
datasets: [{
label: '1st Data',
data: data_A1,
borderColor: '#0f0',
showLine: true
}, {
label: '2nd Data',
data: data_A2,
borderColor: '#f00',
showLine: true
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormat: 'h:mm',
}
}]
}
}
});
var myChartB = new Chart(ctxB, {
type: 'line',
data: {
datasets: [{
label: '1st Data',
data: data_B1,
borderColor: '#0f0',
showLine: true
}, {
label: '2nd Data',
data: data_B2,
borderColor: '#f00',
showLine: true
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormat: 'h:mm',
}
}]
}
}
});
You can create a common legend and through generateLegend api, if both the datasets are similar.
First disable the default legends though the options
legend: {
display: false
}
Then use generateLegend() api to get the data labels and set it to a common element.
<ul class="legend">
</ul>
Then add event listeners to the generated elements and target all the charts
document.querySelector('.legend').innerHTML = myChartA.generateLegend();
var legendItems = document.querySelector('.legend').getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i++) {
legendItems[i].addEventListener("click", legendClickCallback.bind(this,i), false);
}
function legendClickCallback(legendItemIndex){
document.querySelectorAll('.myChart').forEach((chartItem,index)=>{
var chart = Chart.instances[index];
var dataItem = chart.data.datasets[legendItemIndex]
if(dataItem.hidden == true || dataItem.hidden == null){
dataItem.hidden = false;
} else {
dataItem.hidden = true;
}
chart.update();
})
}
A sample pen is present here
https://codepen.io/srajagop/pen/yLBJOOo
Note I am using chartjs 2.8
If anyone using React version of Chartjs particularly react-chartjs-2, I have done it using React Hooks with react-chartjs-2, see the sandbox demo
i have a values in date time format. I want to show the time on x-axis instead of date.
{"dateTime":"2016-03-16
07:09:41","value":"41.0"},{"dateTime":"2016-03-16
07:09:43","value":"43.0"},{"dateTime":"2016-03-16
07:09:45","value":"45.0"},{"dateTime":"2016-03-16
07:09:47","value":"47.0"},{"dateTime":"2016-03-16
07:09:49","value":"49.0"},{"dateTime":"2016-03-16
07:09:51","value":"51.0"},{"dateTime":"2016-03-16
07:09:53","value":"53.0"},{"dateTime":"2016-03-16
07:09:55","value":"55.0"},{"dateTime":"2016-03-16
07:09:57","value":"57.0"},{"dateTime":"2016-03-16
07:09:59","value":"59.0"},{"dateTime":"2016-03-16
07:10:01","value":"1.0"},{"dateTime":"2016-03-16
07:10:03","value":"3.0"},{"dateTime":"2016-03-16
07:10:05","value":"5.0"},{"dateTime":"2016-03-16
07:10:07","value":"7.0"},{"dateTime":"2016-03-16
07:10:09","value":"9.0"},{"dateTime":"2016-03-16
07:10:11","value":"11.0"},{"dateTime":"2016-03-16
07:10:13","value":"13.0"},{"dateTime":"2016-03-16
07:10:15","value":"15.0"},{"dateTime":"2016-03-16
07:10:17","value":"17.0"},{"dateTime":"2016-03-16
07:10:19","value":"19.0"},{"dateTime":"2016-03-16
07:10:21","value":"21.0"},{"dateTime":"2016-03-16
07:10:23","value":"23.0"},{"dateTime":"2016-03-16
07:10:25","value":"25.0"},{"dateTime":"2016-03-16
07:10:27","value":"27.0"},{"dateTime":"2016-03-16
07:10:29","value":"29.0"},{"dateTime":"2016-03-16
07:10:31","value":"31.0"},{"dateTime":"2016-03-16
07:10:33","value":"33.0"},{"dateTime":"2016-03-16
07:10:35","value":"35.0"},{"dateTime":"2016-03-16
07:10:37","value":"37.0"},{"dateTime":"2016-03-16
07:10:39","value":"39.0"},{"dateTime":"2016-03-16
07:10:41","value":"41.0"},{"dateTime":"2016-03-16
07:10:43","value":"43.0"},{"dateTime":"2016-03-16
07:10:45","value":"45.0"},{"dateTime":"2016-03-16
07:10:47","value":"47.0"},{"dateTime":"2016-03-16
07:10:49","value":"49.0"},{"dateTime":"2016-03-16
07:10:51","value":"51.0"},{"dateTime":"2016-03-16
07:10:53","value":"53.0"},{"dateTime":"2016-03-16
07:10:55","value":"55.0"},{"dateTime":"2016-03-16
07:10:57","value":"57.0"},{"dateTime":"2016-03-16
07:10:59","value":"59.0"},{"dateTime":"2016-03-16
07:11:01","value":"1.0"},{"dateTime":"2016-03-16
07:11:03","value":"3.0"},{"dateTime":"2016-03-16
07:11:05","value":"5.0"},{"dateTime":"2016-03-16
07:11:07","value":"7.0"},{"dateTime":"2016-03-16
07:11:09","value":"9.0"},{"dateTime":"2016-03-16
07:11:11","value":"11.0"},{"dateTime":"2016-03-16
07:11:13","value":"13.0"},{"dateTime":"2016-03-16
07:11:15","value":"15.0"},{"dateTime":"2016-03-16
07:11:17","value":"17.0"},{"dateTime":"2016-03-16
07:11:19","value":"19.0"},{"dateTime":"2016-03-16
07:11:21","value":"21.0"},{"dateTime":"2016-03-16
07:11:23","value":"23.0"},{"dateTime":"2016-03-16
07:11:25","value":"25.0"},{"dateTime":"2016-03-16
07:11:27","value":"27.0"},{"dateTime":"2016-03-16
07:11:29","value":"29.0"},{"dateTime":"2016-03-16
07:11:31","value":"31.0"},{"dateTime":"2016-03-16
07:11:33","value":"33.0"},{"dateTime":"2016-03-16
07:11:35","value":"35.0"},{"dateTime":"2016-03-16
07:11:37","value":"37.0"},{"dateTime":"2016-03-16
07:11:39","value":"39.0"}
Currently i am using canvas js chart.
<script src="/public/javascript/canvasjs.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Date Time Formatting"
},
axisX:{
valueFormatString: "hh:mm:ss" ,
labelAngle: -50
},
axisY: {
valueFormatString: "#,###"
},
data: [
{
type: "area",
color: "rgba(0,75,141,0.7)",
dataPoints: [
{ x: new Date(07,11,35), y: 0},
{ x: new Date(07,11,29), y: 20 },
{ x: new Date(07,10,53), y: 30 },
{ x: new Date(07,10,31), y: 10}
]
}
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
its shows only 12.00:00. Please help how can i show the time on x-axis