For example I have plotted a line chart based on the date and number of students registered on a particular day on x and y axis respectively. When i mouse over to a particular point in the line chart i can view the tool tip displaying the x and y axis values. Instead I want to display the names of the students registered on that day when I mouse over to a particular point. Is there any solution for this problem? If there is no work around with Jqplot, please suggest me any other charts.. Please help me out. Thanks in advance.
Here's a little example I put together for you.
It uses the largely undocumented tooltipContentEditor property of the highlighter plugin:
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor:tooltipContentEditor
}
Where your data is predefined like:
var students = [
['Bob','Mark','Dave'],
['Tim','Mike']
];
var data = [students[0].length,students[1].length];
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return students[pointIndex].join(", ");
}
Related
I Need 10 different Colors in Pie chart Using the Library of pykcharts.
Is it possible Because As per the Documentation they Provide only one shade_color.
Go through this link http://pykcharts.com/tour/pie
#Tkingovr chart_color is for all charts but One dimensional. You can use shade_color for One dimensional charts https://github.com/pykih/PykCharts.js/wiki/Colors#shade-color
#KIRANJOSHI
var selector = "pieContainer", // selector of your chart
colors = ["red","blue","green","yellow","orange"];
setTimeout(function() {
d3.selectAll("#" + selector + "_svg path.pie")
.attr("fill",function(d, i) {
return colors[i];
});
},1000);
setTimeout is required since the chart may take time to render and there is no provision in the current version to run a piece of code on chart render complete.
According to the documentation you should be able to pass in values like this:
{
"chart_color": ["blue","green","Yellow"]
}
The chart also accepts any of the following:
Color Names (Eg: "red")
Hex values (Eg: "#B0171F")
RGB values (Eg: "rgb(176,23,31)" )
I have a dynamic LineChart. I am setting the zoom to false but I want to be able to trigger an Ajax Event when selecting an area in the Chart (like the zoom functionnality when selecting the area you want to zoom), I want to call a server method and getting the max and min x axis values of the selected area.
Can anyone help with this?
Else if I set the zoom to true, is there any way to get the values from the zoomed area ?
PrimeFaces and JSF is in this context nothing more than an html/javascript/css generator. If you look at the source of the generated page in your browser developer tool, you'll see a lot of javascript, including all datapoints.
<script id="j_idt87_s" type="text/javascript">
$(function(){PrimeFaces.cw('Chart','chart'{
id:'j_idt87',
type:'line',
data:[[[1,2],[2,1],[3,3],[4,6],[5,8]],[[1,6],[2,3],[3,2],[4,7],[5,9]]],
title:"Zoom",
legendPosition:"e",
axes:{
xaxis:{
label:"",
renderer:$.jqplot.LinearAxisRenderer,
tickOptions:{angle:0}},
yaxis: {
label:"",
min:0,
max:10,
renderer:$.jqplot.LinearAxisRenderer,
tickOptions:{angle:0}}
},
series:[{label:'Series 1',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'Series 2',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],zoom:true,datatip:true},'charts');});
</script>
So the answer to this question is valid for the PrimeFaces charts as well.
Running the following code (from the link above) in your browser developer tool on the zoom examples will show you the data points that fall in your zoom region
chart = PF('chart').plot;
PF('chart').plot.target.bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
var plotData = plot.series[0].data;
for (var i=0; i< plotData.length; i++) {
if(plotData[i][0] >= chart.axes.xaxis.min && plotData[i][0] <= chart.axes.xaxis.max ) {
//this dataset from the original is within the zoomed region
//You can save these datapoints in a new array
//This new array will contain your zoom dataset
//for ex: zoomDataset.push(plotData[i]);
console.log(plotData[i]);
}
}
});
Replacing PF(çhart') with PF('myLineChartWV') will make it work for your example to
Once you have gathered the data, you can use this in e.g. a PrimeFaces remoteCommand to pass it to the server.
Notice that this only takes the x-axis value of the zoom into account. If you want the y-axis taken into account to (so the real zoom area), add
plotData[i][1] >= chart.axes.yaxis.min && plotData[i][1] <= chart.axes.yaxis.max
to the if-statement in the loop.
Also notice it just takes the first series. If you have multiple, you have some simple homework to do.
Is there a way I can get the x-axis to switch from showing hour, to e.g. week days, months .. when zooming out?
Currently my x-axis is configured as such:
xaxis: {
mode: "time",
minTickSize: [1, "second"],
timeformat: "%H:%M:%S",
}
My default the graph looks nice, but when I zoom out enough times, the labels on the xaxis just display "00:00". How can I change the timeformat so that the date is included also? E.g. Tue 27 00:00 or similar.
Here's an example of when the graph is zoomed out a lot (obviously I need to remote some datapoints to make it look smoother..)
You can add a date using the standard specifiers, like %Y-%m-%d. A full list can be found in the API docs under the Time Series Data section.
To get the format to update based on the range, i.e. show HMS when zoomed in but YMD when zoomed out, is trickier. You'll need to listen for the 'plotzoom' event and check the range to see whether the format needs to change. If so, use getOptions() to retrieve and update the plot's options, then call setupGrid & draw to redraw the plot using the new format.
I solved this by making a custom tickFormatter for the X-axis:
In your xaxis options put:
xaxis: {
mode: "time",
tickFormatter: customXAxisFormatter,
...
}
Then your customXAxisFormatter could be eg. :
function customXAxisFormatter(val, axis)
{
var d = new Date(val);
// If time difference is more than 24 hours
if ((axis.max - axis.min) > (24*3600*1000))
return d.strftime("%a<br>%H:%M");
else
return d.strftime("%H:%M");
}
I hope this helps :)
I am creating a plot chart in Flex that takes in an array collection. The array collection has the following format:
var provinces:ArrayCollection = new ArrayCollection (
{PROVINCE:"Ha Noi", Male:50000, Female:20000},
{PROVINCE:"Ha Tay", Male:100000, Female:10000},
{PROVINCE:"Quang Ninh", Male:75250, Female:45021},
{PROVINCE:"Hai Phong", Male:10000, Female:25000});
I want to use different colors to display different provinces on the plot chart. Moreover, I want to create a legend for different provinces. Would anyone know how to do it? Some code example would be great.
Thank you.
I found this solution.
If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?
Thanks
Sorry for my bad English.
Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:
$("#highligher").click(function () {
var e = jQuery.Event('click');
e.pageX = 250; //add a made up x/y coordinate to the click event
e.pageY = 250;
$('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});
Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/
The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.
Just got this working by altering a few things...
I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.
Then, after these two lines in jquery.flot.pie.js...
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
I added...
plot.highlight = pieHighlight;
plot.unhighlight = pieUnhighlight;
We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.
var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});
The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.
NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:
var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';