last day (15 days later) » 

3:49 PM
0
A: Chart to update from a drop down selection and mysql query

AlienYou can use addData and removeData, see https://www.chartjs.org/docs/latest/developers/updates.html. addData adds only one dataset per call, but removeData removes all datasets from chart. There is also way to push label and dataset see codepen sample: https://codepen.io/jordanwillis/pen/bqaGRR. ...

 
ok hmm based on my code right now. In my app.js file, can I somehow use ajax to grab the values 'data1' & 'data2' from bargraph.html. If so, could you show me how
 
Well, I suppose that you have included app.js to bargraph.html? If yes, then you can in this file reach all html elements. you could do it on same way to get values from element or you can add new function in app.js which you will call from bargraph.html in onclick event for submit button, end send selected values as params to function in app.js. I can also edit answer with example code.
 
yes if you could edit answer with example code would be helpful for me. Thanks
 
I've edited answer
 
can we talk in chat
 
3:49 PM
Sorry, not available now for chat. Write down here in comment questions or update your question with general questions what you want to know, I'm going to explain you all.
 
I have two separate files app.js and bargraph.html. See code in my original post. If you see my ajax post in bargraph.html, is it possible to just pass those data values to my app.js file using just ajax? I just simply want the values to be passed from bargraph.html to app.js.
 
well, you can't just send to js file from ajax, but what you can is to call ajax in app.js, there you can also access your html values, like you have done already in bargraph.html. There is a way to have global js values and update them on ajax call, but anyway again you need to have function in app.js which you will call after ajax call, but better no!(thing with async call can just mix data). So best way is like I've suggested already with function in app.js
 
I can't get it to work :( I feel I am not adding the code in the correct place. I have edited my post with full app.js if you could show what I need to replace or remove while implementing your way please.
Hi
 
Hi
I have some time now
 
Nice thanks
Ok so I will quickly explain my code
 
3:50 PM
question regarding your code, is there already created chart with data?
 
I have three seperate files, app.js, bargraph.html and data.php
app.js is creating a graph and it is currently pulling data which is in JSON format from data.php
 
so graph is already created and you want to update it with ajax call?
 
I have now created a drop down menu in bargraph.html, which when I choose two options from the drop down, it sends these two options to data.php and in return I am getting the values from the database in my browser console
That is right
I just want to use ajax to get the values from drop down in bargraph.html
to my app.js
to update the graph
I updated my app.js in my original post with all the code
Hope that makes more sense lol
 
okay, I saw that
thing what you doing wrong is that you are creating new chart in ajax call
no need for that
 
Ok
 
3:54 PM
you should save your chart in variable
on first creation
then you can access this var in ajax call also
 
can we do this without changing my code as much as possible?
 
you mean this current in app.js?
 
by just using ajax call to update the two arrays I have already created in app.js "op1" and "op2"
sorry?
 
well in any case you need to update chart
 
ok
 
3:58 PM
how your op1 and op2 structure looks like?
first one labels as I sow
saw*
op2 shuld be array with numbers?
 
array with values from database
e.g. "["SystemID", "234234"]
the app.js full code I have added onto my post, could you show me how I can do this?
 
I will check
have you saved your chart in variable?
 
no
 
At the end op1 should be 'SystemID' and op2 is '234234'?
 
no
op1 contains value for x axis
and op2 contains value of y axis
op1 e.g. "["SystemID", "234234"] and op2 e.g. ["apparentpower", "234"]
 
4:08 PM
But there in code you are adding op1 to labels of chart and op2 to data, your arrays at the end should look like ["SystemID", "apparentpower"] for op1, then it make sense to add it to labels
and another one ["234234", "234"]
you have to separate values and labels
on this way
 
my chart is working fine
that is not a problem
my only problem is getting the values from the drop down list to update chart
 
sorry I thought it's new one what you have added, forget it
Well you need to add new function in app.js file
with ajax call like you have now for creating chat
with addData function you can add data on this way barGraph.addData(''SystemID", ["234"])
try just with adding update chart with random some values on select data
 
ok but how will i get the data from bargraph.html
 
<script type="text/javascript">

$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();

updateChartAjaxCall(data1, data2);
</script>
 
ok
hmm
 
4:16 PM
this should be in bargraph
function updateChartAjaxCall(data1, data2)
{
//ajax call here
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'html',
data: {data1:data1,data2:data2},
success:function(data){
// here also manipulate data what you get to update chart propertly
myChart.removeData();
myChart.addData('newLabel', [23, 33, 4]);
},
error:function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
e.preventDefault();
}
this should be in app.js
 
ok but in my code
 
try add console.log in this function
 
I already have ajax call
should i delete that one
on my original post if you have a look
where exactly shall i put function updateChart
 
you need to have created chart so you can leave this one
new one should be for updating data
just add function after ajax call code in your original app.js
 
ok shall i pull new function on top of line $.ajax({
can you show me exactly where in my original post
just edit your answer and copy my code
 
4:24 PM
just a minute
 
ok
 
I've editet my answer
 
ok
 
deleted part with creating
to not waste timr
time
on making alignment as it should be
it mix all when I copy
code
for first try just with adding console log in function
to see if it works
 
paste all the code in, will be easier for me to understand
because im getting confused haha
 
4:41 PM
edited
 
oh now i understand
ajax with chart creation
ok cool adding now
for bargraph.html
where am i adding: <script type="text/javascript">

$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();

updateChartAjaxCall(data1, data2);
</script>
am i adding it in another javascript?
or within my current one i have
 
just replace current one
 
ok
error: Uncaught SyntaxError: Unexpected end of input
updateChartAjaxCall(data1, data2);
</script>
last line
??
 
ok its missing closing for function
 
oh yes
 
4:48 PM
<script type="text/javascript">

$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();

updateChartAjaxCall(data1, data2);
});
</script>
didnt saw that
 
ok my code running now
 
it should call this function pn submit click
 
bargraph.html:53 Uncaught ReferenceError: updateChartAjaxCall is not defined
this error i get when i choose two options from drop down menu
 
is it app.js included in your html file?
 
btw my html and js are two seperate files
 
4:51 PM
I know
 
no shall i type "include app.js" at the top
i forgot to do that xd
can i do that?
 
<script src="app.js"></script>
add this
 
oh i already have that
<script type="text/javascript" src="js/app.js"></script>
i have that already in my code
 
okay then, somehow it's not addig this function
wait
 
but hold on, how will this script in bargraph.html send post to my data.php to perform select query like before?
 
4:56 PM
it should be added function -.- on the same way it's done for first ajax call
actually you can comunicate with files
every function what you create in js file
you can call in html file
 
oh ok
 
because everything is icluded
 
i understand :0
:0
:) *
 
try to add function outside of document ready
 
ok
 
4:58 PM
btw have to go now
when find time
will be back
 
ok thanks for your help
i will message you
 
no problem
okay
try going step by step
 
yes
 
it should work
 
cool
 

last day (15 days later) »