Hello 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

Hi 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