Mixing
How to save canvasJS generated data to database?
I am new to graphs and I want to create a real time graph that generates random data and save the data on database. I already saw a code in canvasjs that generates random data and create a real time graph. My problem is how to save the data generated in canvasjs to the database. I have a database name randgraph and I want save the y value to data column and x value to id column.. Thanks..
Here is the Javascript code.
window.onload = function () {
var dps = ; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5)); //generate random number for y value
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
Here is the image of the graph as well as full code. CanvasJs. My problem is how to save the generated data into database.
javascript php mysql ajax canvasjs
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
add a comment |
I am new to graphs and I want to create a real time graph that generates random data and save the data on database. I already saw a code in canvasjs that generates random data and create a real time graph. My problem is how to save the data generated in canvasjs to the database. I have a database name randgraph and I want save the y value to data column and x value to id column.. Thanks..
Here is the Javascript code.
window.onload = function () {
var dps = ; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5)); //generate random number for y value
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
Here is the image of the graph as well as full code. CanvasJs. My problem is how to save the generated data into database.
javascript php mysql ajax canvasjs
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
Split this function into two parts. One that generates the data array and one that updates the data property of the chart and renders it after updating. Then create a 3rd function that will call the first function to generate the data and then pass that data to the second function that will update the chart. This way, creating the data is completely decoupled from updating the chart and hence, you can add a POST request inside the main function to send the data to the server.
– Shilly
Nov 22 '18 at 12:43
add a comment |
I am new to graphs and I want to create a real time graph that generates random data and save the data on database. I already saw a code in canvasjs that generates random data and create a real time graph. My problem is how to save the data generated in canvasjs to the database. I have a database name randgraph and I want save the y value to data column and x value to id column.. Thanks..
Here is the Javascript code.
window.onload = function () {
var dps = ; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5)); //generate random number for y value
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
Here is the image of the graph as well as full code. CanvasJs. My problem is how to save the generated data into database.
javascript php mysql ajax canvasjs
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
I am new to graphs and I want to create a real time graph that generates random data and save the data on database. I already saw a code in canvasjs that generates random data and create a real time graph. My problem is how to save the data generated in canvasjs to the database. I have a database name randgraph and I want save the y value to data column and x value to id column.. Thanks..
Here is the Javascript code.
window.onload = function () {
var dps = ; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5)); //generate random number for y value
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
Here is the image of the graph as well as full code. CanvasJs. My problem is how to save the generated data into database.
javascript php mysql ajax canvasjs
javascript php mysql ajax canvasjs
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
asked Nov 22 '18 at 12:31
RishaRea RishaRea
11
11
Split this function into two parts. One that generates the data array and one that updates the data property of the chart and renders it after updating. Then create a 3rd function that will call the first function to generate the data and then pass that data to the second function that will update the chart. This way, creating the data is completely decoupled from updating the chart and hence, you can add a POST request inside the main function to send the data to the server.
– Shilly
Nov 22 '18 at 12:43
add a comment |
Split this function into two parts. One that generates the data array and one that updates the data property of the chart and renders it after updating. Then create a 3rd function that will call the first function to generate the data and then pass that data to the second function that will update the chart. This way, creating the data is completely decoupled from updating the chart and hence, you can add a POST request inside the main function to send the data to the server.
– Shilly
Nov 22 '18 at 12:43
Split this function into two parts. One that generates the data array and one that updates the data property of the chart and renders it after updating. Then create a 3rd function that will call the first function to generate the data and then pass that data to the second function that will update the chart. This way, creating the data is completely decoupled from updating the chart and hence, you can add a POST request inside the main function to send the data to the server.
– Shilly
Nov 22 '18 at 12:43
Split this function into two parts. One that generates the data array and one that updates the data property of the chart and renders it after updating. Then create a 3rd function that will call the first function to generate the data and then pass that data to the second function that will update the chart. This way, creating the data is completely decoupled from updating the chart and hence, you can add a POST request inside the main function to send the data to the server.
– Shilly
Nov 22 '18 at 12:43
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431107%2fhow-to-save-canvasjs-generated-data-to-database%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431107%2fhow-to-save-canvasjs-generated-data-to-database%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Split this function into two parts. One that generates the data array and one that updates the data property of the chart and renders it after updating. Then create a 3rd function that will call the first function to generate the data and then pass that data to the second function that will update the chart. This way, creating the data is completely decoupled from updating the chart and hence, you can add a POST request inside the main function to send the data to the server.
– Shilly
Nov 22 '18 at 12:43