CODEWITHSUNDEEP
javascriptweb2pychart.js
Sam
Sam

Reputation: 1

Grab array from div text to plot with ChartJS

I'm new with programming, so please go easy if I'm not clear with my explanation... In a Web2Py view I have a div with an id="convgraphdata" containing numbers that I would like to plot with ChartJS. The numbers vary depending on inputs but look like this: [4,6,7,3,20,46,...]. As I want to plot dynamic data, I would like have ChartJS pick up the text from within the div, convert it to an array, then plot the data in the array. I have tried so many ways to grab the data from the div and cant make it work.

For example, the ChartJS code is:

var lineChartData = {
    labels : days(),
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : convdata()
        }]}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}
function days() {
    var days = []; 
    for (var i = 1; i <= 365; i++) {days.push(i);};
    return days;}

And the convdata() function is where I am having trouble. My code is:

function convdata() {
    var convdata = [];
    var data1 = document.getElementById("convgraphdata").textContent.slice(1, -1);
    var convdata = data1.split(",").map(Number);
    return convdata;}

I have tried numerous other methods too. The graph does not load whenever I include code to grab the text from a div. Not sure if this is helpful but the div contents are the result of an AJAX call in Web2Py. Web2Py likes to return the results to an HTML element, but if there is another way to send it direct to a ChartJS array, this could also work. Any help much appreciated.

Anthony, in response to your question, the full function is long and complicated so I will give a shortened explanation here... The javascript function picks up the data inside javascript user inputs then sends to the server using the Web2Py standard Ajax function in the format: 

function conv_model(){
    ajax(['graph'],['select1', 'rate1', 'waittime1'], 'convgraphdata');}

The server-side function in python runs calculation on the data and returns the result to the client side div with id and name "convgraphdata". This data is what I want to graph in ChartJS.

Server side, the python function is in the format:

def graph():
# numerous calculations on user inputs
return dict(totalN=totalN)

There is also a view called graph.html which contains the code:

{{=totalN}}

Hope this is enough detail.

Upvotes: 0

Views: 531

Answers (1)

andyhasit
andyhasit

Reputation: 15329

You say:

Web2Py likes to return the results to an HTML element

But that's just what the built-in ajax function does.

You can get always data from your controller with jQuery (bundled with web2py):

function getData() {
  $.ajax({
     url: "your_controller/get_data.json?", 
     data: { input1: "hello", input2: "bye"},
     success: function(result){
       //do what you want with result...
     }
  });
}

In the controller:

def get_data():
    response.view = 'generic.json'
    a = request.vars.input1
    b = request.vars.input2
    return {data: [1, 2, 4, 67]}

Upvotes: 0

Related Questions