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

    #26323

    @gowri,

    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

    #26325

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

    <html>
    <head>
    	<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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    	<title></title>
    </head>
    <body>
    
    	<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>
    
               
            </select>
               
    	<form class="form">
    		  Key:
        <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">
        <thead>
          <tr>
            <th>key </th>
            <th> value</th>
            
          </tr>
        </thead>
        <tbody class="tbody">
          <tr>
            <td> </td>
            <td> </td>
          
          </tr>
          
        </tbody>
      </table>
       
    </form>
        </div>
        <div class="col-md-6 form-group">
        <center><b>	<h3>Charts</h3></b></center>
         <div id="chartContainer1" style="height: 270px; width: 100%;">
        </div>
        <div id="chartContainer2" style="height: 270px; width: 100%;">
        </div>
        </div>
    </div>
    </div>
    
    </body>
    </html>
    <script>
    	  $(document).ready(function(){
     
        $('form').submit(function(){
        	
            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>
         <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);
                    dps.push({
                        x: key,
                        y: value
                    });
                    chart.render();
                    
                }
    
    
                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;
     
    });
     chart.render();
    
    
        </script>
    #26492

    @gowri,

    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;
            chart.render();
    });

    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.