I tried to make Mike Bostocks example of focus + context via brushing (http://bl.ocks.org/mbostock/1667367) make reusable following his convention: bost.ocks. org/mike/chart/ [sorry, I'm not allowed to post more than 2 links yet]
I modified his brushing example a little bit, worked perfect, but I'm failing on making that reusable now. Whenever I try to select something on the context chart, the focus chart zooms in - but never out again.
The code is here: http://plnkr.co/edit/VoEL1eFJI1Xnajzf82Zq?p=preview
Can anyone give me a hint what I'm doing wrong here?
You are using the wrong scale for the brush -- it should be the one assigned to the context chart, xScaleTimeLine in your case. Fixed example here.
On a general note, including data processing (such as parsing dates and formatting numbers) in your reusable chart component is not best practice. I would first process the data itself and then pass it to the chart component such that no further processing needs to be done. A chart component like this can be used even if the data processing required is quite complex (e.g. nesting).
Related
I have about 500 XY points which I would like represent as line using DHTMLXChart. Apparently the only suitable chart (scatter) do not allowing to do it. Any idea how to solve this issue?
There is no native way to do this.
You could use line chart with markers:
Example
Ok on that confirmation you're not bound to a DHTMLX, I would go with Google Charts it's based on opinion, but more importantly on functionality.
The Google Charts API is very easy to work with as it takes raw Javascript data and applies it to the chart and that data may be shoved into multidimensional arrays or as I prefer, JSON Data.
Additionally the Google Charts API has what you are after which is located at https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart or alternatively...
https://developers.google.com/chart/interactive/docs/gallery/scatterchart
P.S. It may be a hefty documentation to read, but learning Google Charts API pays dividends and this would Replace DHTMLX instead of being an additional plugin.
Hope that helps.
I've created a matrix chart using D3.js and I'm having a bit of difficulty creating a sort of grouped "axis" (although I'm not sure I can call it an axis?).
This JS Bin shows the current route I've chosen. Essentially what I've done is to create 3 separate lines to create the "axis". Ideally I would like to use the d3.axis object but I'm not sure how I would go about achieving this.
Although this current method does work it feels dirty - I also have concerns about scaling. Does anyone have a better suggestion of how to approach this?
The end result is something along these lines (notice labels below lines):
you can use
.scale(x).tickValues(xVals)
where xVals are the array of values
Here may be this demo will help you
I am following this example of a difference chart. I've added buttons on my page that make ajax calls to fetch new datasets, and then I redraw the difference charts. There are several difference charts on my page.
Upon redrawing, the rendering of the above/below areas becomes corrupted: x-values have both above and below areas rendered. I'm fairly certain it's not a back-end problem, because the initial load produces a correct chart; changing a parameter messes up the redrawn chart; and going back to the default parameters and redrawing the original chart also produces a corrupted chart. In fact, I can partially make out what's happening: the original time series is present on the new graph. It's almost as if there are three series being graphed.
I think it has to do with .datum. I don't fully understand how it works, since it differs from the standard enter/update/exit methods associated with .data. I've read the documentation, but am still confused. Some possibilities:
The original data is hanging around (even though I clean out the container with $('#chart').html(''))
The .append(g) is adding groups without removing the earlier ones.
The svg.append("clipPath").attr("id", "clip-below") is causing problems, since multiple nodes have the same id (even though again, I'm not sure how this could happen since I remove the nodes before the redraw).
I feel like I'm missing a lot of fundamentals here, even though I've spent a decent amount of time trying to understand the library. Can anyone see anything obvious, or point out some good resources for me to look at?
UPDATE: This has to do with there being two charts on the page. I noticed this when I opened the inspector and closed it. The areas of the bottom chart (the difference chart) had screwed up, and I noticed the new line that it was using to separate the above-area from the below-area looked a lot like one of the lines from the top chart.
Does anybody have experience with dependency issues/namespace collisions when drawing two charts on the same page?
The problem was, the id's for the clipping paths were the same.
I would still like some more resources concerning .datum.
I am new to D3js and working with the parsets reusable chart (http://www.jasondavies.com/parallel-sets/). I want to make changes to this chart such as adding sort based on thickness of ribbons on mouseover, and overlaying two parallel sets over each other to compare different datasets at once (The one at the back being faded).
Being new to D3js, I am having difficulty in understanding where to start. I am currently trying to understand the code of d3.parsets.js but its not going too well. If anyone has worked with this before and understands the procedure being followed in the code, please help me out.
The best adaptation I've seen of d3.parsets.js is by Hongjian Yang: Airline Vis adapted from d3.parsets.
It may be able to accomplish some of what you're looking for, though I'm not sure you'll readily be able to overlay two datasets (nor am I sure I understand the need to do so).
creating simple charts with BIRT is easy, but now I would like to bring some more life to them...
imagine a simple line chart. Let's define as a requirement, that the maximum value should be highlighted. A further requirement would be that if the user clicks on this data point, something happens.
How can I solve this?
I can imagine that I could created a second value series which consists only of the highlighted data points.
But it would be nicer if there was a JavaScript API (or even a server side java api) with which I could loop through the data points and add a highlight on the fly. Is this possible?
I think I've found a good starting point:
http://www.birt-exchange.org/org/devshare/designing-birt-reports/276-birt-chart-scripting-dynamic-markers-and-datapoint-colors/
Now I have to find a way to add on click events to certain data points...