reuse jqplot object to load or replot data - javascript

I am using JqPlot for charts , my problem is i want to load different data on different click events.
But once the chart is created and loaded with the data for the first time; i don't know then how to load data when another event fires that means i want to reuse the chart object and want to load/replot the data when events get fired something like...
chartObj.data = [graphData]

That seems to work to replot data.
chartObj.series[0].data = [[0, 4], [1, 7], [2, 3]];
chartObj.replot();
Also, you can check this: https://groups.google.com/group/jqplot-users/browse_thread/thread/59df82899617242b/77fe0972f88aef6d%3Fq%3D%2522Groups.%2BCom%2522%2377fe0972f88aef6d&ei=iGwTS6eaOpW8Qpmqic0O&sa=t&ct=res&cd=71&source=groups&usg=AFQjCNHotAa6Z5CIi_-BGTHr_k766ZXXLQ?hl=en, hope it helps.

Though this is an old question.
As the accepted Answer didn't work for me and i couldn't find a solution in the jqPlot docs either. I came to this solution
var series = [[1,2],[2,3]];
chartObj.replot({data:series});
Src: Taking a look at the replot function.
function (am) {
var an = am || {};
var ap = an.data || null;
var al = (an.clear === false) ? false : true;
var ao = an.resetAxes || false;
delete an.data;
delete an.clear;
delete an.resetAxes;
this.target.trigger("jqplotPreReplot");
if (al) {
this.destroy()
}
if (ap || !L.isEmptyObject(an)) {
this.reInitialize(ap, an)
} else {
this.quickInit()
} if (ao) {
this.resetAxesScale(ao, an.axes)
}
this.draw();
this.target.trigger("jqplotPostReplot")
}
The line
if (ap || !L.isEmptyObject(an)) {
this.reInitialize(ap, an)
}
shows us it needs a truthy value for ap to pass it as first parameter to the internal reinitialize function. which is defined as var ap = an.data || null;
Its as simple as this but unfortunately not documented anywhere i could find it
Note that if you want to redraw some things defined in your jqPlot options, like legend labels, you can just pass any option to the replot function. Just remember the actual series to replot has to be named "data"
var options = {
series : [{
label: 'Replotted Series',
linePattern: 'dashed'
}],
//^^^ The options for the plot
data : [[1,2],[2,3]]
//^^^ The actual series which should get reploted
}
chartObj.replot (options)

jqplot allows for a fast dynamic data update.
According to the documentation (data section), "Data should NOT be specified in the options object ..." (fiddle)
plot1.replot({data: [storedData]}); // data should not be passed this way
"... but be passed in as the second argument to the $.jqplot() function."
if (plot1) plot1.destroy();
plot1 = $.jqplot('chart1', [storedData]); // similar speed to replot
The fiddle shows this can be done with similar performance.

Empty graph div, before rendering the graph
$('#graphDiv').empty();
plot = $.jqplot('graphDiv', [graphValues], graphOptions);

The API has a replot/redraw method
Redraw This enables plot data and properties to be changed and then to
comletely clear the plot and redraw.

Related

How to display only one x-axis labels in Highcharts synchronized charts

I am using the Highcharts synchronized charts to display three different variables. However, in order to render cleaner graphs, I'd like to display the x-axis (which is the same for all three graphs) only for the bottom graph.
For that, I presume, I need to cycle at the end of the generation process through the charts and suppress the first two x-axis, kind like
for (i = 0; i < (Highcharts.charts.length - 1); i = i + 1)
{
chart = Highcharts.charts[i];
chart.xAxis.labels.enabled = false;
}
Here is the default fiddle.
I don't succeed in getting this to work. Can anyone help me out on this?
You can set the xAxis.visible property depending on the chart index:
success: function (activity) {
activity = JSON.parse(activity);
activity.datasets.forEach(function (dataset, i) {
...
Highcharts.chart(chartDiv, {
xAxis: {
visible: i === 2,
...
},
...
});
});
}
Live demo: https://jsfiddle.net/BlackLabel/cmdb5at0/
API Reference: https://api.highcharts.com/highcharts/xAxis.visible

Chart.js - Display data label leader lines on a pie chart

I have been playing a lot with Chart.Js but trying my hardest to avoid getting into Canvas itself due to time constraints and a personal preference of the SVG route of D3 et al.
I have a mixture of charts on a dashboard page, and everything looks fantastic except for one issue - you have to hover over a pie segment in order to see the underlying % or value.
For a dashboard view, my users would prefer to just quickly see some data labels on the segments - as with Excel - possibly easier to explain with an image:
https://support.office.com/en-gb/article/Display-or-hide-data-label-leader-lines-in-a-pie-chart-d7e7c62e-aaa5-483a-aa00-6d2c437df61b
The problem with other solutions I've found here are that they are simply displaying the value in the segment, but some segments are too small for this to be the way forward.
There were also other solutions that always displayed tooltips - but there was a lot of overlapping and generally looked quite horrible.
I would even be happy if the legend could display data next to it, but I don't understand why a lot more people haven't requested the same functionality - am I missing something?
This feature isn't available so far, so there is no really quick solution for that.
It actually is possible to show the data within the legend (I have done this for dashboards I create at work). You just need to use the generateLabels legend label property to achieve this.
Here is an example that shows the data value in parenthesis within the legend (this is done in the legend item text property that is returned from the function).
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc.custom || {};
var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
// here is where we are adding the data values to the legend title
text: label + " (" + ds.data[i].toLocaleString() + ")",
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
index: i // extra data used for toggling the correct item
};
});
} else {
return [];
}
}
You can see it in action at this codepen.

Save series chart type for later use

This may be more of a scope question than a HighCharts question.
I have a function that changes the chart type, please see below:
function ChangeChartType(chart, newType) {
newType = newType.toLowerCase();
var numberofseries = chart.series.length;
var i = 0;
if (newType == 'reset') {
for (i; i < numberofseries; i++) {
if (typeof chart.series[i].defaulttype == 'string') {
chart.series[i].update({
type: chart.series[i].defaulttype
});
}
}
} else {
for (i; i < numberofseries; i++) {
if (typeof chart.series[i].defaulttype != 'string') {
chart.series[i].defaulttype = chart.series[i].type; //The new property does not survive
}
chart.series[i].update({
type: newType
});
}
}
}
I am trying to create a new property on the series objects named "defaulttype" in order to save the chart type that was set when the chart was created. When a "Reset" button is clicked I want to change the chart type back to what is stored in the property.
The problem is the new property disappears outside of the function. What am I missing? Any help would be appreciated.
I created a fiddle to demonstrate the entire issue. http://jsfiddle.net/xeRRS/9/
You can also setup a default type in the chart object, then in your custom function refer to the Highcharts.charts[0] object (keeping your chart), extracting default serie from userOptions.
Highcharts.charts[0].userOptions.chart.defaultType
Example: http://jsfiddle.net/xeRRS/8/
Based on your code, a simple way to achieve your objective is to store the "defaultType" (camel casing helps see in the desert) property against the chart variable as it looks like the series array is overwritten somewhere inside the library. Here is the working version of your code http://jsfiddle.net/4ecHP/
On a different note, adding a property to an object where it is not clear on what is happening inside that object is a bit dangerous (the chart object may have a defaultType property already), instead you can store the defaultType as a global variable or create a _settings object in the window object and store all your chart settings there like
_settings={
height: 500,
spacingLeft: -35,
spacingRight: 12,
type: 'line',
zoomType: 'xy',
defaultType: null
}
In this case, on reset you can call chart.series[i].update({type: _settings.defaultType});

How to zoom into x axis for multiple Flot charts that were created

I'm trying to get zoomin to work for the Flot charts created using following code.
var options = {
yaxis: { min: 0 },
xaxis: { mode: "time" },
series:{
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true,
clickable: false,
mouseActiveRadius: 30,
backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
},
selection:{mode: "x"}
};
var pdata = [];
for (var key in datasets) {
pdata = [];
pdata.push(datasets[key]);
$.plot( $('<div style="width:1200px;height:600px;"></div>').appendTo('#placeholder'),pdata,options);
$('<h5 align="center">'+datasets[key]['label']+'</h5>').appendTo('#placeholder');
$('<br>').appendTo('#placeholder');
$("#placeholder").UseTooltip();
};
Here I'm creating multiple charts in a loop.
How can I add zoomin feature.
Thank you.
Follow-up to Mark's answer: unique IDs are not really a Flot limitation; that's a requirement of the HTML spec. Browsers generally let you get away with breaking this rule, but it's still not a good idea. Mark's answer is good, but here's one that doesn't require an array-search on every event:
$.each(datasets, function(key, dataset) {
var element = $('<div style="width:1200px;height:600px;"></div>')
.appendTo('#placeholder');
var plot = $.plot(element, [dataset], options);
var plotOptions = plot.getOptions();
element.bind('plotselected', function(event, ranges) {
plotOptions.xaxes[0].min = ranges.xaxis.from;
plotOptions.xaxes[0].max = ranges.xaxis.to;
plot.setupGrid();
plot.draw();
});
};
flot generally expects it's place holder div to have a unique id. You would then use this unique id to assign a specific plotselected event to that plot. The way you have your code structured, though, you are appending the real placeholder div to a parent div as you create your plots. I like your approach so we need to work around flot's limitation.
So, in your plot call give your real placeholder div a class name. This will give us something to bind the plotselected event to. Also you need to save a reference to all the plot objects you've created. I'd just use a global array.
myPlots.push(
$.plot( $('<div class="myPlot" style="width:300px;height:100px;"></div>').appendTo('#placeholder'),pdata,options)
);
Where myPlots is the global array and my class is myPlot.
After this, you can set up the plotselected handler on the jquery selector .myPlots. Next for the tricky part, you need to find your plot object reference inside the handler. The easiest way to do this, I found, is to loop your myPlots array and compare their divs to the div the event happens on:
$(".myPlot").bind("plotselected", function (event, ranges) {
for (var i = 0; i < myPlots.length; i++)
{
var aPlot = myPlots[i];
if (aPlot.getPlaceholder()[0] == event.currentTarget) //this is the correct plot
{
var opts = myPlots[i].getOptions();
opts.xaxes[0].min = ranges.xaxis.from;
opts.xaxes[0].max = ranges.xaxis.to;
myPlots[i].setupGrid();
myPlots[i].draw();
}
}
});
You'll see above I'm redrawing the plot a little different than in the flot examples. I prefer this method since you don't have to remember the data, you adjust the min/max options and you redraw.
Here's a fiddle putting this all together.

updating a line graph in d3 is not working

i am trying to update a line graph and it is not throwing any error but it is also not updating the graph.
i am deleting a point and adding a new one with an incremented rate and incremented created_at date by a second(trying to follow http://bl.ocks.org/benjchristensen/1148374)
function redrawWithoutAnimation() {
for (var i in chart_data) {
linedata = chart_data[i];
//delete first element of array
linedata.points.reverse().shift();
//create a new point
rate = linedata.points[0].rate + 1;
created_at = linedata.points[0].created_at + 6000;
new_point = {};
new_point.rate = rate;
new_point.created_at = created_at;
linedata.points.push(new_point);
console.log(linedata);
}
// static update without animation
svg.selectAll("path")
.data([linedata.points]); // set the new data
line(linedata.points); // apply the new data values
}
redrawWithoutAnimation();
setInterval(function () {
redrawWithoutAnimation();
}, 8000);
here is my code
http://jsfiddle.net/yr2Nw/8/
Working fiddle: http://jsfiddle.net/reblace/GsaGb/1
There's a few issues here...
First, you were updating all the chart_data in the for loop, but outside the loop, you were only trying to update the line still stored in the linedata variable after loop execution. You should try to avoid having variables with greater scope than they need. It can lead to bugs like this one:
svg.selectAll("path").data([linedata.points]);
line(linedata.points);
You should instead use D3's data joining to rejoin the new data to all the paths at once declaratively like so:
linesGroup.selectAll("path")
.data(chart_data)
.attr("d", function(d){ return line(d.points); });
What that code's doing is it's selecting the paths and then joining each of them to the chart_data elements and then binding the appropriate line generator to the "d" attribute for the appropriate path.
Then, you need to update your x axis and y axis otherwise the plot will just shoot off the drawn area. This code is updating the domains and then rebinding the axes to the dom elements so they redraw:
xAxis.scale().domain([
d3.min(chart_data, function (c) { return d3.min(c.points, function (v) { return v.created_at; }); }),
d3.max(chart_data, function (c) { return d3.max(c.points, function (v) { return v.created_at; }); })
]);
yAxis.scale().domain([
0,
d3.max(chart_data, function (c) { return d3.max(c.points, function (v) { return v.rate; }); })
]);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
There were a few other bugs I fixed them in the Fiddle. For example, you need to calculate the time for the new point based on the last element in the array, not the first, otherwise the line can't interpolate properly since its no longer a continuous function... and this is a bit more concise way to do your line updates:
for (var i=0; i<chart_data.length; i++) {
linedata = chart_data[i];
//delete first element of array
var removedPoint = linedata.points.shift();
//create a new point
var lastpoint = linedata.points[linedata.points.length-1];
var new_point = {
rate: removedPoint.rate,
created_at: lastpoint.created_at + 6000
};
linedata.points.push(new_point);
}
Also note that you shouldn't use the for(var in) loop for Arrays, that's for iterating over the properties in an object.
There's still some issues, but I think this should help get you over the hurdle you were stuck on. Anyways, it looks cool in action!
Fine fenac.. You facing so many problems since your data is not in good format for your requirements..
as per http://bl.ocks.org/benjchristensen/1148374 The x-axis data must be (data[] (data array))
Your data is something like this
[objects,object,object] where each object holds one element of xaxis value.. so the pushing and shifting is not possible..
try to change the format of the data (linedata.points) to an array (data[]) and try it out sure it works..
You just need to put all the values in linedata.points into an array data[] and use this data[] to animate your line..
Since yours the multiline.. you need to create 2D array and must pass them accordingly...
Cheers..
I updated your jsfiddle
setInterval(function () {
console.log(linedata.points);
var v = linedata.points.shift(); // remove the first element of the array
linedata.points.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)
redrawWithoutAnimation();
}, 3000);
http://jsfiddle.net/yr2Nw/9/
But still it wont works till you do that work...
Personal Suggestion: First Try with single line graph then go with looping for multiline...

Categories