dynamicaly generate multiple highcharts and append to jquery tabs - javascript

I have 2 charts: a linechart and a donut chart which uses highcharts. These charts are linked to each other. So when either of the chart is hovered the relevant point on the charts are highlighted.
You can check my demo here http://jsfiddle.net/livewirerules/rmxjmsy1/2/
Now what I'm trying to achieve is, I have several tabs, which are separated to 7,14,30 days..on each tab the line chart will have different values based on the duration. So when the user clicks on the tabs, that person will be able to see the chart within that period without losing the highlighting point of the charts.
I was figuring out some methods and I though when the user clicks on a tab, post the duration and do the relevant calculations and append the result to the chart container.
$('#ui-id-2').click(function(){
$.ajax
({
url: '<?php echo base_url('index.php/chart')?>',
data: {"duration": 14},
type: 'post',
success: function(result)
{
$( "#container3" ).append(result);
}
});
});
and on the PHP I echoed the linechart code. I'm not sure if its a correct approach but I wanted see if it works. But unfortunately it didn't draw the chart.
Can someone tell me what would be the best way to achieve this?
Any help will be appreciated.
Thanks

Related

activate legend filter without clicking in c3.js

normally when you create a chart that has a legend, when you click on the category of the legend, the graphic emphasizes the filter in which you clicked. I would like to know how to do this without having to click.
ie for example in my case if I click on "data1" the graph looks like this.
How can I achieve this without clicking to execute the trigger in a certain category?
Two options:
1) Use the API functionality -->
http://c3js.org/reference.html#gauge-width (API documentation starts just below this anchor)
In this case, use hide anytime after your chart is set-up
chart.hide ('data1');
http://jsfiddle.net/wn3vzn0k/1900/
2) Direct in the configuration
data: {
...
hide: ['data1'],
}
but it seems buggy e.g. I still see a blue bar in this example -->
http://jsfiddle.net/wn3vzn0k/1899/

CanvasJS, issues with setting a user input Title for chart

I am currently facing an issue with creating a user input title for a canvasJS chart. I am currently running through the tutorial over at canvasJS, and I thought it would make a neat small project to create a user input oriented pie chart.
The current issue I am facing is trying to get the text inputted from HTML to show up correctly.
[JSFiddle]https://jsfiddle.net/n3n0pssc/
var chart = new CanvasJS.Chart("chartContainer",{
title:{
document.getElementById("chartTitle").setAttribute("text")
}`
I understand that the title must be set by tying it together with the addDataPointsAndRender function, but I am confused as canvasJS only displays set text by title: {text : "title"} and I am trying to figure out how it would go together by fetching input text.
Thank you for any assistance.
You can set the user inputs to the chart by either using chart options or by using the set() methods of the CanvasJS API.
I have modified your jsfiddle, and its working now.
function addDataPointsAndRender(){
chart.options.title.text =document.getElementById("chartTitle").value;
chart.options.data[0].dataPoints.push({
y: parseFloat(document.getElementById("yValue1").value),
indexLabel: document.getElementById("indexLabel1").value
});
chart.render();
}
Also have a look at :
Tutorial on Rendering chart from user Input
Updating Chart Options
CanvasJS Methods & Properties Documentation

How to use jQuery when redrawing a chart?

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 **

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

Can highcharts export a chart AND table data?

I'm trying to figure out if highcharts can do the following:
Render a standard horizontal bar chart that contains separate table data beneath it (imagine a bar chart with an html-like table beneath it.)
The user would be able to export the entire svg using the exporting.js file that highcharts provides.
This might seem vague, I'm trying to think through this though. I'm not familiar with highcharts at all, but have looked thoroughly at the documentation. It is my understanding that something like this wouldn't be possible using highcharts, as it's text capabilities / options aren't that flexible to represent a data table.
Any possible insight would be great, thanks to everyone!
D.
If you check the HighCharts forum you can see a hack to get that.
It is not very clean but it does wonders. If your datatable if very large you may want to think about only showing portions of the data at a time (using zoom in chart).
Stumbled on this years later looking for something related, but I also found this JSFiddle, which might be closer to what has been requested instead of the broken link above.
Highcharts.drawTable = function () {
// SVG fun
};
window.chart = Highcharts.chart('container', {
...chartConfig
});
It literally draws the table in SVG, using the series data. Not saying this is ideal, but it does, however, work for image export, whereas the showTable option doesn't.
Highcharts.chart('container', {
...chartConfig,
exporting: {
showTable: true
}
});
The third and probably best compromise is to use the subtitle HTML text to insert your table.
Highcharts.chart('container', {
...chartConfig,
subtitle: {
title: '<div>Anything goes</div>',
useHTML: true
}
});
Dynamically setting this for the chart at export (allowing you to keep whatever subtitle you want to display on the webpage) involves calling the setTitle method:
chart.setTitle({text: "New Title"});

Categories

Resources