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
Related
i have a system running with Primefaces on a Server for some Diagramms, like the Bar Chart and stuff.
My Problem is: the bar chart is full with Series so it is a little slow, but more importantly is that it is not very clear. So I wanted to have a function to unclick/disable all Series from the start and then manually enable which one I need, but I am not an expert in Javascript nor with Primefaces.
I found out that I can do something with the Extender but it turns out the show function there disables the whole chart so it doesnt render.
Does anyone already solved something like this or has a tip for me?
So i did find the solution myself. For everyone who is searching something similiar:
function toggleAllLabels(model) {
for(var i = 0; i < model.getElementsByClassName("jqplot-table-legend-label").length; i++){
model.getElementsByClassName("jqplot-table-legend-label")[i].click();
}
}
where model is the (Bar-)Chart Object. The idea is: you simulate a click on every label so it is triggered and disabled. The function has to be called from the page with the chart and with the argument "model" for the id of the Chart Object.
I currently have a chart which I place in my page by calling
function myChart(aParameter) {
// here is some code which queries data based on aParameter
// and sets a variable later used for series: [...] in the chart below
$("#mychartid").highcharts({...})
}
This function is then called when a choice on some radio buttons is done:
$('#productselect input[type=radio]').change(function(){
myChart($(this).val())
})
It works fine, but is not effective: the complete redrawing of the chart moves the page and I need to scroll back on the chart.
When searching for a solution, I found a good question and answers which gives some details on how to correctly update a chart (which I hope will fix my issue). It suggests to first create a chart (chart = new Highcharts.Chart(chartOptions)) and then use incantations of chart.series[0].setData(data,true); to update the data.
The point I am missing is how to initially position such a chart on my page (using jQuery), similar to my $("#mychartid").highcharts({...}) above?
You can still create the chart exactly as you are, except that you assign it to a variable. So
$("#mychartid").highcharts(chartOptions);
var chart = $("#mychartid").highcharts();
Then you can perform whatever actions you want on chart, including the
chart.series[0].setData(data,true);
Example:
http://jsfiddle.net/3d3fuhbb/111/
** UPDATED to correct code **
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.
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.
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