user1170618
user1170618

Reputation:

jQuery Highcharts: change chart type using dropdown list

i'm trying to change the value of chart as following

<!doctype html>
<head>
<script>
var chart1; // globally available

$(document).ready(function() {
    var chart = 'pie'
    $("select").change(function(){
        chart = $('#chart').val();
        alert(chart);
    });

   chart1 = new Highcharts.Chart({
       chart: {
          renderTo: 'container',
          type: chart 
        },
        yAxis: {
           title: {
              text: 'Temprature'
           }
        },
        series: [{
           name: 'mach_1',
            data: [<?php 
            foreach($chart as $`row) {
            echo  $row['temp'].",";
            }
           ?>]
          }]
      });
});
</script>
</head>

<body>
  <div id="form">

    <label>Select a chart : </label>
    <select id="chart">
      <option>pie</option>
      <option>column</option>
    </select>

  </div>

  <div id="container"></div>

</body>
</html>

i know this will change the value of chart on select, but it doesn't change the chart itself. Any ideas?

Upvotes: 2

Views: 7141

Answers (1)

mg1075
mg1075

Reputation: 18155

  1. Your original question was very difficult to read and interpret; some of stackoverflow's code editor tags were intertwined with the code you attempted to post. In the future, it may help to put an example of your code on jsfiddle.

  2. If I'm understanding the question correctly, you are looking to change the type of chart displayed. Show a pie chart of the data; now show a bar graph of the data; now show a line chart, etc.

  3. When you have a Highcharts question, it's a good bet someone else has asked that question before on the Highcharts forum. In your case, I think this is true: "Change chart type dynamically?" - http://highslide.com/forum/viewtopic.php?f=9&t=5501&p=26274&hilit=switch+chart+types#p26274

  4. In the Highcharts forum question linked above, Highcharts author Torstein Honsi answers the question and includes a fiddle you may find to be a useful starting point, as he's changing the chart type in it. http://jsfiddle.net/tccpT/ Later on, a Highcharts support team member includes a fiddle where we see another example of changing the chart type. http://jsfiddle.net/2hLr5/

  5. When a pie chart involves more than two pieces of data, it is generally advisable to not use a pie chart as a means of visualizing data. The more values a pie chart has, the more difficult it becomes to perceive the relationships between those pieces of data.

Upvotes: 14

Related Questions