-
AlexJune 23, 2016 at 8:18 am #6232
Hi Vizuly
It’s probably a long shot here, but I still want to give it a try just in case this may be a simple step to you.
I just bought the line area chart package on vizuly because I need and only need the stream layout view (including tooltip and zoom) in that package. I’m a beginner on javascript and d3, and previously I thought it should be pretty straight-forward to strip the menu and keep the d3 part for just the stream layout, but I’m obviously wrong…
I find the code a bit hard to follow with quite a bit of dependencies, especially the vizuly framework. I know all the tool-tip/zoom/stream layout can be realised just using d3, so just wonder if you have a d3 version for just the stream layout, or maybe is it possible for you to highlight the stream part of the code for me in any way.
Thank you for your concerns and I hope to hear from you shortly.
Regards
Alex
vizulyJune 23, 2016 at 8:20 am #6233Hello Alex,
With just a little bit of javascript knowledge it should be relatively straightforward to remove the menu/test container code to use the line chart in your own application. It is helpful to use a browser debugger to troubleshoot any issues.
But alternatively, you can build your own web page and simply include the appropriate vizuly and d3 javascript files and use these lines to set up your line chart
viz.data(data) .width(800).height(600) .y(function (d, i) { return d.Volume; }) .x(function (d, i) { return d.date; }) .on("update",onUpdate) .on("zoom",zoom) .on("mouseover",onMouseOver) .on("mouseout",onMouseOut) .on("measure", onMeasure); theme = vizuly.theme.linearea(viz).skin(vizuly.skin.LINEAREA_FIRE);
In your case you will want to also do the following to have the data layout in a stream mode.
viz.layout(“STREAM”).update();
Your other request of JUST using D3 to accomplish what you want is much trickier – as D3 does not have a line chart, and a line chart is combination of many D3 elements, with appropriate measurements, layouts, events etc. That is what Vizuly is for – to make it easier to build charts with D3. The relevant D3 code that generates the line chart can all be found in src/linearea.js. This has all of the D3 code that creates the chart.
– Tom
AlexJune 23, 2016 at 3:19 pm #6237Hi Tom
Thanks so much for the reply. I’ll have a look into it myself.
Another feedback on the line and area chart is when I run it locally in chrome, there seems to be a small bug in the code.
When the chart is up and running, the default vertex type is for volume, then if I change it to other vertex type and try to switch it back to volume, the graph will just become empty. However, switching among all other types is working just fine. Could you please look into it? Thanks.
P.S. the errors shown in chrome console when this happens is:
`
d3.min.js:1 Error: <g> attribute transform: Trailing garbage, “translate(0,NaN)”.
…
… (lots of errors of this type with different translate coordinates)
`
vizulyJune 23, 2016 at 3:32 pm #6238Hi Alex,
Good catch, that bug was resolved a little while ago, but apparently we did not update the download file.
If you want you can download it again and that bug should be resolved, it was just a simple string that was misspelled in the test container.
Thanks for the feedback!
– Tom
vizulyNovember 21, 2016 at 12:44 pm #6695For anyone else interested in this topic, you can find our basic example of Vizuly code without the extra test container code here:
-
|
You must be logged in to reply to this topic.