Reload all data points on c3.js graph - javascript

I made a simple div in html:
<div class='all'>
Show all
</div>
Here's the JS I tagged along to it:
$(document).ready(function () {
$('.all').click(function(){
chart.flush();
});
});
When a user clicks on the various x data set names in the legend, the data points will disappear. I want it so that if they click, say 20 data point names, all they will need is a single click of a button to put them all back on the graph instead of having to reclick all 20 options again.
I'm trying to make it so that when I click on the div class all, the chart will reload all of the data points there.
Like-wise, I also want it so that I can remove all data points.
In the c3.js reference guide for flush (http://c3js.org/reference.html#api-flush), I thought that this would reload all of the points on the graph. Apparently it doesn't. Is there a way so that once I click the div, all the points will be placed back onto the graph?

Have you tried to do chart.show(); instead of chart.flush();?
To hide all data you can then do chart.hide().
chart.toggle() can do the trick too, it will show the hidden data and hide the displayed ones.

Related

Regarding Pixel Art Maker toggle () and remove ()

I need help regarding Pixel Art Maker.
where I added two extra features toggle () and remove () .
The problem is, when I insert numbers to draw grid, and click submit button, in first attempt , it draw the grid. But after clicking the toggle button or remove button , in my second attempt to draw grid, the submit button doesn't work and I can't able to draw grid.
Here is the link.
https://codepen.io/sofianayak55/pen/dKEaPw
Please go through this link, avoid the styling part, I will do it later Kindly go through the JavaScript and jQuery section.
Thank you.
Update your remove function.
$(".clearGrid" ).click(function() {
$("#pixelCanvas").html("");
});
You have used $("#pixelCanvas").remove() which is actually removing #pixelCanvas table. So next time it is not getting bind. You just need to clear only its html part.

Reloading or Refreshing JSON and HTML div load order

I am trying to create some code that will allow me to pull and display stock data for a Smart Mirror Project that I am building.
I have gotten it to display all the information but am not able to update the stock data. I want it to update the information every 5 seconds but when I do this, it basically goes on repeat and continues to output all the stocks over and over, off the page.
How can I get it to reload the data without reloading the entire page and how can I tell that it is working? Is it possible add a css element that flashes the prices yellow whenever the price changes?
Here is my code in fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/
Edit: To clarify the second part. I basically want to still store the old price and compare it to the new price temporarily and quickly flash the text yellow if it has changed.
The problem you have is that you are appending the new HTML to the existing HTML.
To solve your problem, you need to delete the existing contents of the divs that your are updating. You should add the following code after the setInterval(,,, line:
$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");
Unfortunately, it does result in a "flicker" each time you reload. To reduce this, in cases where you have a fixed number of rows, you can label each row 1-X (and use the same number for the cells in each row) and then simply overwrite the contents of each cell on each row as you update...
In my view, if you aren't worried about the order that the stocks appear, you should use a table and give id's to the cells that relate to each stocks price and change (e.g. for Apple the cell ids could be: price_NASDAQ:AAPL, change_NASDAQ:AAPL). You then simply use $("#price_NASDAQ:AAPL").html(...) to update the price and $("#change_NASDAQ:AAPL").html(...) to update the change.
If you want something to happen (like a flash) use $("#price").css("background-color", "...") to change the color and use setInterval(...) to wait for a short time before changing the color back...

How do I load dynamic data onclick into a map infowindow using Ammap?

I've built an Ammap that displays data in an infowindow based on which continent gets clicked, and I'm really close to where I want to get, with the exception of 2 things:
Upon map load, the first click displays the correct data, but that data remains in the infowindow - clicking other regions takes no effect. The objective is to clear the infowindow and display data from the region clicked last.
After onclick, the region's color changes accordingly. But if you hover above it again, the color disappears. How do I make the onclick color 'stick'?
I believe I made the error when I commented these few lines out - the original code had enabled multiple-area select, and the map I had in mind should only allow single area select.
//event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
//map.returnInitialColor(event.mapObject);
Please see the working pen here and let me know if you can help: http://codepen.io/anon/pen/jPeXor
Thanks in advance for any help!

Open pop up upon clicking a datapoint in chart

I am using DimpleJS (which is amazing!) to make some charts. I want to add a functionality so that upon clicking a data point on the line chart, a popup opens which shows more info about the data point. I want to create a dynamic URL for each data point on the chart to accomplish this but I'm unable to think how I might be able to do this.
I would highly appreciate any help on this.
Thanks!
You can add an on click event to the series like this:
mySeries.addEventHandler("click", function (e) {
alert("Hey you clicked " + e.xValue);
});
This will show a JavaScript pop-up containing the x value of the point clicked. You can get more information about the eventArgs object (e in the example above) here: https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.eventArgs
You can see a basic line chart example containing the line above here:
http://jsbin.com/yotoya/1/edit?js,output

Edit Yaxis values using textbox in popup

I want to edit Highchart Yaxis values on double clicking series point using popup with textbox same like attached snapshot URL, on pressing ok or enter button chart must be redraw with changed values.
Any help would be appreciated.
https://onedrive.live.com/redir?resid=EE658CD68AB0C97A!2696&authkey=!ALdbY9xxPI2oxYY&v=3&ithint=photo%2cpng
Look at this example for using a popup on click:
http://www.highcharts.com/demo/line-ajax
See the answer here for another way, using jQuery dialog:
Highcharts: tooltip Click instead of hover
You can capture the result of the update, and send it to the point.update() method, reference here:
http://api.highcharts.com/highcharts#Point.update
If you have more specific questions, get an example going and ask away.

Categories

Resources