I am trying to show a many line charts in one chart.
What's happening is that, instead of showing them all at the same time, you need to disable one to show another one.
Here is my jsfiddle;
What do I need to change in my code so it shows all of the graphs together?
Thanks folks
Try not to give the same Key names for your charts. NVD3 by default merges the duplicate Key names together.
After I changed the Key Name from you chart it seems to pick All the line charts correctly.
Here is a Working Fiddle of your code
Hope it helps.
Related
I got a problem while using ApexChart and struggling so much on how do I could remove the one that I give 'X'?
So basically, what I want to achieve is like the light blue line that I draw.
On ApexChart, there's a specific styling for this - Curve's Stroke.
I want to use Stepline and Straight at the same time but I don't know how. So what I did is using 2 different series (dummy random data) with line and area chart type, then the first one using stepline curve and the second one is using straight.
It turned out I almost achieving what I need to do but, the problem is the 'X' blue mark.
I didn't want it like that. I want it just start a straight line after that specific last value/category/you know what I mean.
Is there any workaround for me to look? Can anyone help me?
I've been struggling about this for days and I'm getting crazy about it.
Reference: Apex Chart Demo's Docs
I am new to d3, working on updating the line chart dynamically based on interval, i want the old data to be moveout/exit and update with new data, i am stuck at a position where i can see new data joins the chart but old data is not moving out/exiting. Can someone please help me out on this issue, any help is much appreciated.
Copied from d3noob'slink with little variation of injecting data to chart
Plunker link
Also i am trying to add the circles for each point, currently the single circle is added on top of Y-axis for some reason.
While checking d3noob's link I realized that he's using 2 datasets as data.csv and data-alt.csv. During the second run of updateData function it always gets data-alt.csv
So, in order to answer your question,
First, you need to get your data generation logic correct. Since you are generating random numbers you need to make sure your randomPoints() function generates proper dates that are understandable to D3
Then bind the randomly generated dataset to your data variable.
Finally, clear your data variable in every run of updateData function.
I have made a Plunker for you. Let me know if you need more explanation on this.
Hope this helps :)
I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
I'm planning to use Highstocks.js after having used Highcharts in some other projects and I've noticed that the labels when moving the mouse over a series are not the same as in Highcharts.js making it more difficult to be read.
Instead of showing only the information of the selected series, it shows the information of all of them in the same label.
This might be a bit confusing when there's multiple series as you have to pay attention to the color to identify the series name.
It doesn't even highlight the series you are currently over or anything to simplify the viewing to the final user.
You can see what I'm talking about with this two examples:
Highcharts.js (How I would like it)
Highstocks.js (How it actually is)
I'm wondering if there's anything which can be done to emulate that behavior. I've been taking a look at the series options but I didn't find anything similar.
Thanks.
Sure you can, it is very easy, just add:
shared: false
for tooltip options object on chart initialization.
fiddle: http://jsfiddle.net/5RGaC/
I have been trying to clear this bug but i still not getting the point why it occurs.
check the code at http://jsfiddle.net/3RKL4/
The tool tip works only for the first and last points.
Is this a bug in highcharts or the code is wrong ?
If the code is wrong can any one help me ?
Ideally Highchart requires data to be increasing order of time. Your data doesn't seem to satisfy that, it doesn't work event with 3 points http://jsfiddle.net/jugal/3RKL4/5/
Reversing the order fixed it # http://jsfiddle.net/jugal/3RKL4/6/