I am trying to add tooltips on multiple lines chart following Mark's answer in this post and this example . Here is my JS bins https://jsbin.com/fexami/edit?html,js,output#J:L131
My design for this chart is..
When the chart is initialized, only the lines with solid color show up and the dashed lines are hidden. Dashed lines can show or hide when click A2 and B2 on the right side.
I was trying to add tooltips on the dashed lines but they do not show up when dashed lines are showing. I created the tooltips for dashed lines by adding class mouse-over-effects2(line 133 - 223). Actually, all the code form line 133 to 223(code for dashed lines' tooltips) is copied from the code from line 225 to 315 (code for solid lines' tooltips) and just some names are changed. From inspect elements in the browser, it looks like the lines of code from 288-315 overwrite 196-223.
Second question is..How to insert "state” into the tooltips to make the tooltip show both the value of “y” and state. I was trying to add text after line 177, but it does not work.
Here is my updated jsbins
Does anyone have idea to fix it? Thanks a lot!
Updated
Please ignore the first question. I just fixed it. But still don't know how to solve the second one.
Can anyone help? Thanks a lot!
Yes - change
var lines = document.getElementsByClassName('line1');
to
var lines = document.getElementsByClassName('line2');
and the tooltips will display on the dashed lines.
Related
I'm coding a graph base on this example (http://bl.ocks.org/stepheneb/1182434), but with 2 lines. My current problem is:
In my first line (blue), it's possible to drag the line correctly, when I click in a circle point and move the mouse, the line is drawing correctly.
In the second line(red), I can click in the circle point and move it, but the line doesn't change.
My code:
https://jsfiddle.net/nattanlucena/oeybge1s/1/
I noticed the error on line 181, in this piece of code:
var lines = this.svg.select("path").attr("d", this.line_max_weight(this.points_max_weight));
Can anyone help me?
I drawn a Line graph using chart js. it works well but problem is it will start all the lines from 0 but i need some padding between graph line and axis line it. I need like
I need this Gap ( Red Marked ). How can i achieve this??
From the fiddle you provided, A tricky way will be to push in $scope.labels and $scope.data a null in first position:
$scope.labels.unshift('');
$scope.data[0].unshift(null);
$scope.data[1].unshift(null);
A start you had:
And you will have:
I am a newbie to d3js and I am currently plotting some multiple line chart graphs. One thing I want to do is to add a legend for each line. I figured out that I can add some text and I can also give the text some color, which is same as the line's color. However, I would like to add some line representation in front of the text. For example,
Legend in Multi line chart - d3
as we can see here, the legend starts with a colored rectangle + text, and I want it a line (dashed line for example) rather than rectangle in front of the text.
Is there anyone can help me with this? Thanks a lot!
I have made a scatter chart based on the example found here.
I wish to remove the grid lines from the plot.
On How do you remove the background gridlines in nvd3.js? I found a description I could use:
.tick {
opacity: 0;
}
but I do not know where in the code to put it and I cannot make it work.
Thanks for any inputs :)
Add this line of CSS to your nv.d3.css file
.nv-axis .tick line {
display:none;
}
This removes background grid-lines but keeps the details on the Y and X axis.
I am using Highcharts to render a line chart (http://www.highcharts.com/demo/line-basic).
Every line in my chart has the same color and different markers on the end. Now what I want is when I hover over a line to change it's color.
you can find mouse events in plotOptions there you can manipulate the colors
this.chart.series[index].update({color:'color'});
this piece of code will be helpful.
here is a working example http://jsfiddle.net/vytEE/
hope this will help you