Home forums Using CanvasJS A variable for dataPoints

This topic contains 5 replies, has 5 voices, and was last updated by  Vishwas R 2 weeks, 1 day ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6067

    Stupefiant
    Participant

    Hello,

    I downloaded canvasJS recently and I encountered a problem that I wasn’t able to solve.
    In my code if I do :
    `

    window.onload = function () {
    var tableauDataPoints = [
    { label: "apple", y: 10 },
    { label: "orange", y: 15 }
    ];

    [...]
    data: [
    {
    type: "column",
    dataPoints: tableauDataPoints
    }
    ]
    [...]

    The graphic will be displayed and I have no problem.
    However I need to fill this table otherwise.
    So I did :


    window.onload = function () {
    var tableauDataPoints = new Object(); /* I also tested with [] and new Array() */

    for (i = 1; i < 3; i++) {
    tableauDataPoints[i] = { label: "test", y: i };
    alert(tableauDataPoints[i].label + tableauDataPoints[i].y);
    }

    [...]
    data: [
    {
    type: "column",
    dataPoints: tableauDataPoints
    }
    ]
    [...]

    The alerts are correct, but I have no display, and I have no idea why, so I changed the variable type of “tableauDataPoints”, but no effect.
    If you have any idea, it will be really helpful!

    Thanks in advance,

    • This topic was modified 3 years, 5 months ago by  Stupefiant.
    #6075

    Sunil Urs
    Keymaster

    Stupefiant,

    DataPoints needs to be an array. Can you try var tableauDataPoints = [] instead?

    If the above suggestion doesn’t work, please re-create the issue on JSFiddle, so that I can figure out the problem.


    Sunil Urs

    #10496

    JustXtasy
    Member

    $.each(data, function (i, item) {
    dps.push(“{label: “+item.ProfileName+”, y:”+ item.TotalCustomer+”},”);
    alert(dps[0]);
    });

    How do i do this..?

    is it possible for a datapoints to be like that..?

    i cant render the Chart because I do not know the format.

    #10498

    Vishwas R
    Keymaster

    You can use dps.push({label:”label”, y:yValue})

    Here is an example.

    #15767

    Rietveld
    Member

    Hi, i have the almost the same question.
    The following code is working:

    <script type="text/javascript">
    							  window.onload = function () {
    								var data = [
    									{ Name: "Open System", Total: os },
    									{ Name: "Rationeel", Total: r },
    									{ Name: "Intern Proces", Total: ip },
    									{ Name: "Human Relations", Total: hr }
    									];
    
    								var dps=[];
    								$.each(data, function (i, item) {
    									dps.push({label: item.Name, y: item.Total });
    									//alert(dps[0]);
    								});
    								
    								var chart = new CanvasJS.Chart("chartContainer",
    								{        
    								  data: [
    								  {
    									type: "column",
    									dataPoints: dps
    								  }
    								  ],
    								  title:{
    									text: "De vier kwadranten"
    								  },
    								  axisY:{			  
    									stripLines:[
    									{                
    										value:4
    									}
    									]                    
    								}, 
    								});
    								
    								chart.render();
    							  }
    							  </script>

    Only the variables for Total aren’t working.
    The variables are in my code like this:

    var os = "<?php echo $os; ?>";
    					var r = "<?php echo $r; ?>";
    					var ip = "<?php echo $ip; ?>";
    					var hr = "<?php echo $hr; ?>";

    Can you solve my problem? I want the php-variables in the chart.
    The php tot js variable lines are working, so the problem is in the code of the chart.

    #15771

    Vishwas R
    Keymaster

    @rietveld,

    Datapoint y-value should be number, but in your case its string. Convert string values to number before assigning them to “y” should work fine in your case. dps.push({label: item.Name, y: Number(item.Total) });


    Vishwas R
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.