ChartJS change graph type based on Dropdown selection

1397 Views

ChartJS change graph type based on Dropdown selection

Chart.js | Changing graph type based on dropdown selection

We can’t directly update the chart type in Chart.js, to achieve the requirement we need to destroy the original chart and then redraw the new chart.

In this example we can draw five type of chart from chart.js by destroy the previous one and draw a new one with the same data.

Here is the list of chart type which we are going to use in this example.

  1. Bar
  2. Line
  3. Pie
  4. Radar
  5. Polar Area

Let’s see how we can destroy the original chart and then redraw new chart 

Step 1: Create a basic html file called "chart.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bar Chart</title>
  </head>
	<body>
		
	</body>
</html>

 

Step 2: Add a "Chart.min.js" CDN link inside the "head" tag.

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bar Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>

If you don't want to use CDN server then you can download "chart.js" JavaScript plugin from  http://www.chartjs.org/

 

Step 3: Now add a canvas element in the body element.

 <body>
	<select name="chartType" id="chartType" onchange="updateChartType()">
		<option value="bar">Bar</option>
		<option value="line">Line</option>
		<option value="pie">Pie</option>
		<option value="radar">Radar</option>
		<option value="polarArea">Polar Area</option>
	</select> 
    <div class="chart-container" style="position: relative; width:80vw">
        <canvas id="my_Chart"></canvas>
    </div>
</body>

We are going to change the chart type on the basis of the value selected in the dropdown. This work on javascript onchange event. With this dropdown we are able to draw five type of chart from chart.js

You can add any number of chart type from chart.js in the dropdown if required.

 

Step 4: Now add some javascript to bind the canvas element and dropdown to chart on basis of dropdown

 <body>
    <div class="chart-container" style="position: relative; width:80vw">
        <canvas id="my_Chart"></canvas>
    </div>

    <script>

        // Data define for bar chart

			var myData = {
				labels: ["Javascript", "Java", "Python", "PHP", "C++", "TypeScript", "Linux Shell","C","Ruby on Rails"],
				datasets: [{
					label: "Hey, baby!",
					fill: false,
					backgroundColor: ['#ff0000', '#ff4000', '#ff8000', '#ffbf00', '#ffbf00', '#ffff00', '#bfff00', '#80ff00', '#40ff00', '#00ff00'],
					borderColor: 'black',
					data: [85, 60,70, 50, 18, 20, 45, 30, 20],
				}]
			};
			
			// Code to drow Chart
            // Default chart defined with type: 'bar'

			var ctx = document.getElementById('my_Chart').getContext('2d');
			var myChart = new Chart(ctx, {
				type: 'bar',    	// Define chart type
				data: myData    	// Chart data
			});
			
			// Function runs on chart type select update

			function updateChartType() {
                // Destroy the previous chart

				myChart.destroy();

                // Draw a new chart on the basic of dropdown

				myChart = new Chart(ctx, {
					type: document.getElementById("chartType").value,  // Select chart type from dropdown
					data: myData
				});
			};
    </script>
</body>

 

The final code is here.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bar Chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  </head>
	<body>

	    // Drop down to change chart type

		<select name="chartType" id="chartType" onchange="updateChartType()">
			<option value="bar">Bar</option>
			<option value="line">Line</option>
			<option value="pie">Pie</option>
			<option value="radar">Radar</option>
			<option value="polarArea">Polar Area</option>
		</select> 

       // canvas element

        <div class="chart-container" style="position: relative; width:80vw">
            <canvas id="my_Chart"></canvas>
        </div>
		

		<script>

			// Data define for bar chart

			var myData = {
				labels: ["Javascript", "Java", "Python", "PHP", "C++", "TypeScript", "Linux Shell","C","Ruby on Rails"],
				datasets: [{
					label: "Hey, baby!",
					fill: false,
					backgroundColor: ['#ff0000', '#ff4000', '#ff8000', '#ffbf00', '#ffbf00', '#ffff00', '#bfff00', '#80ff00', '#40ff00', '#00ff00'],
					borderColor: 'black',
					data: [85, 60,70, 50, 18, 20, 45, 30, 20],
				}]
			};
			
			// Code to drow Chart
            // Default chart defined with type: 'bar'

			var ctx = document.getElementById('my_Chart').getContext('2d');
			var myChart = new Chart(ctx, {
				type: 'bar',    	// Define chart type
				data: myData    	// Chart data
			});
			
			// Function runs on chart type select update
            
			function updateChartType() {
                // Destroy the previous chart

				myChart.destroy();

                // Draw a new chart on the basic of dropdown

				myChart = new Chart(ctx, {
					type: document.getElementById("chartType").value,  // Select chart type from dropdown
					data: myData
				});
			};

		</script>
	</body>
</html>