Error using Javascript variable in Chart.js

Question

Error using Javascript variable in Chart.js

Navigation

#1 by (1 votes)

0

In Laravel, I have a function defined on the blade to capture the selected text in a drop-down list:

<script type="text/javascript">
function sacar_nombre(){
  var combo = document.getElementById('titulo');
  var titulo = combo.options[combo.selectedIndex].text;
}
</script>

Now I want to use the variable "title" in an external Javascript file linked to the blade.

 <script src="{{ asset('/js/grafico.js') }}"></script>

But when trying to show it from the external file, I get the following: "[object HTMLSelectElement]"

The code of the external file is as follows:

 const CHART = document.getElementById("lineChart");
 console.log(CHART);
 let lineChart = new Chart(CHART, {
    type: 'line',
    data: {
      labels: ["10/7/2017", "11/7/2017", "12/7/2017", "13/7/2017", 
      "14/7/2017", "15/7/2017"],
datasets: [
  {
    label: titulo,
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(220,220,220,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
    data: [10,6,9,8,8,7],
  }
]

} });

The variable I use in the label "label".

Could someone help me?

Thank you very much.

javascript laravel-5 chart.js

asked by Rubén 10.09.2017 в 12:09

source

1 answer

Error adding Item in function PUSH AngularJs I can not see the bar of the library DEBUGBAR in laravel 5.4

score 1 · Answer 1

function getText(elem) {
  alert(elem.options[elem.selectedIndex].text);
}

<form>

  <select id="dropDown" onchange="getText(this)">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
  </select>

</form>

Try to try this by adapting to your code. The alert appears when the ' onchange ' event occurs on the ' select '