score:0
Accepted answer
i was able solve the issue using insertadjacenthtml
, checkout the following:
var res_chartarray = [];
function addchart() {
var res_chartpicker = document.getelementbyid("res_chartpicker");
/* selection: bar, line, pie */
/*apprends the div+canvas to the screen*/
if (res_chartarray.length == 0)
document.getelementbyid("res_div").innerhtml += "<div id='div_chart" + res_chartarray.length + "'>" + res_chartpicker.value + "<input type='button' value='delete' onclick='deletechart(this)'><br><canvas id='chart" + res_chartarray.length + "'></div>";
else
document.getelementbyid("div_chart" + (res_chartarray.length - 1)).insertadjacenthtml('afterend', "<div id='div_chart" + res_chartarray.length + "'>" + res_chartpicker.value + "<input type='button' value='delete' onclick='deletechart(this)'><br><canvas id='chart" + res_chartarray.length + "'></div>");
var cur_ctx = document.getelementbyid('chart' + (res_chartarray.length)).getcontext('2d');
res_chartarray.push(new chart(cur_ctx, {
type: res_chartpicker.value,
data: {
labels: ["test"],
datasets: [{
label: "test1",
data: [20]
}]
},
options: {
title: {
display: true,
text: "test"
}
}
}));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<select onchange="addchart()" id="res_chartpicker">
<option value="bar">bar</option>
<option value="line">line</option>
<option value="pie">pie</option>
</select>
<div id="res_div">
</div>
Source: stackoverflow.com
Related Query
- ChartJS: subsequent charts hide previous charts
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Is it possible in chartjs to hide certain dataset legends?
- How to modify bar width in Chartjs 2 bar charts
- Chartjs hide data point labels
- ChartJS - Donut charts with multiple rings
- chartjs + Angular6 is not showing charts or any error
- ChartJS Doughnut Charts Gradient Fill
- Hide labels on x-axis ChartJS
- ChartJS hide labels on small screen sizes
- Hide gridlines in chartjs without the drawTicks
- ChartJs canvas showing previous graph when changing Graph types
- Why are these 2.9 ChartJS bar charts different?
- Chartjs Nested Pie/Doughnut charts
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- Chartjs hovering over one Chart, shows tooltip across all charts
- Update charts in chartjs and angular
- How do I make line charts overlay over bar charts in chartjs
- ChartJS charts not generating within tabs
- Chartjs hide dataset legend v3
- How to add ChartJS code in Html2Pdf to view image
- Unable to hide Legend in Chartjs with PrimeFaces7.0
- ChartJS Annotation Hide /Show
- chartjs plugin datalabels does not show value on charts
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- chartjs - how to set the order in which the different charts are displayed
- Setting Common labels and background color common for all the charts in ChartJs
- Hide all scale labels in chartjs
- How can I load multiple Chartjs charts with different data on the same page?
More Query from same tag
- ChartJS - adding scroll to horizontal legend in Line chart
- Configuring ChartJS from VB.NET
- Stack grouped xAxes in bar chart
- Put the value into the doughnut chart
- Multi-colored legend stacked bar chart Chartjs
- How can I remove two labels from my legend with an alternative to item.datasetIndex !== 1 && item.datasetIndex !== 4; ? (Charts.js)
- chart js (version 2) bar chart superimpose one data set onto another
- angular-chart zero dimensions inside angular-strap panel
- Angular and ChartJS to create bar chart
- Css style not working well when resizing chart height in angular application
- Chart.js piechart, only have border on the outside of arc
- How to set the serifs on the X and Y axes?
- Remove Canvas then add new Canvas in same spot
- Piechart doesn't show up in Canvas
- How to get data from JSON for chart.js, using vue.js
- javascript chart library for every minutes data
- Chart JS Line insert Picture
- How to set a length difference in chart?
- How to use JSON data in creating a chart with chartjs?
- Hide/disable tootlip on specific graph values
- Make Chart.js Radar labels clickable
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- Chart.js the value on the graph does not disappear when deselected
- Chart.js Legend not showing
- Add new line in es6 inside a doughnut chart
- Copy div content to dynamically create a modal window:possible?
- Change the Center color of doughnut chart in Chart.Js
- Chart.JS: How to add Data to a specific dataset
- Chart.js: adding a custom label to each item, and displaying it with a custom tooltip
- Chart.js line graph doesn't show up most of the time