I have to use g.raphaeljs library to create a scatterplot graph. Not only that but i am trying to get a trend line as well, and am wondering how I should go about this.
I was thinking of calculating the mean of the x axis and the y axis and drawing a straight line based on slope.... but am still stuck.
Any help is appreciated.
Also the data used to plot the points on the dot chart is provided by a user.
Related
Hi everyone, I'm trying to make a copy of this graph using the JS library ChartJS (the graph above was made with Python's Bokeh). As you can see, this isn't really a line graph - it's a scatterplot with connected lines. I'm struggling to recreate this in ChartJS - the library seems to be wanting to connect the dots with curves and fill in the area with the default 'line' chart type, and I'm not sure what to do with the 'scatter' type. Also, I haven't figured out how to make the background of colored as shown. I'd greatly appreciate any assistance or code samples.
In a line chart, straight lines can be obtaines through the option lineTension that needs to be defined on your dataset. Choose zero as shown below.
datasets: [{
...
lineTension: 0
}]
lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines.
In order to obtain colored rectangles spread over the entire chart, this can be done using chartjs-plugin-annotation.js as explained in this answer.
I am trying to create a timeline chart in a different way. Looking for suggestions on which one to use to get the best out of it in javascript world.
My problem is to plot clickable milestones with some text on the Y axis and months on X axis. I also have to show horizontal bars against text strings filled with colour and those milestones plotted on the bar as small circles or diamonds.
Hope I am clear. Can any one throw light on plotting this kind of map either in Excel or Javascript.
Thanks in advance.
It may be overkill, but this looks like the best solution, but it does neatly fit your request of timing on x axis, label on y, TimelineJS
It's pretty customize-able too to get it how you want.
Finally wrote excel based chart and started filling cells with colors etc based on custom logic. Thanks everyone for all your responses.
I want to draw a line with x and y axis like this .
I searched Google and have found an example based d3. It can draw spline chart, but i can not find the kind of chat.
Can d3 or c3 or any others framework draw line like this? What function should I use?
This is a simple Line chart, Given that you provide the correct data points. You can easily draw that. We cannot help you since you have not shared your work.
Check this link for more info.
I've a graph that is being rendered from some points I have in my database.
If I take all the points from the database and place them in the highcharts object, it sometimes "breakes" a random place on the graph and make a straight horisontal line.
Does anyone know any solution for this?
Here is a picture of the graph:
I'm trying to link two D3 plots so that selecting part of the histogram on the right, causes a certain scatter plot to display on the left.
This is my attempt.
My current question is why the right plot isn't rendering, which I think goes back to how to create and refer to multiple SVG tags in d3.
D3 has SVG controls for this type of situation. What you are looking for is a brush with context.
Here are the API docs:
https://github.com/mbostock/d3/wiki/SVG-Controls
And here are two great examples:
http://bl.ocks.org/mbostock/4063663
http://bl.ocks.org/mbostock/1667367