score:1
as i know we can't update chart type directly in charts.js then we have to destroy original chart and redraw the chart
// define data set for the chart
let data = [18, 10,7, 8, 18, 20, 45, 8, 0, 67];
mydata = {
labels: ["january", "february", "march", "april", "may", "june", "july","september","october","november"],
datasets: [{
label: "data, baby!",
fill: false,
backgroundcolor: [
"#aec7e8", "#ffbb78", "#d62728 ", "#98df8a ", "#1f77b4", "#ff7f0e ", "#2ca02c ",
"#ff6380","#ff0000","#40e0d0","#fa8072","#339905","#98fb98","#ff8c00","#00fa9a",
"#dc143c",
"#ff1493",
"#ff69b4",
"#f08080",
"#ffa500",
"#ff4500",
],
bordercolor: 'rgb(190, 99, 255)',
data: data,
}]
};
// default chart defined with type: 'line'
chart.defaults.global.defaultfontfamily = "monospace";
var ctx = document.getelementbyid('my_chart').getcontext('2d');
var mychart = new chart(ctx, {
type: 'line',
data: mydata
});
// function runs on chart type select update
function updatecharttype() {
// here we destroy/delete the old or previous chart and redraw it again
mychart.destroy();
mychart = new chart(ctx, {
type: document.getelementbyid("charttype").value,
data: mydata,
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>
<div class="container-div">
<div class="controls-div">
<select name="charttype" id="charttype" onchange="updatecharttype()">
<option value="line">line</option>
<option value="bar">bar</option>
<option value="doughnut">doughnut</option>
<option value="radar">radar</option>
<option value="polararea">polar area</option>
</select>
</div>
<div class="chart-container" style="position: relative; width:85vw">
<canvas id="my_chart"></canvas>
</div>
</div>
score:8
one issue is the use of the assignment operator (=
) instead of a logical operator (==
or ===
) in your conditional checks. additionally, i wouldn't couple the if/else logic with the available chart types.
var ctx = document.getelementbyid("mychart").getcontext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 200;
var datamap = {
'line': {
method: 'line',
data: {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
fillcolor: "rgba(220,220,220,0.5)",
strokecolor: "rgba(220,220,220,0.8)",
highlightfill: "rgba(220,220,220,0.75)",
highlightstroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "my second dataset",
fillcolor: "rgba(151,187,205,0.5)",
strokecolor: "rgba(151,187,205,0.8)",
highlightfill: "rgba(151,187,205,0.75)",
highlightstroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}],
}
},
'pie': {
method: 'pie',
data: [{
value: 300,
color: "#f7464a",
highlight: "#ff5a5e",
label: "red"
}, {
value: 50,
color: "#46bfbd",
highlight: "#5ad3d1",
label: "green"
}, {
value: 100,
color: "#fdb45c",
highlight: "#ffc870",
label: "yellow"
}]
}
};
var currentchart;
function updatechart() {
if(currentchart){currentchart.destroy();}
var determinechart = $("#charttype").val();
var params = datamap[determinechart]
currentchart = new chart(ctx)[params.method](params.data, {});
}
$('#charttype').on('change', updatechart)
updatechart();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js'></script>
<canvas id="mychart"></canvas>
<select id="charttype">
<option value="line">line</option>
<option value="pie">pie</option>
</select>
Source: stackoverflow.com
Related Query
- ChartJS changing graphs based upon Drop Down selection
- ChartJS changing displayed data based on dropdown selection
- Chart to update from a drop down selection
- ChartJS changing displayed data based on date?
- Need to update tool tip value based on drop down filter after ajax call
- Changing fontFamily on ChartJS bar chart
- Chartjs - keeping 2 graphs aligned side by side
- ChartJs canvas showing previous graph when changing Graph types
- Dynamically changing chartjs tick colours
- Changing color of specific chartjs point
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- how to get React chartjs to resize back down with window
- Changing the Y axis unit in Chartjs
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add ChartJS code in Html2Pdf to view image
- Dynamic colours in chartJS based on entries in the array
- Keeping scales in sync across multiple graphs or dynamically changing scales
- Changing the background of a ChartJS on node js
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Django show Graphs with ChartJS
- Chartjs not working with d3 from csv source
- how to hide specific dataset based on condition chartjs angular
- Chartjs graphs are not respecting height of container
- Changing color of specific ChartJS - AngularChartJS point
- How to hide the labels of graphs that are not toggled in ChartJS
- Display the triangle pointStyle of chartjs upside down
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- Graphs sharing datasets in chartjs
- ChartJS have xAxes labels match data source
More Query from same tag
- chart.js ajax pushing another dataset always "undefined"
- save my chart.js output to an image
- How can I query data from my Cosmos DB in Angular 7?
- How to get rid of axis lines in ChartJS?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to wait for data in useEffect hook before displaying it?
- How implement Chart.js in Angular 2?
- Getting TypeError: (intermediate value).Bar is not a function with react and chart.js
- undefined labels piechart - chartjs
- Angular Radar Chart :OnClick event of label or sector
- Chart.js 2.1.6: Drawing horizontal Limit Lines?
- Real-time line chart with ChartJS using Ajax data
- How to realize a discontinuous section (jumps) in a continuous line plot with Chart.js?
- React-Chart.js : How do I increase the space between the legends and chart?
- 'barradius' for Barchart in ChartJS is not working
- How do I obtain a Chart instance for Chart.js
- How to Import Angular Chart in IONIC
- How to display currency in Chart js
- How to install Chart.js without a library?
- Vue.js component for Chart.js - strange issue on AJAX reload
- Bars of my chartjs chart has no background color
- ChartsJS get value of Data/Dataset Label for Tooltip
- Am I missing a chart.js component or helper?
- chart.js hide x/y axis, customize
- ChartJS AJAX Javascript
- How can I put sign (%) on data in ChartJS?
- Split legend in chart js
- ng2-charts and annotation plugin: annotations not visible after data update
- Error: $injector:modulerr Module Error - chart.js
- new dataset is not accepted by chartj template