Jump to content
JChartFX Community
  • 0

Chart updated from table


yalcrab
 Share

Question

4 answers to this question

Recommended Posts

  • 0

It is possible to have a chart that reflects changes in a table. At this moment I do no think we have a sample, as soon as we have one we will post a link here.

Basically the sample has to detect changes on a table, figure out the row/column and use chart.getData().setItem(series, point) to change the appropriate value in the chart.

JuanC

Link to comment
Share on other sites

  • 0

It would be something like this (using jQuery), it would obviously need code to handle an invalid number entry, in this sample I am hardcoding a table with 3 numbers, on a real page this table would be generated dynamically to control number of items.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Include/jchartfx.css" />
    <script type="text/javascript" src="Include/jquery.js">
    </script>
    <script type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
</head>
<body>
Handle Data Change
<br/>

<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>

<br/>

<form>
  <input class="target" type="text" data-row="0" value="10.5" />
  <input class="target" type="text" data-row="1" value="14.5" />
  <input class="target" type="text" data-row="2" value="8.5" />
</form>
   
<script language="javascript">
    var chart1;
   
    $(document).ready(function($) {
        chart1 = new cfx.Chart();
        var data = chart1.getData();
        data.setSeries(1);
        data.setPoints(3);
        data.setItem(0, 0, 10.5);
        data.setItem(0, 1, 14.5);
        data.setItem(0, 2, 8.5);
        chart1.setGallery(cfx.Gallery.Bar);
                     
        var divHolder = document.getElementById('myDiv');
        chart1.create(divHolder);
                     
        $('.target').change(function() {
            var row = $(this).data("row");
            var value = $(this).attr("value");
            data.setItem(0, row, value);
        });
    });
</script>

</body>
</html>
 

Hope this helps.

JuanC

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...