Old school D3 from simpler times

All examples By author By category About

marziafm

Full window Github gist

LineChart

Line Chart

This is the dex.js line chart.

References

dex.js The main site

forked from PatMartin's block: LineChart

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">

<meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.js"></script>
    <style>
        html, body, #LineChart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }

</style>
</head>
<div id="LineChart"></div>
<body>
<script>
    var lineChart = dex.charts.c3.LineChart({
        'parent': '#LineChart',
        'csv': {
            'header': ['SAMPLE', 'A', 'B', 'C'],
            'data': dex.datagen.randomIndexedMatrix({
                'rows': 30,
                'columns': 4,
                'min': 1,
                'max': 100
            })
        }
    });
    lineChart.render();

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
​
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.js"></script>
    <style>
        html, body, #LineChart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
​
    </style>
</head>
<div id="LineChart"></div>
<body>
<script>
    var lineChart = dex.charts.c3.LineChart({
        'parent': '#LineChart',
        'csv': {
            'header': ['SAMPLE', 'A', 'B', 'C'],
            'data': dex.datagen.randomIndexedMatrix({
                'rows': 30,
                'columns': 4,
                'min': 1,
                'max': 100
            })
        }
    });
    lineChart.render();
​
</script>
</body>
​
    

Updated missing url https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.js to https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js

https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.js