i don't know how to get out of this problem
I have the animation of the graph of the equation y = x ^ 2
this:
const labels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
const totalDuration = 2000;
const delayBetweenPoints = totalDuration / labels.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [],
borderWidth: 1,
function: function(x) {
return x * x
},
borderColor: "rgba(153, 102, 255, 1)",
fill: true
}]
},
options: {
scales: {
y: {
max: 200
},
x: {
suggestedMax: 210
}
},
animation: {
x: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return ctx.index * delayBetweenPoints;
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return ctx.index * delayBetweenPoints;
}
}
}
},
plugins: [{
id: 'data',
beforeInit: function(chart) {
var data = chart.config.data;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
data.datasets[i].data.push(y);
}
}
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js" integrity="sha512-HJ+fjW1Hyzl79N1FHXTVgXGost+3N5d1i3rr6URACJItm5CjhEVy2UWlNNmFPHgX94k1RMrGACdmGgVi0vptrw==" crossorigin="anonymous"></script>
</body>
I have to add 3 things and I don't know how to get out of it
how can I define a Y value for which the line stops going up?
if this Y is bigger than the axis data, how can they adapt?
how can I create a button which when clicked tells me the exact Y value at that moment during the animation?
I wish something like this graph would come out:
https://www.youtube.com/watch?v=w48ahDZQPnQ
You can try setting the Y max value like this in your code to auto adjust Y axis scale.
beforeInit: function(chart) {
var data = chart.config.data;
let maxValue = 0;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
if (maxValue < y) {
maxValue = y;
}
data.datasets[i].data.push(y);
}
}
chart.options.scales.y.max = maxValue;
}
Related
I'm writing in python a program to recognize emotions from voice (it's a web interface and I'm using flask). I passed the variables in JavaScript I created a graph using Plotly. Only now I want to save the graph in a project specific folder called "graphs". How can I do?
I don't want to have to pass the graph from javascript to python and save it. if so how can I do it?
Here's how to build the graph in JavaScript
const x1 = JSON.parse('{{data.audio_len}}');
const y1 = JSON.parse('{{data.val_outputs}}');
console.log(x1);
console.log(y1);
var data = [];
const trace1Values = [];
for (let i = 0; i < x1.length; i++) {
trace1Values.push(y1[i][0]);
}
var Disgusto = {
x: x1,
y: trace1Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Disgusto",
};
data.push(Disgusto);
const trace2Values = [];
for (let i = 0; i < x1.length; i++) {
trace2Values.push(y1[i][1]);
}
var Gioia = {
x: x1,
y: trace2Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Gioia",
};
data.push(Gioia);
const trace3Values = [];
for (let i = 0; i < x1.length; i++) {
trace3Values.push(y1[i][2]);
}
var Paura = {
x: x1,
y: trace3Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Paura",
};
data.push(Paura);
const trace4Values = [];
for (let i = 0; i < x1.length; i++) {
trace4Values.push(y1[i][3]);
}
var Rabbia = {
x: x1,
y: trace4Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Rabbia",
};
data.push(Rabbia);
const trace5Values = [];
for (let i = 0; i < x1.length; i++) {
trace5Values.push(y1[i][4]);
}
var Sorpresa = {
x: x1,
y: trace5Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Sorpresa",
};
data.push(Sorpresa);
const trace6Values = [];
for (let i = 0; i < x1.length; i++) {
trace6Values.push(y1[i][5]);
}
var Tristezza = {
x: x1,
y: trace6Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Tristezza",
};
data.push(Tristezza);
const trace7Values = [];
for (let i = 0; i < x1.length; i++) {
trace7Values.push(y1[i][6]);
}
var Neutrale = {
x: x1,
y: trace7Values,
mode: 'lines+markers',
line: {
shape: 'spline'
},
name: "Neutrale",
};
data.push(Neutrale);
var layout = {
title: '{{data.name_audio}}',
xaxis: {
title: 'Tempo audio in sec'
},
yaxis: {
title: 'Emozioni',
range: [0, 1]
}
};
Plotly.newPlot('myDiv', data, layout);
<div class="grafico" id="myDiv" src='https://cdn.plot.ly/plotly-2.18.0.min.js'></div>
I tried to use this code to save the graph in a folder of my project but when I run the code and show the graph it doesn't save me
Plotly.newPlot('myDiv', data, layout).then(function () {
Plotly.writeImage('myDiv',
{ format: 'png', width: 300, height: 300 },
{ folder: 'grafico/grafico.png' });
});
This is a follow-up to my previous question posted here How to add custom values to nodes of plotly graph.
The solution posted works well for selecting a single node using plotly_click. As suggested in the comments, I tried to use plotly_selected for displaying multiple nodes.
I am trying to select multiple nodes and display the values associated with the nodes using the following code.
<html>
<head>
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
var xS = [];
var yS = [];
var zS = [];
var xT = [];
var yT = [];
var zT = [];
for (var i = 0; i < edges.length; i++) {
xS.push(nodes[edges[i].source].x);
yS.push(nodes[edges[i].source].y);
zS.push(nodes[edges[i].source].z);
xT.push(nodes[edges[i].target].x);
yT.push(nodes[edges[i].target].y);
zT.push(nodes[edges[i].target].z);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
marker: { size: 12, color: 'red' },
type: 'scatter3d',
text: [0, 1, 2, 3, 4],
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById('myDiv').on('plotly_selected', function(data){
var selectedNodeIndices = data.points.map(function(point) {
return point.pointNumber;
});
var values = [];
for (var i = 0; i < selectedNodeIndices.length; i++) {
values.push(nodes[selectedNodeIndices[i]].value);
}
var data = [];
for (var i = 0; i < values.length; i++) {
data.push({
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: values[i],
name: 'Node ' + selectedNodeIndices[i]
});
}
Plotly.newPlot('lineGraph', data, {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
</script>
</body>
</html>
There is some issue, I am not able to select multiple nodes and the line graph is not plotted when nodes are clicked.
Suggestions on how to fix this will be really helpful.
EDIT:
<html>
<head>
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
const edge_x = [];
const edge_y = [];
const edge_z = [];
for (var i = 0; i < edges.length; i++) {
const a = nodes[edges[i].source];
const b = nodes[edges[i].target];
edge_x.push(a.x, b.x, null);
edge_y.push(a.y, b.y, null);
edge_z.push(a.z, b.z, null);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
marker: { size: 12, color: Array.from({length: nodes.length}, () => 'red') },
text: [0, 1, 2, 3, 4],
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var traceEdges = {
x: edge_x,
y: edge_y,
z: edge_z,
type: 'scatter3d',
mode: 'lines',
line: { color: 'red', width: 2},
opacity: 0.8
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
Plotly.newPlot('myDiv', [traceNodes, traceEdges], layout, { displayModeBar: false });
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById('myDiv').on('plotly_click', function(data){
var nodeIndex = data.points[0].pointNumber;
var values = nodes[nodeIndex].value;
// Change color of the selected node
traceNodes.marker.color = Array.from({length: nodes.length}, (_, i) => i === nodeIndex ? 'blue' : 'red');
Plotly.update('myDiv', {
marker: {
color: traceNodes.marker.color
}
}, [0]);
Plotly.newPlot('lineGraph', [{
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: values
}], {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
</script>
</body>
</html>
I tried to define the selected marker's color i.e. blue to indicate that it has been selected. Unfortunately, this is not working.
Regarding selecting multiple nodes,
Currently, one single curve is visible on the side panel. I would like to know how to select multiple nodes and display multiple curves.
Unfortunately selection features don't work with 3d scatter plot : lasso and select tools are not available and the event plotly_selected won't fire. See this issue for more info.
That said, it is still possible to handle multi-point selection manually using the plotly_click event with some extra code. The idea is to use a flag and keypress/keyup events to determine whether a given point should be added to or removed from the current selection, or if it should be added to a new selection (ie. the flag is on when holding the shift or ctrl key).
The second thing is to define a selection object that can persist across different click events, which means we need to define it outside the handler.
(only the end of the script changes)
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
// Accumulation flag : true when user holds shift key, false otherwise.
let accumulate = false;
document.addEventListener('keydown', event => {
if (event.key === 'Shift') accumulate = true;
});
document.addEventListener('keyup', event => {
if (event.key === 'Shift') accumulate = false;
});
// Selected points {<nodeIndex> : <nodeData>}
let selection = {};
document.getElementById('myDiv').on('plotly_click', function(data){
if (data.points[0].curveNumber !== 0)
return;
const nodeIndex = data.points[0].pointNumber;
if (accumulate === false)
selection = {[nodeIndex]: data.points[0]};
else if (nodeIndex in selection)
delete selection[nodeIndex];
else
selection[nodeIndex] = data.points[0];
// Highlight selected nodes (timeout is set to prevent infinite recursion bug).
setTimeout(() => {
Plotly.restyle('myDiv', {
marker: {
size: 12,
color: nodes.map((_, i) => i in selection ? 'blue' : 'red')
}
});
}, 150);
// Create a line trace for each selected node.
const lineData = [];
for (const i in selection) {
lineData.push({
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: selection[i].customdata,
});
}
Plotly.react('lineGraph', lineData, {
margin: {t: 0},
yaxis: {autorange: false, range: [0, ymax + 1]},
});
});
I am currently working with two datasets, both in meters, but the left hand axis displays a dataset with an offset of 11.74m along the y-axis. The right hand axis ignores this offset, hence y1 == y2 when y1 = 11.74 and y2 = 0.
This being the case, is there a way to keep integer tick values on both axes despite the decimal offset between the two? Not sure if I've got the Y2 offset correct in the graph below, but I think this is roughly what I'm trying to achieve - basically fixed gridline/tick intervals of Y1 for both axes, except for Y2:
The live code I'm working on is a bit too unwieldly for Stack Overflow, but the code below roughly achieves what I'm after - would be nice if there was a way to cleanly declare an offset of -0.26 without then also having to explicitly declare the rest of the ticks:
var ticks = [5, 4, 3, 2, 1, -0.26];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [{
data: [0, 0.1, 0.5, 5, 3.5, 3, 3.25, 2, 1.5, 1]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
autoSkip: false,
min: ticks[ticks.length - 1],
max: ticks[0]
},
afterBuildTicks: function(scale) {
scale.ticks = ticks;
return;
},
beforeUpdate: function(oScale) {
return;
}
}]
}
}
});
https://jsfiddle.net/wxp1fLk0/5/
Solution below after much fiddling. offset in the getTickArray() function specifies the left-hand axis value that coincides with 0 on the right hand axis. I think the afterBuildTicks and beforeUpdate keys then allow you to position ticks with more precision (I think).
https://jsfiddle.net/zjxukf57/47/
function getRandomDataset(lowerBound, upperBound, count) {
let output = [];
for (let index = 0; index < count; index++) {
let newPoint = Math.floor((Math.random() * upperBound) + lowerBound);
output.push(newPoint);
}
return output;
}
function arrayMin(arr) {
var len = arr.length, min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
function arrayMax(arr) {
var len = arr.length, max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
function getTickArray(offset, increment, leftData, rightData) {
let ticksLeft = [];
let ticksRight = [];
let leftMin = arrayMin(leftData);
let leftMax = arrayMax(leftData);
let rightMin = arrayMin(rightData);
let rightMax = arrayMax(rightData);
let tick = leftMin;
let tickRight = tick - offset;
let wholeTick = Math.ceil(tick); // ? Gets first left-hand integer above minimum tick value
let wholeTickRight = Math.ceil(tickRight); // ? Gets first right-hand integer above minimum tick value
let maxValue = leftMax > rightMax + offset ? leftMax : rightMax + offset;
// ? Push minimum decimal ticks
ticksLeft.push(tick);
ticksRight.push(tickRight);
while (wholeTick < maxValue) {
ticksLeft.push(wholeTick);
ticksRight.push(wholeTickRight);
wholeTick = wholeTick + 1*increment;
wholeTickRight = wholeTickRight + 1*increment;
}
// ? Push minimum decimal ticks
ticksLeft.push(maxValue);
ticksRight.push(maxValue - offset);
return [ ticksLeft, ticksRight ];
}
let datasetOne = getRandomDataset(8, 15, 10); // ? Ten random numbers between 8 and 15
let datasetTwo = getRandomDataset(0, 7, 10); // ? Ten random numbers between 0 and 7
var ticks = getTickArray(11.76, 2, datasetOne, datasetTwo);
console.log(ticks)
var ticks1 = ticks[0];
var ticks2 = ticks[1];
console.log(datasetOne);
console.log(datasetTwo);
// ? Chart Config
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [{
data: datasetOne,
yAxisID: 'A',
label: "left",
borderColor: "#FF0000",
backgroundColor: 'rgba(0, 0, 0, 0)'
},
{
data: datasetTwo,
yAxisID: 'B',
label: "right",
borderColor: "#348632",
backgroundColor: 'rgba(0, 0, 0, 0)'
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
ticks: {
autoSkip: false,
min: ticks1[ticks1.length - 1],
max: ticks1[0]
},
afterBuildTicks: function(scale) {
scale.ticks = ticks1;
return;
},
beforeUpdate: function(oScale) {
return;
},
gridLines: {
color: "#FF0000"
}
},
{
id: 'B',
ticks: {
autoSkip: false,
min: ticks2[ticks2.length - 1],
max: ticks2[0],
callback: function(value, index, values) {
return value;
}
},
afterBuildTicks: function(scale) {
scale.ticks = ticks2;
return;
},
beforeUpdate: function(oScale) {
return;
},
position: "right",
gridLines: {
color: "#348632"
}
}]
}
}
});
I'm stuck on this issue and don't know where to put my hands.
I have to draw in javascript the animation of the graph of the equation y = x ^ 3
what do i mean?
knowing y (for example y = 10) I would like the graph to start from (0; 0) up to (x; 10) following the equation y = x ^ 3
also I would like to create a button which can be clicked during the animation and tells me what y is the graph at that precise moment
for now thanks to chart.js i managed to do this:
JS
var ctx = document.getElementById("myChart");
var data = {
labels: [1, 2, 3, 4, 5],
datasets: [
{
function: function(x) { return x*x*x },
borderColor: "rgba(153, 102, 255, 1)",
data: [],
fill: true
}]
};
Chart.pluginService.register({
beforeInit: function(chart) {
var data = chart.config.data;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
data.datasets[i].data.push(y);
}
}
}
});
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
HTML
<canvas id="myChart"></canvas>
result
for now I only have the graph, there is no animation and I cannot select the maximum y
how can I do?
To set max amount on your y Axes you can use the max property or suggestedMax if you want to make sure that if the data goes bigger the axis adapts. For the animation you can write custom logic as in the example underneath. I only dont know how to get the value its at on the click:
const labels = [1, 2, 3, 4, 5]
const totalDuration = 5000;
const delayBetweenPoints = totalDuration / labels.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [],
borderWidth: 1,
function: function(x) {
return x * x * x
},
borderColor: 'red',
backgroundColor: 'red'
}]
},
options: {
scales: {
y: {
max: 250
}
},
animation: {
x: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return ctx.index * delayBetweenPoints;
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return ctx.index * delayBetweenPoints;
}
}
}
},
plugins: [{
id: 'data',
beforeInit: function(chart) {
var data = chart.config.data;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
data.datasets[i].data.push(y);
}
}
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js" integrity="sha512-HJ+fjW1Hyzl79N1FHXTVgXGost+3N5d1i3rr6URACJItm5CjhEVy2UWlNNmFPHgX94k1RMrGACdmGgVi0vptrw==" crossorigin="anonymous"></script>
</body>
The X axis of this graph represents time in milliseconds.
I basically need to display only one 5 labels, one each second (1,2,3,4 and 5), however the graph contains too many elements and not every label is shown.
I tried looking on the Chart.js documentation but haven't found anything useful to my case.
Do you guys have any ideas on how can I do it?
Im gonna post my code below:
<head>
<script>
$(document).ready(function () {
function generateLabels() {
var chartLabels = [];
for (x = 0; x < 5000; x++) {
if(x%1000 == 0)
chartLabels.push(x/1000);
else
chartLabels.push('');
}
return chartLabels;
}
function generateData() {
var chartData = [];
for (x = 0; x < 5000; x++) {
chartData.push(Math.floor((Math.random() * 100) + 1));
}
return chartData;
}
function addData(numData, chart) {
for (var i = 0; i < numData; i++) {
chart.data.datasets[0].data.push(Math.random() * 100);
chart.data.labels.push("Label" + i);
var newwidth = $('.chartAreaWrapper2').width(); // + 60
$('.chartAreaWrapper2').width(newwidth);
}
}
var chartData = {
labels: generateLabels(),
datasets: [{
label: "Test Data Set",
lineTension: 0,
fill:false,
pointBackgroundColor: "green", //Point Color
pointBorderColor: "green",
borderColor: "green", //Line Color
pointStyle: "point",
data: generateData()
}]
};
$(function () {
var rectangleSet = false;
var canvasTest = $('#chart-Test');
var chartTest = new Chart(canvasTest, {
type: 'line',
data: chartData,
maintainAspectRatio: false,
responsive: true,
options: {
elements:{
point:{
radius:1
}
},
tooltips: {
titleFontSize: 0,
titleMarginBottom: 0,
bodyFontSize: 12
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
fontSize: 12,
display: true
}
}],
yAxes: [{
ticks: {
fontSize: 12,
beginAtZero: true
}
}]
}
}
});
addData(5, chartTest);
});
});
</script>
</head>
<body>
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="chart-Test" height="300" width="5000"></canvas>
</div>
<canvas id="axis-Test" height="300" width="0"></canvas>
</div>
Thanks in advance, have a nice day!
If i understand correct, you want to show only 5 labels in your x-axis (1, 2, 3 ,4, second). Try this one:
var options = {
scales: {
xAxes: [{
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 1000 != 0){
xLabels[i] = '';
}
});
}
}]
}
}