Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor

HTML 
xxxxxxxxxx
3
 
1
<canvas id="myChart" width="400" height="250"></canvas>
2
<input type="button" value="Add Data" onclick="adddata()">
3
​
JavaScript 
x
 
1
var canvas = document.getElementById('myChart');
2
var data = {
3
    labels: ["January", "February", "March", "April", "May", "June", "July"],
4
    datasets: [
5
        {
6
            label: "My First dataset",
7
            fill: false,
8
            lineTension: 0.1,
9
            backgroundColor: "rgba(75,192,192,0.4)",
10
            borderColor: "rgba(75,192,192,1)",
11
            borderCapStyle: 'butt',
12
            borderDash: [],
13
            borderDashOffset: 0.0,
14
            borderJoinStyle: 'miter',
15
            pointBorderColor: "rgba(75,192,192,1)",
16
            pointBackgroundColor: "#fff",
17
            pointBorderWidth: 1,
18
            pointHoverRadius: 5,
19
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
20
            pointHoverBorderColor: "rgba(220,220,220,1)",
21
            pointHoverBorderWidth: 2,
22
            pointRadius: 5,
23
            pointHitRadius: 10,
24
            data: [65, 59, 80, 0, 56, 55, 40],
25
        }
26
    ]
27
};
28
​
29
function adddata(){
30
  myLineChart.data.datasets[0].data[6] = 40;
31
  myLineChart.data.labels[7] = "Newly Added";
32
  myLineChart.update();
33
}
34
​
35
var option = {
36
  showLines: true
37
};
38
var myLineChart = Chart.Line(canvas,{
39
  data:data,
40
  options:option
41
});
42
​
43
​
44
​
45
​
46
​
47
​
    CSS 
    xxxxxxxxxx
    1
     
    1
    ​

    Language

    Doctype

    Body tag

    Language

    Frameworks & Extensions

    Load type

    Framework <script> attribute

    Language

    Options