Currenly i am able to make the chart with configuration in my jsfiddle. But one thing left is that i want the markers (points) display above the gridlines. As my research, the highchart marker does not have options for zIndex.
http://jsfiddle.net/ngoclamnn/jsegagwp/1/
Tried with this code:
function(chart){
console.log(chart);
chart.series[1].graph.toFront();
chart.series[1].group.toFront();
chart.series[1].markerGroup.toFront();
}
But it still not success. Hope that someone can help :)
The feature is not available in Highcharts because all series are in the same group. You could (as suggested in comments) manipulate DOM.
Demo: http://jsfiddle.net/qaytamvy/
The solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Related
I'm taking a look at this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/
I'd like to do a very similar chart but it's not working out how I want it to. My current fiddler is this: (see edit below!)
The main functional differece is in the first fiddler, he's using a range, whereas I'm using just actual values (and timestamps).
What's not working for me:
The labels are jacked up. If I try to mouse over a point on mine it's way off; it seems to be 'stuck' on the left. If you try to mouse over you should see the same issue.
I can't zoom in. On his chart you can't zoom in either, but on another chart I was messing around with, it seems like all I needed to do to add zooming was put in:
chart: {
zoomType: 'x'
},
But that doesn't seem to be working here.
The points are so big that the bottom part in green looks too 'blobby'. How can I just remove those point markers?
In summary, how can I have this map have just lines with no blobs, with zooming, and labels that follow your mouse?
EDIT: I have a new version, where the labels work and the blobbiness is removed. However the zoom still doesn't work. How can I enable the zoom?
http://jsfiddle.net/qprmjm67/
Turns out that there's a much easier way to do this, using zones.
stackoverflow makes me put code to put a link. So I'm typing fake code here.
http://jsfiddle.net/2f1c659L/
I have 3 similar pie charts. They use same dimension but different groups so, their legends look the same. Instead of having 3 same looking legends, I'd like to bind only a single legend to those charts. I tried creating a legend separately and assign it to the charts, however, it didn't work. Is there actually a way to do such thing?
This is not directly supported by dc.js, but it is very similar to a legend on a composite chart. I think if you were willing to do some hacking, you could override the legendables function on the chart you want to put the legend with, and have it accumulate the legendables from its sibling charts.
Take a look at pieChart.legendables:
https://github.com/dc-js/dc.js/blob/master/src/pie-chart.js#L419
And then compositeChart.legendables
https://github.com/dc-js/dc.js/blob/master/src/composite-chart.js#L363
for inspiration.
If this is too much hacking for you, please file an issue. It would certainly be nice to support!
I have been using KendoUI Dataviz for only a short time, and have found I am able to customize it in almost anyway to meet my needs except one. I have two different charts where certain series just happen to have more than one point with the same plots. (dynamic data) I am unable to see all of the tooltips for all of the markers (since they are on top of each other), which means I am also unable to use the seriesClick or seriesHover events on those that are hidden. I have searched Kendo's forums, Stackflow and even Google but can't find anything specifically on the unreachable issue. Kendo's forums mention hiding the tooltip and making a custom one, but I haven't found anything that addressed the fact that some series markers are just unreachable and I need to reach them to use those events. Does anyone have an idea on how I can reach all markers for the series?
I've not been able to figure out a way to show "hidden" data points. I've had to do something similar in the past, and used a custom tooltip template function. In the function I grab the category (x value in my scatter chart sample), and get all matching items from the datasource. Then just put together some sort of list/etc. and return that. You can always go super fancy and make a box with tabs and the whole nine yards to show each dataItem on that particular point.
See sample on jsbin
http://jsbin.com/ONuQUgiY/1/edit
I am looking into trying to stack completely different series/charts on top of each other but on the same chart. For instance I could have two charts stacked vertically and when I move the cross-hair on one, it will move on the other almost as if the charts are linked. As well, I'd when I zoom in one, it would trigger the other to zoom. Please see the image at the bottom I "doctored" to give you an idea of what I'm trying to accomplish.
Things I've tried:
creating two completely separate charts and stacking them.
This is the closest I've gotten to what I need but they are still separate entities so it won't work for what I need, cross-hairs/zooming/etc. all need to work as though the charts are linked/combined.
In the options I tried the "stacking" option.
this won't work because it "stacks" or groups data, I want to literally have two separate series that might not have anything in common with each other.
Rendering muliple y-axis.
the only issue with this is that it's overlapped data, I'd like it to be offset so we can see it in a stacked layout.
I'm pretty new to using this library so if any of my terminology or explanation doesn't sound right, please sound off and I'll elaborate.
Thanks everyone!
I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.