Develop Reference

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.

Reload all data points on c3.js graph

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.

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

HighChart is preventing click event on a parent

I am building a table where when cell is clicked high charts is shown in its place(same way as flip cards). And when highchart is clicked a cell is reverted back it is original state.
However, after creating a chart dynamically all my click functions on a parent stop working when clicking on a chart directly.
I have created this small jsFiddle to demonstrate my problem:
http://jsfiddle.net/2j4qQ/2/
Code:$('#contentDiv').on('click', '.homepageChart', function() {});
$('#contentDiv').on('click', '.homepageChart', function() {});
This function does not fire when clicking directly on a chart. Why? and how can it be
Thanks in advance.

Have a look at this: jsfiddle.net/cssimsek/4Wa32/1. Since you were appending the Highcharts <div> with each click I added the .detach() method to the callback function of the .hide()method, in order to remove the <div> on secondary clicks. It seems to be working ok now.

I have added an overlay with z-index:1; to my highcharts which seems to solve the problem. However, this seems incorrect, since i should be able to listen to dynamically created highcharts events. If anyone has some info on this please share.
Here is updated fiddle:
http://jsfiddle.net/2j4qQ/5/

Toggle between charts using highcharts

I have requirement where in need to switch between different charts using options from drop down or radio button. The chart i click must overwrite previous chart and show different chart with same data.
I have simulated similar kind of code but finding it difficult to overwrite with previous.
Here is the jsfiddle reference in my comments:
Any help appreciated.
Thanks,
Sohan

You can also use update() function, which allows to update type of serie, so data will be the same, but line can be replaced with column or other types.
http://api.highcharts.com/highcharts#Series.update()
EDIT:
$.each(chart.series,function(i,serie){
serie.update({
type:'column'
});
});
Couple of series:
http://jsfiddle.net/GGvmM