score:16
I don't think you can use addData to add a series - it's for adding points / bars to existing series.
However you can insert your new series directly into the chart object. With the chart object and new dataset like so
var ctx = document.getElementById("chart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);
var myNewDataset = {
label: "My Second dataset",
fillColor: "rgba(187,205,151,0.5)",
strokeColor: "rgba(187,205,151,0.8)",
highlightFill: "rgba(187,205,151,0.75)",
highlightStroke: "rgba(187,205,151,1)",
data: [48, 40, 19, 86, 27, 90, 28]
}
the code to insert a new dataset would be
var bars = []
myNewDataset.data.forEach(function (value, i) {
bars.push(new myBarChart.BarClass({
value: value,
label: myBarChart.datasets[0].bars[i].label,
x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
y: myBarChart.scale.endPoint,
width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
base: myBarChart.scale.endPoint,
strokeColor: myNewDataset.strokeColor,
fillColor: myNewDataset.fillColor
}))
})
myBarChart.datasets.push({
bars: bars
})
myBarChart.update();
Fiddle - http://jsfiddle.net/pvak6rkx/ (inserts the new dataset after 3 seconds)
score:0
Your missing the data
key from your chart instance i.e. barChartData.data.datasets.push(e);
No need for any methods. The js chart object data.datasets
key accepts an array of objects. Therefore in your case use :
var e = {
fillColor : "#efefef",
strokeColor : "#efefef",
highlightFill: "#efefef",
highlightStroke: "#efefef",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
barChartData.data.datasets[] = e; // this will append additional data to your chart
barChartData.update();
Just make sure that barChartData
is an instance of your js chart.
score:13
In version 2.x, you can add (or remove) data to the chart directly and then call update()
, e.g.
barChart.data.datasets.push({
label: 'label2',
backgroundColor: '#ff0000',
data: [1,2,3]
});
barChart.update();
Here's a jsfiddle example.
Source: stackoverflow.com
Related Query
- How to push datasets dynamically for chart.js (bar chart)?
- How to create datasets dynamically for chart.js Line chart?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- PrimeNg bar chart how to show a label for the y-axis
- How to show different product name for every bar in chart js
- How to use set the color for each bar in a bar chart using chartjs?
- How to draw baseline for bar chart in chart.js
- How to set X coordinate for each bar with react chart js 2?
- How do I get a different label for each bar in a bar chart in ChartJS?
- How to create dynamically chart for Ionic App with Firebase data?
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How to push a variable number of datasets to a chart data, without the _observer "magic"_ (using vuecharts.js)?
- How to set minimal value for bar chart in Chart.js? (ver. 2.0.2)
- How to create an array of objects dynamically in javascript for a pie chart
- Unable to change y-axis value dynamically based on data for Stacked bar chart in reactjs
- How to Push data dynamically from firebase to bar graph in angular
- How to create datasets for all labels for stacked bar in chart.js?
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- how to show bar chart for every product
- how to create bar chart with group and sam color for each group using chart.js?
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to create rounded bars for Bar Chart.js v2?
- Chart.js Bar Chart - how to chart bars from 0
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to put rounded corners on a Chart.js Bar chart
- chartjs : how to set custom scale in bar chart
- How to create stacked bar chart using react-chartjs-2?
More Query from same tag
- How to create vertical arbitrary line in financial chart?
- Integrate chartjs-chart-treemap with react-chartjs-2
- How can I hide point label in chart Js?
- First implementation - Chart object seems to be incomplete
- C# MVC5 View dynamically filled Chart.js dont show up
- ChartJS custom doughnut chart not showing in version 2.6.0
- chart.js Doughnut anticlockwise animation
- "Process is not defined" with react-chartjs-2 CDN
- Removing text shadow/blur from chart.js charts
- ChartJS autoskip:False not working on line chart
- Show point values in Radar Chart using chart.js
- Put chart.js chart inside JQuery tooltip?
- Add information on y Chart Js
- Where is radar.js?
- Having problems displaying multiple charts on a page
- Chart.js update function (chart,labels,data) will not update the chart
- how to display name on multi series pie chart in chartjs
- Chart.js Subtitle won't display
- charts js, doughnut chart not rendering tooptips correctly
- chartjs: need color bars near yAxis scale
- How to vary the thickness of doughnut chart, using ChartJs.?
- Legend isnt moving to the right on my doughnut chart created with chart.js
- Chart.js using the value of certain data in external json file
- Chart.JS Chart top left corner is blocked by some visual nodejs
- Update chart in Chart js
- Can we remove bar chart line on click on pie chart legend label?
- Custom data position on the doughnut chart in chart.js
- ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?
- ChartJS plugin with live label update
- Chart.js add icons like <i class='icon-peso'></i> to y-axis labels