using jsPlumb with canvasJs to generate charts

[Crispian Anyster]

I have this piece of code and want to generate and display the data in a chart but nothing is happening. Though I can see that an instance of the div has been created on the screen.

The code:

$("#componentWrap #pieChart").click(function (e) {

var newState = $('<div>').attr('id', 'state' + i).addClass('chartContainer');                                                               // This creates a new div and it appends to a specific area on the screen

var display = $('<div id="chartContainer" style="height: 300px; width: 100%;" onload="data();">');                         // This creates another div and should display the chart data but nothing is displaying.

                       function data () {

                           var chart = new CanvasJS.Chart("chartContainer", {

                               data: [

                                   {

                                       type: "column",

                                           dataPoints: [

                                               { x: 10, y: 10 },

                                               { x: 20, y: 15 },

                                               { x: 30, y: 25 },

                                               { x: 40, y: 30 },

                                               { x: 50, y: 28 }

                                           ]

                                    }

                                 ]

                           });

 

                           chart.render();

                       }

Where the onload event handler is, I pass a data() function which holds the information for the chart to be generated on that page where the data function is kept so that when the newState variable is created it pulls the data() function and display the information on the chart. 

Help will be great. Thanks in advance.

[Simon Porritt]

Can you put this into a jsfiddle or a codepen or something?

[Crispian Anyster]

Hi Simon

Here is the code to my problem:

jsPlumb.ready(function () {

  $("#componentWrap #pieChart").click(function (e) {                                                                      // This basically generates a new element on the screen to the area where I want to append it.

var newState = $('<div>').attr('id', 'state' + i).addClass('chartContainer');

var display = $('<div id="chartContainer" style="height: 300px; width: 100%;" onload="data();">');            // Here I have an onload event to trigger the data() function once the pieChart selector is clicked. It should then display the data stored in the data() function 

console.log(newState);                                                                                                                      // to the screen inside the chartContainer div.   

newState.css({

 'top': e.pageY,

 'left': e.pageX

});

newState.append(display);

$('#designTab').append(newState);                                                                             // newState is appended to #designTab  

i++;

/*jsPlumb.draggable(newState, {

 containment: 'parent'

});*/

$(newState).draggable({

containment: 'parent'

});

newState.click(function(e) {

 //jsPlumb.detachAllConnections($(this));

 $(this).remove();

 e.stopPropagation();

 

 i--;

 

});

});

  

});

// The javascript for the data function which is held on the page where the graph will be generated once the newState variable creates the div and appends it to the #designTab. Hope this helps to help you understand and make sense of it so I can move forward on this one.

function data () {

          var chart = new CanvasJS.Chart("chartContainer", {

              data: [

              {

                  type: "column",

                  dataPoints: [

                  { x: 10, y: 10 },

                  { x: 20, y: 15 },

                  { x: 30, y: 25 },

                  { x: 40, y: 30 },

                  { x: 50, y: 28 }

                  ]

              }

              ]

          });

 

          chart.render();

      }

On Tue, Feb 25, 2014 at 12:52 PM, Simon Porritt <simon....@gmail.com> wrote:

Can you put this into a jsfiddle or a codepen or something?

--
You received this message because you are subscribed to a topic in the Google Groups "jsPlumb" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsplumb/A0OL2yfFLe8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Simon Porritt]

i can't debug without seeing the code in action, which is why i ask for a jsfiddle or similar.