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

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

Related

Is there a way on echarts to get the series colors

I'm using Echarts v5.2.2 (in an Angular project, with ngx-echarts) to render a line chart using multiple series. I have a listener for the 'highlight' event. This event is giving me an object with a batch of seriesIndex and dataIndex but it doesn't provide the color of each series.
Is there a way to get the colors that were dynamically assigned by echarts?
This is what I'm trying to implement:
Listen when the mouse pointer snapped into a graph line point.
Doing this via this.chartInstance.on('highlight', this.handleShowTip);.
Use the batch of seriesIndex & dataIndex where the mouse pointer snapped to render a table using color, x & y value as columns (the table is placed outside the graph.
I understand that I could use the tooltip's formatter option with a callback function which will provide the series colors in its arguments... and I could broadcast these arguments outside my graph component to render what I need anywhere I want, but this does not feel correct (a formatter is aimed to return HTML or string) and I wonder if there's a better way to get the generated series colors.
Thank you!
The Echarts uses a built-in palette based on the theme. The easiest way to get a set of colors is this:
myChart.getOption().color
To get the colors that are mapped to the series, you can do the following:
myChart.getModel().getSeries().map(s => {
return {
seriesIndex: s.seriesIndex,
seriesColor: myChart.getVisual({
seriesIndex: s.seriesIndex
}, 'color')
}
})
And the result will be something like this:
[
{
"seriesIndex":0,
"seriesColor":"#5470c6"
},
{
"seriesIndex":1,
"seriesColor":"#91cc75"
},
{
"seriesIndex":2,
"seriesColor":"#fac858"
},
{
"seriesIndex":3,
"seriesColor":"#ee6666"
},
{
"seriesIndex":4,
"seriesColor":"#73c0de"
}
]

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.

Redraw jqBarGraph

I'm using jqBarGraph to draw a graph on a page, but after the page loads, the graph updates with new values. How do I redraw the graph?
I'm updating the array I'm used to initialize the graph and then re-using it to initalize the graph (occurs within an each()).
Initial array:
array_msa_graph_1 = new Array(
[12300, 'MSA', '#88c100'],
[0, 'Gap', '#5e8500'],
[12300, 'ATB', '#74a400']
);
jQuery('#msa_graph_1').jqbargraph({
data: array_msa_graph_1
});
Updating array:
var graph_id = $(this).find('.msa_graph').attr('id');
var array_name = 'array_' + graph_id;
var graph_array = eval(array_name);
var msa_value = getMSA(graph_id);
graph_array[0][0] = msa_value;
$('#' + graph_id).jqbargraph({
data: graph_array
});
However, in the redraw process, it seems the array gets appended to the already existing graph and doesn't update the existing columns and labels.
What am I doing wrong?
Woah, this is quite an old post. I am also implementing bar graph using this plugin. I was having this trouble yesterday. I managed to solve this issue by taking a look at their page source. I found out that the person was able to clear the modification made on the graph. Hence, is this line of code that reset the values. $('#DivforGraph').html(''); //reset graph during dynamic change :)
*I will post the solution here.Maybe it might benefit someone who is facing the same problem as us! Cheers! ^_^

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()

Why isn't my highcharts chart getting reset/destroyed properly?

In my code I'm initializing the chart like this...
<script type="text/javascript">
var chart = null,
defaultOptions = {
chart: etc etc
};
function drawDefaultChart() {
chart = new Highcharts.Chart(defaultOptions);
}
$(function() {
$(document).ready(function() {
drawDefaultChart();
});
});
</script>
then in the body I have
Reset
but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...
function drawDefaultChart() {
chart.destroy(); //this makes the chart not work at all
chart = new Highcharts.Chart(defaultOptions);
}
You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?
my live example is here http://goo.gl/sGu0M
//////// UPDATE
I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.
this was the link that eventually helped me figure it out. http://jsfiddle.net/dane/YUa3R/34/
Always it's recommend to refer API documentation.
use following snippet to destroy the chart $('#container').highcharts().destroy();
Click here for a working solution.
First off, I know NOTHING about highcharts, but it would seem you need: (from your actual page)
function drawDefaultChart() {
$("#container").empty();
chart = new Highcharts.Chart(defaultOptions);
}
to be
function drawDefaultChart() {
$("#container").empty().highcharts(defaultOptions);
}
OR perhaps:
function drawDefaultChart() {
$("#container").highcharts(defaultOptions);
}

Categories