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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #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&#8221; rel=”stylesheet”>
    <link href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css&#8221; rel=”stylesheet”>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js”></script&gt;
    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script&gt;
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js”></script&gt;
    <script src=”https://cdn.anychart.com/js/8.0.1/anychart-core.min.js”></script&gt;
    <script src=”https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js”></script&gt;
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script&gt;

    <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;





    Can you kindly create a JSFiddle reproducing the issue so that we can understand scenario better and help out?

    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.