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"});
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 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
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 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
I need to be able to hide a Highcharts series from a button rather than the legend (the reason is that I need to toggle multiple groups from one button: Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance? and for the reasons given in that post, I cannot use $(chart.series).each() with jQuery.
None of the following expressions have any effect (my chart object is named chart):
Chart.series.get(1).hide();
chart.series.get(1).hide();
$(chart.series[1]).hide();
$(chart.series["1"]).hide();
$(chart.series[1]).hide();
$(chart.series)["1"].hide();
$(chart.series)[1].hide();
Can someone please tell me how I can make a chart series hide if I know its index? Thanks.
This should work:
chart.series[index].hide()
Full example on jsfiddle
(UDP URL from Simen Echholt comment)