Chart updated from table

yalcrab · February 27, 2013

Hi,

For a project for school children I need a chart that is updated when the kids change values in a table. It doesn't matter if it is live or requires a button click to update the chart. Is this possible and, if so, can you point me to an example please?

JuanC · February 28, 2013

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

yalcrab · February 28, 2013

Thanks. It would have been nice to have something to work from, but it is not a showstopper.

JuanC · February 28, 2013

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/>

<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

yalcrab · February 28, 2013

Excellent. I should be able to take it from there. Many thanks for your help.

Sign In

Chart updated from table

Question

yalcrab

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

yalcrab

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

yalcrab

Link to comment

Share on other sites

Join the conversation

Browse

Activity