dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates how to change a spcific chart options.

For detailed implementation, please take a look at the HTML code tab.

 
<!DOCTYPE html>
<html>
<head>
    <title>Change Chart Options Example - JavaScript Chart by dvxCharts</title>
    <link rel="stylesheet" type="text/css" href="../../css/dvxCharts.chart.min.css" />
    <link rel="stylesheet" type="text/css" href="../../themes/base/styles.css" />
    <script src="../../js/dvxCharts.chart.min.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        .example-container {
            width: 100%;
            max-width: 500px;
            height: 300px;
        }
    </style>
    
    <script lang="javascript" type="text/javascript">
        var state = {
            title: {
                text: 'Change Chart Options'
            },
            series: [
                {
                    title: 'Series',
                    type: 'column',
                    data: [['A', 70], ['B', 40], ['C', 85], ['D', 50], ['E', 25], ['F', 40]]
                }
            ]
        };

        var chart = new dvxCharts.Chart(state);
        chart.write('container');

        function changeTitle() {

            state.title = {
                text: 'New Title'
            };
            chart.setState(state);
        }

    </script>

</head>
<body>
    <div id="container" class="example-container">
    </div>
    <br />
    <input id="buttonTitle" type="button" value="Change Title" onclick="changeTitle()" />
    <br />
</body>
</html>