Develop Reference

How can I add multiple datasets into my dropdown menu and keep it as dynamic as it is right now?

I really need your help. I currently build a dropdown menu that shows different line graphs. However, I do not know how I Can add additional datasets into my code without losing the dynamics. I am pretty sure that it is pretty obvious. I am just new to JS. Is it maybe possible to create some headings or sth like that?In the following you can see my code:
let let_25 = [28, 35, 40, 45, 50, 55, 62, 66, 70, 78];
let let_50 = [28, 35, 40, 45, 50, 55, 62, 66, 70, 78];
let let_10_90 = [40, 65, 63, 64, 72, 79, 83, 87, 100, 108];
let let_med = [30, 40, 45, 50, 56, 60, 66, 73, 78, 85];
let let_25_75 = [35, 50, 51, 55, 63, 69, 73, 80, 85, 94];
let let_10 = [25, 30, 36, 39, 45, 49, 53, 56, 60, 68];
const decimals = 0;
let myData = {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
datasets: [{
label: "25th Percentile",
borderWith: 3,
borderDashOffset: 0.0,
fill: 4,
backgroundColor: "#645bff",
borderColor: "#645bff",
data: let_25,
tension: .4,
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0,
borderJoinStyle: "miter",
radius: 3,
pointStyle: "circle",
hitRadius: 1,
hoverRadius: 4,
hoverBorderWidth: 1
}, {
label: "10th Percentile",
borderWith: 3,
borderDashOffset: 0.0,
borderDash: [],
fill: '0',
backgroundColor: "#c4c1ff",
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderColor: "#c4c1ff",
data: let_10,
}, {
label: "25th - 75th Percentile",
fill: 0,
borderDashOffset: 0.0,
backgroundColor: '#645bff',
borderDash: [],
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
pointBackgroundColor: "#645bff",
borderWith: 3,
borderColor: "#645bff",
data: let_25_75,
}, {
label: "10th - 90th Percentile",
fill: 2,
borderDashOffset: 0.0,
borderDash: [],
borderWith: 3,
backgroundColor: '#c4c1ff',
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderColor: '#c4c1ff',
data: let_10_90,
},
{
label: "Median",
radius: 3,
lineWidth: 1,
borderWidth: 2,
hitRadius: 1,
hoverRadius: 4,
hoverBorderWidth: 1,
pointStyle: 'circle',
pointborderColor: "#0d0e25",
fill: false,
borderDashOffset: 0.0,
backgroundColor: '#0d0e25',
pointBackgroundColor: "#0d0e25",
borderColor: '#0d0e25',
borderColor: '#0d0e25',
data: let_med,
tension: .4,
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0,
borderJoinStyle: "miter",
capBezierPoints: true,
}
]
};
var myChart;
function updateChartType() {
if (myChart) {
myChart.destroy();
}
myChart = new Chart('myChart', {
type: document.getElementById("chartType").value,
data: myData,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
if (label === "25th - 75th Percentile: ") {
label = "75th Percentile: "
}
if (label === "10th - 90th Percentile: ") {
label = "90th Percentile: "
}
label += tooltipItem.yLabel
return label;
}
}
},
scales: {
yAxes: [{
id: 'a',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}]
},
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
labels: {
filter: item => !['25th Percentile', '10th Percentile'].includes(item.text)
}
},
}
})
};
updateChartType();
<script>
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
"https://www.googletagservices.com/activeview/js/current/osd.js?cb=%2Fr20100101"
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<h5 class="label">Chart Type</h5>
<select name="chartType" id="chartType" onchange="updateChartType()">
<option value="line">Backend Engineer</option>
<option value="line">Frontend Engineer</option>
<option value="line">Fullstack Engineer</option>
<option value="line">Mobile Engineer</option>
<option value="line">Engineering Management</option>
<option value="line">DevOps & Infrastructure</option>
<option value="line">Engineering Management</option>
<option value="line">Data Engineer</option>
<option value="line">Data Analysis & BI</option>
<option value="line">Data Scientist</option>
<option value="line">QA & Testing Engineer</option>
<option value="line">Security Engineer</option>
</select>
<div class="chart-container" style="position: relative; width:85vw">
<canvas id="myChart"></canvas>
</div>

First update your myData variable where newDataset contains your additional data:
myChart.config.data.datasets.push(newDataset);
Then call update() method to update your chart:
myChart.update();

Why did my graphs from chart.js lost its animation?

I am making charts from chart.js. At first I can see the animation in my line graph and pie chart but now the line graph doesn't show it's animation but my pie chart works fine.
line graph/chart:
<div class="middle">
<div class="lineGraph">
<canvas id="lineChart"></canvas>
<script>
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
label: "Sales Trend",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffSet: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75, 192, 192, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRaduis: 5,
pointHoverBackgroundColor: "rgba(75, 192, 192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRaduis: 1,
pointHitRaduis: 10,
data: [65, 59, 80, 81, 56, 55, 40, 36, 77, 21, 44, 60]
}
]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true
}
}]
},
animation:{
duration: 4000,
easing: "linear"
}
}
});
</script>
</div>
<div class="pieGraph">
<canvas id="pieChart"></canvas>
<script>
const chrt = document.getElementById("pieChart");
Chart.defaults.scale.ticks.beginAtZero = true;
console.log(chrt);
let pieChart = new Chart(chrt,{
type: 'pie',
data: {
labels: ['Male', 'Female'],
datasets: [
{
label: 'Points',
backgroundColor:['#2980b9', '#ff4d4d'],
data: [70, 30]
}
]
},
options:{
animation: {
animateScale: true
}
}
});
</script>
</div>
At first it didn't have the animation options but still I can the animation. So, I thought it was default. But apparently it doesn't show its animation anymore that is why I added the animation option but there is still no animation being seen.

Chart.JS Multiline Chart with unknown numbers of Lines from JSON

I try do to a Multi - Linechart with chart.js. I have a json dataset from a database. The number of dataset can be different. Here is a example (x can be more) with JSON Data.
[{"name":"name1","jan":4067.5,"feb":1647,
"mrz":1375,"apr":10191,"mai":0,"jun":28679,"jul":59502},
{"name":"name2","jan":47548,"feb":63280.5,
"mrz":51640.26,"apr":75029,"mai":41137,"jun":89114.26,"jul":77332},
{"name":"name3","jan":38099,"feb":55023.5,
"mrz":62668,"apr":39482,"mai":44193.3,"jun":52826.5,"jul":77072},
{"name":"namex","jan":34930.5,"feb":36831.5,
"mrz":24391,"apr":35051,"mai":38038,"jun":12700,"jul":51080}]
I have abbreviated the example, in reality it is until December.
I try to do a chart with a line for every name. The X-axis should be the months of January to December and the Y-axis sales.
34/5000

From what I understand, your dataset will get dynamically updated.
You can just change your dataset then call the update() function.
For example:
First initialize your chart with all the data using:
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "name 1",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, ,60,55,30,78]
}, {
label: "name 2",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
Then if you later want to update your data, you can just:
myBarChart.data.datasets = [{
label: "name 3",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
},
...............
];
myBarChart.update();
Also, you will need to format your data in a way that can be used with the charts.
Format your data so that you can create a proper dataset.

how to use alpha vantage api in Instead list in chartjs?

i have this code and run it,but i want cahnge source to alpha vantage?
this api is :
https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=aapl&apikey=
how i can use this api in my code,
and my code is :
<html>
<head>
</head>
<body>
<canvas id="QGL_Chart"></canvas>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script>
var dates = ['a', 'b', 'c', 'd', 'e', 'f', 'h'];
var open = [1,2,3,4,2,5,1];
var high = [7,4,3,3,3,4,6];
var low = [7,2,2,4,7,6,3];
var close = [9,5,3,4,2,3,4];
var volume = [4,2,1,5,3,6,8];
var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
type: 'line',
label: "Open",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(75, 214, 238)',
borderColor: 'rgb(75, 214, 238)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(75, 214, 238)',
pointBackgroundColor: 'rgb(75, 214, 238)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(75, 214, 238)',
pointHoverBorderColor: 'rgb(75, 214, 238)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [open[0], open[1], open[2], open[3], open[4], open[5], open[6]],
},
{
type: 'line',
label: "High",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(210, 221, 72)',
borderColor: 'rgb(210, 221, 72)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(210, 221, 72)',
pointBackgroundColor: 'rgb(210, 221, 72)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(210, 221, 72)',
pointHoverBorderColor: 'rgb(210, 221, 72)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [high[0], high[1], high[2], high[3], high[4], high[5], high[6]],
},
{
type: 'line',
label: "Low",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(238, 79, 75)',
borderColor: 'rgb(238, 79, 75)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(238, 79, 75)',
pointBackgroundColor: 'rgb(238, 79, 75)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(238, 79, 75)',
pointHoverBorderColor: 'rgb(238, 79, 75)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [low[0], low[1], low[2], low[3], low[4], low[5], low[6]],
},
{
type: 'line',
label: "Close",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(28, 175, 154)',
borderColor: 'rgb(28, 175, 154)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(28, 175, 154)',
pointBackgroundColor: 'rgb(28, 175, 154)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(28, 175, 154)',
pointHoverBorderColor: 'rgb(28, 175, 154)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [close[0], close[1], close[2], close[3], close[4], close[5], close[6]],
},
{
label: 'Volume', //1D2939
yAxisID: 'y-axis-b',
data: [volume[0], volume[1], volume[2], volume[3], volume[4], volume[5], volume[6]],
barPercentage: '1',
categoryPercentage: '1',
backgroundColor: 'rgb(29, 41, 57)',
borderColor: 'rgb(29, 41, 57)',
borderWidth: '1',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgb(29, 41, 57)',
hoverBorderColor: 'rgb(29, 41, 57)',
hoverBorderWidth: '3',
},
]
},
options: {
title: {
display: true,
text: 'Share Price - Past 7 Days',
fontSize: '20',
fontFamily: 'Open Sans, sans-serif',
// fontColor
// fontStyle
// padding
// lineHeight
},
scales: {
xAxes: [{
ticks: {
min: 0
}
}],
yAxes: [{
position: "left",
id: "y-axis-a",
}, {
position: "right",
id: "y-axis-b",
}]
}
}
});
</script>
</html>
code is run and show result but i need use api in this code,thanks for read my problem,pls help me

You do not need to have all of this code.change your code like this code
$(function () {
var urls = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=aapl&apikey=';
$.ajax({
url: urls,
dataType: 'json',
contentType: "application/json",
success: function (data) {
console.log(data['Time Series (Daily)']);
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data['Time Series (Daily)'],
i = 0;
for(var time in dataLength)
{
var stock_info = dataLength[time];
ohlc.push([
time,
Number(stock_info["1. open"]),
Number(stock_info["2. high"]),
Number(stock_info["3. low"]),
Number(stock_info["4. close"])
]);
volume.push([
time, // the date
Number(stock_info["5. volume"]) // the volume
]);
}
....

drawing line chart with chartjs

I'm trying to draw a line chart with chartjs, but i can't get it working - keep getting 't is undefined' error.
here is my fiddle example: http://jsfiddle.net/6bjy9nxh/344/
can anyone figure out what im doing wrong here?
chartjs: http://www.chartjs.org/docs/#line-chart-example-usage
cdn: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
html
<canvas id="myChart" width="500" height="350"></canvas>
javascript
var ctx = document.getElementById("myChart");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
});

You are including version 1, you need version 2 for Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js
http://jsfiddle.net/x55sgzgf/