I have an array of data for values and an array of data for sample counts and I would like to display both in the tooltip for the point on the line chart.
I am using a web call to populate the arrays of data using an angular.forEach loop. I then set the data series of the chart as:
var all_values= [];
var all_samples= [];
var timespan= [];
angular.forEach($scope.data, function (value, key) {
all_values.push(value.All_Values); //y axis values
all_samples.push(value.All_Samples); //additional tooltip data
timespan.push(values.TimeSpan); //this is for the x axis
});
$scope.chartConfig.series[0].data = all_values;
All of this works fine but how can I get my all_samples to be included in the data series so that I can display it on the tooltip?
If you want to display extra info in tooltip, then you need to set custom pointFormat / pointFroamtter / format / formatter - depends how much you would like to change tooltip display. Next, you could have external array for extra info or you could just add more properties to each data point. If you are using arrays for data points, then use keys.
Example: http://jsfiddle.net/ge2rbgt9/
Related
I have a richshaw plot with tooltips enabled (Rickshaw.Graph.HoverDetail). I need to display more information in it, not just series y values. Can it be accomplished with Richshaw or do I have to use the underlying d3 functions.
Sorry for the late response. Yes you can actually render whatever you want inside rickshaw tooltips with Rickshaw.Graph.HoverDetail .
Lets say for example that you have a function that requires as inputs series, x and y and lets assume that we have another array with the same length as x array called dates:
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph,
formatter: function(series, x, y) {
var content = '<span class="graph-dates">'+dates[x]+'</span><br><span class="graph-price">'+series.name+": "+currency+parseInt(y) +'</span>';
return content;
}
});
The code renders on the hover details a date for the chosen x point and the price for that date.
In the documentation of rickshaw graph you can find further information.
Here is the actual example by rickshaw.
I am working on dimple js (d3) charts and looking for filtering it with date range.
Shortly i am developing graph with date range inputs and after submit that form my dimple.js chart will be refreshed and shows chart for selected date range.
I am using .tsv file for genrating report graph. my code look like below.
d3.tsv("data.tsv", function (data) {
myChart = new dimple.chart(svg, data);
myChart.setMargins("60px", "10px", "10px", "75px");
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
var y = myChart.addMeasureAxis("y", "Sales Value");
y.showGridlines = true;
y.tickFormat = ',.2f';
myChart.addSeries(null, dimple.plot.bar);
myChart.draw(1000);
});
Help me to solve this. Thanks in advance.
I am afraid you cannot do that directly in dimple.js.
A much better and easier way is to create and filter your dataset each time you submit your form and render the dimple chart again. I had worked on a similar project a few days back where I had to filter my dimple graph according to a range set by the user.
Instead of taking the .tsv file directly as your data, you can put the contents your file in a 2D array, representing rows and columns of your file. I had done this using java and had then passed this array to my JavaScript code.
Suppose that xydata[][] is our array, the "Months" column is stored in the row xydata[0][i] and that the "Sales Value" column is stored in the row xydata[1][i]
Now, each time you submit the form, you need to create the data set, filtering as required. The code is something as follows:
function createChart(range)
{
xydata=[["Jan","Feb","Mar","Apr","May"],[10,20,30,40,50]]; //Created data example
var data=[]; //Array for filtered data
var range="Apr"; //Passed from the form
for(var i=0;i<xydata[0].length;i++){
if(range<xydata[0][i]) //Filtering Condition.. Additional logic required here
data.push({
Months:xydata[0][i],
SalesValue:xydata[1][i]
}
);
}
//data now contains the filtered data (before April in this case)
myChart = new dimple.chart(svg, data);
//and then draw the chart accordingly.
};
Note: You will require some additional logic to let the compiler know, for example, Jan < Apr
I have written a generic example
my json data is :
{"09/02/2014 15:36:25":[33.82,33.42,40.83],"08/11/2014 16:25:15":[36.6,33.42,40.45],"07/30/2014 08:43:57":[0.0,0.0,0.0],"08/12/2014 22:00:52":[77.99,74.1,80.12],"08/12/2014 21:19:48":[56.91,63.23,52.42],"07/23/2014 13:37:46":[0.0,0.0,0.0],"08/11/2014 17:35:21":[40.9,43.83,38.34]}
I want this data into high chart basic line graph i want date in x-axis and data in y axis.
ex: date is for x-axis : 09/02/2014 15:36:25
data is for y axis : 33.82,33.42,40.83 (for three different line say data1,data2,data3)
for manually generated graph i was using : http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
how to get dynamically generated graph from above json data
You need to first of all get the values from your JSON data like:
Object.keys(data); //this will return dates
data[xAxis[0]]; //this gives the values corresponding to each date (currently first date)
then you need to populate the chart with these values dynamically:
var chart = $("#container").highcharts();
for(var i=0; i<xAxis.length; i++) {
chart.addSeries({
name: xAxis[i],
data: data[xAxis[i]]
});
}
and btw you can't show the dates on xAxis because each data value have 3 points but x axis categories if you put the date their will be more than that. the logical representation would be showing each date as separate series like i did in my example.
See the DEMO here
I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.
I have large amounts of data formatted in JSON formats, I recently scripted the data to conform to Flot's data set, except for one problem, the data has no x values.
EG:
{
label: "testMetric1",
data: [12,314,123,41]
}
I want to simply graph these values as y values. Is there a way to tell Flot to just assume the x series will be sequential (i.e. graph 12 at x = 1, graph 314 at x = 2, etc.)
There isn't a way to automatically have it do that, no.
So before you feed your data to flot, do something like this:
var data = [12,314,123,41];
var new_data = [];
for (var i=0;i<data.length;i++){
new_data.push([i,data[i]]);
}
//then call flot here with new_data
My advice is that you write a converter function that inserts the desired x values into your data for easy use with flot.