We Keep Coding

Chart.JS: How to add Data to a specific dataset

Currently I use this to add data to my charts:
targetChart.addData(value,targetDataSetIndex,"");
because I thought that this would add data to a specific set, adding an empty label.
But this doesnt work.
I then tried doing it myself by introducing a new method in the Chart.js script, like this:
addDataValueToSpecificDataSet :function(value,datasetIndex)
{
this.datasets[datasetIndex].points.push(new this.PointClass({
value: value,
label: label,
x: this.scale.calculateX(this.scale.valuesCount + 1),
y: this.scale.endPoint,
strokeColor: this.datasets[datasetIndex].pointStrokeColor,
fillColor: this.datasets[datasetIndex].pointColor
}));
}
But when executing it isnt found. Where in Chart.JS do I need to put this so that it is accessible from the outside? Or can someone please tell me how im supposed to add data to a chart with multiple datasets one by one. I cant find it in the documentation which covers everything BUT adding and removing data.

This works for me (you probably just need to add update):
function addData() {
myBarChart.data.labels[12] ="2017";
myBarChart.data.labels[13] ="2018";
myBarChart.data.datasets[0].data[12] = 500;
myBarChart.data.datasets[0].data[13] = 600;
myBarChart.update();
}
CodePen: Add/Remove adjust data Chart.js

JQuery Flot : How to add data to the existing point graph instead of redrawing

I am plotting a point graph and the graph should get update with new data for every 5 secs. Here min and max range are always fixed
Currently, when I get new data from server, I do merge the new data to the existing source.data and plotting the complete graph.
So, I dont want to redraw the complete data again and again. As the length of the source.data is increasing, performance is going down . So instead of redraw complete data, can I add only the new data to the existing graph
Please find the source code here
var source = [
{
data: [],
show: true,
label: "Constellation",
name: "Constellation",
color: "#0000FF",
points: {
show: true,
radius: 2,
fillColor: '#0000FF'
},
lines: {
show: false
}
}
]
var options = {...}
$.getJSON(URL , function(data) {
...
$.merge(source[0].data, new_data);
plotObj = $.plot("#placeholder", source, options);
}

Follow this steps:
plotObj.setData(newData);
plotObj.setupGrid(); //if you also need to update axis.
plotObj.draw(); //to redraw data
Another usefull method is getData(). With this method you can get the current data.
var data = plotObj.getData();

Your method of calling $.plot over and over should be avoided. It used to leak memory (not sure if it still does).
That said, #Luis is close, but let's put it all together. To add data to an existing plot do this:
var allData = plotObj.getData(); // allData is an array of series objects
allData[seriesIndex].data.push([newXPoint,newYPoint]);
plotObj.setData(allData);
plotObj.setupGrid(); // if axis have changed
plotObj.draw();
It should be noted that this does redraw the entire plot. This is unavoidable with HTML5 canvas. BUT flot draws extremely fast, you'll barely notice it.

Rickshaw RangeSlider - Zoom in by default

I am looking at a simple Rickshaw chart with data from a JSON file.
d3.json(data, function(error, json) {
var graph = new Rickshaw.Graph( {
element: document.getElementById(chart_id),
renderer: 'line',
series: [
{name: 'myseries',
data: json[0].data}
]
})
graph.render();
});
I would like to access the graph after it has been rendered. Since the graph is created within a callback function I cannot simply return the handle. Also document.getElementById(chart_id) does not have a chart attribute.
My goal is to, for example, allow users to specify a certain range for multiple charts at the same time (e.g. last 5 years) without having to adjust the RangeSlider for each one of them. With access to the chart I could then do
new_rng = [new_min,new_max]
graph.window.xMin = new_rng[0]
graph.window.xMax = new_rng[1]
$('#' + slider_id).slider('option', 'values',new_rng)
Any ideas?

I think this is a similar problem to the one I encountered with a xively feed where the data is not returned when the graph is rendered. Here's my post.
Multiple calls to xively.feed.history()

jVectorMap - fill country on button press

Using jVectorMap, I would like to have a function that takes the country code as its parameters, then highlights that country on the map. For example:
function colorCountry(var code){
$('#world-map').vectorMap(
code : '#686868',
));
}
That is just a mockup; I'm asking here because I have little experience with Javascript / jQuery and haven't been able to find a suitable solution on Google.
I would like the function to simply color the country it is provided with, rather than clear the map so only one country is colored. For example:
colorCountry("DE");
colorCountry("US");
..would present the user with a map with both US and DE colored, rather than just one.

Try this:
$('#world-map').vectorMap({
series: {
regions: [{ values: {
"US":"#686868",
"DE"："#686868"
}, attribute: 'fill' }]
}
});

Multi bar chat with Flot

Any sample code for chart with multiple bars using flot ??
similar to this example . The given patched files are not working for me. Anywhere I can download the latest files for multi bar graph.
Update
I am sure Flot is a very good library but plugins/add-ons are not available easily and the examples given on the website are very basic, so I decided to use jqPlot instead

Updated Info: Andión's answer makes reference to this library. Bars-side-by-side
You can download the code here:
http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
The result is :

Have you tried the orderBars plugin?
You can download the code here

You have to treat each bar as its own data series, so if you see 11 bars you need to create 11 data series.
Here's sample code for 2 bars.
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 =[0, 2];
var d2 =[1,3];
var startData = [
{ //first series
label:"d1",
data: [d1],
bars:{
show: true,
fill: true,
fillColor: "red"
}
},
{ //second series
label:"d2",
data: [d2],
bars:{
show: true,
fill: true,
fillColor: "blue"
}
}
];
var option={
series: {
bars:{
show: true,
fill: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: { ticks: 5 }
};
$.plot($("#placeholder"),startData,option );
});

Double-check the values that you're passing in on the X-axis (of your bar series).
You don't need a different series for each bar, that would be.... excessive.
What you do need is a different series for each colour of bar (or more accurately, each different set of rendering settings that you'd like to have in your chart).
I realize you've moved on, but if you want to post the code that was giving you issues, it might help other people. The examples on the flot site are pretty straight-forward, so it may have just been something simple (like your X-axis value if they weren't defined) that was tripping you up.
I'm using flot in a production system to render three different bar series (red, yellow and green bars) so it sounds like a very similar solution what you're trying to do.