Home Forums Chart Support using drop down how to change charts using user input value

using drop down how to change charts using user input value

Viewing 4 posts - 1 through 4 (of 4 total)
  • #26315

    how to change charts using dropdown in jquery .charts want to change with user input values
    how can i change.

    Thank you



    Please take a look at this JSFiddle to change chart type based on the value selected from the dropdown. Similarly, you can change chart options based on selected value from the dropdown.

    Manoj Mohan
    Team CanvasJS


    I had seen done it but there is an error occurring please give me solutions for it.

    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> 
        <script src="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
          <script src="https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
          <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    	<div class="container">
    <div class="col-md-12">
    	<div class="col-md-6 form-group">
    		<h3> DataArea</h3>
          <label for="select">charts</label>
            <select class="form-control" id="chartType" name="Chart Type">
             <!--  <option> select</option> -->
              <option value="Barchart" >Barchart</option>
              <option value="Linechart">LineChart</option>
              <option value="Pie chart">PieChart</option>
    	<form class="form">
        <input id="key" name="text" type="text"  value=""  placeholder="Enter X-Value"  > Value:
        <input id="value" type="number" step="any" placeholder="Enter Y-Value">
         <button id="renderButton" onclick="return highlightDuplicates()">Add DataPoint & Render</button>
               <table class="table table-bordered table-striped" id="maintable">
            <th>key </th>
            <th> value</th>
        <tbody class="tbody">
            <td> </td>
            <td> </td>
        <div class="col-md-6 form-group">
        <center><b>	<h3>Charts</h3></b></center>
         <div id="chartContainer1" style="height: 270px; width: 100%;">
        <div id="chartContainer2" style="height: 270px; width: 100%;">
            var KEY = $('#key').val();
            var VALUE = $('#value').val();
               var markup = "<tr><td>" + KEY + "</td><td>" + VALUE + "</td></tr>";
             $("table tbody").append(markup);
          return false;  
         <script type="text/javascript">
            window.onload = function() {
                var dps = [];  
                var chart = new CanvasJS.Chart("chartContainer1", {
                	animationEnabled: true,
                    title: {
                        text: "charts"
                    data: [{
                        type: "bar",
                        dataPoints: dps
                function addDataPointsAndRender() {
                    key = Number(document.getElementById("key").value);
                    value = Number(document.getElementById("value").value);
                        x: key,
                        y: value
                var renderButton = document.getElementById("renderButton");
                renderButton.addEventListener("click", addDataPointsAndRender);
            var chartType = document.getElementById('chartType');
    chartType.addEventListener( "change",  function(){
      chartType.options.data[0].type = chartType.options[chartType.selectedIndex].value;


    There are couple of issue with the code that you have shared.

    1. You need to replace chartType with chart in chartType.options.data[0].type as chartType is referred to dropdown field not the chart object.
    chart.options.data[0].type = chartType.options[chartType.selectedIndex].value;

    2. Below code has to be inside the window.onload function as chart is inside window.onload scope.

    var chartType = document.getElementById("chartType");
            chartType.addEventListener( "change", function(){
            chart.options.data[0].type = chartType.options[chartType.selectedIndex].value;

    Please take a look at this JSFiddle for the complete code.

    Chart with dropdown to change chart type

    Manoj Mohan
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.