Why do not you show me the graph of the data that I insert in a Chartjs?

Navigation
1

Guiding me to the documentation the data is an example like theirs, however not It shows me the data. 

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }, {
        x: 25,
        y: 20
    }, {
        x: 35,
        y: 25
    }],
    options: {
        scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
        },
        elements: {
            line: {
                tension: 0, // disables bezier curves
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" style="height: 180px; width: 633px;" height="180" width="633"></canvas>
    
asked by Pablo Contreras 23.07.2017 в 22:07
source

2 answers

1

The data is not as I saw it in the documentation, I do not know if it is my confusion or of them, in short, the data is like this example that I expose. 

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
	    {
	      label: '# of Votes',
	      data: [12, 19, 3, 5, 2, 3],
      	borderWidth: 1,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132,1)'
    	}
		]
  },
    options: {
        scales: {
                xAxes: [{
                  ticks: {
                    fontSize: 10,
                    maxRotation: 0 // angle in degrees
                  }
                }],
                yAxes: [{
                  ticks: {
                    fontSize: 10,
                    maxRotation: 0 // angle in degrees
                  }
                }]
        },
        elements: {
            line: {
                tension: 0, // disables bezier curves
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" style="height: 180px; width: 633px;" height="180" width="633"></canvas>
    
answered by 23.07.2017 / 22:31
source
-1

What happens is that 

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }, {
        x: 25,
        y: 20
    }, {
        x: 35,
        y: 25
    }],

It's how you define intervals or points, Point [] and they must be defined in each datasets 

data:{
 datasets:{
  data: //here 
 }
}

Also the graph type must be type: 'scatter' Here is an example taken from the documentation 

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset Ejemplo',
            data: [{
                x: -10,
                y: 0,
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
       scales: {
            yAxes: [{
                stacked: true
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" style="height: 180px; width: 633px;" height="180" width="633"></canvas>
    
answered by 23.07.2017 в 23:18
Error executing query How to scan WiFi networks on Android