I'm trying to show huge series of work breakdown structure data from an API into GanttChart so it increase page loading time and becomes unresponsive sometimes. I think one of the solutions could be get data in lazy mood. I googled it and found this link on GitHub:
https://github.com/highcharts/highcharts/issues/14232
unfortunately I'm new in HighCharts and JavaScript and it seems it doesn't works or maybe I can't figure out how it works. The ideal scenario would be fetch child tasks within a series every time the parent is expanded.
I would appreciate any ideas.
You can simply add a click event on label and labelIcon SVG elements:
chart: {
events: {
load: function() {
const chart = this;
const ticks = chart.yAxis[0].ticks;
for (let key in ticks) {
if (ticks[key].treeGrid.labelIcon) {
[ticks[key].label, ticks[key].treeGrid.labelIcon].forEach(
element => element.on('click', () => handleLabelClick(ticks[key]))
);
}
}
}
}
But unfortunately, the stairs begin next. Currently, Highcharts gantt charts dont't play well with dynamic data, mostly because of this reported bug. The only way for now, but not very optimal, seems to be creating a new chart with partial data on each expand action.
Live demo: https://jsfiddle.net/BlackLabel/c8whg3kv/
I am using Highchart in my application .I am unable to export the chart datapoints to csv format .
I tried using this approach
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>
$('#getcsv').click(function () {
var charts1 = $('#aumChart-container').highcharts();
Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
csv: charts1.getCSV()
});
});
By using this approach i see the default the highcharts context menu inside my chart control .I want to have a csv export from an external button .Is there a way to remove this default context menu .
I tried removing the context menu by removing the reference to exporting.js but then my export to csv from external BUTTON stops working .
Can someone let me know where exactly i am messing up?
Option 1
There's a plugin that allows you to export CSV (which is what you're using).
On that same page they've shown how you can use an alert box to get the CSV, would that be sufficient?
Direct link to jsfiddle
Option 2
You can code it so that only specific menu items are available
The above link - you're looking for "menuItems"
But instead - you would have:
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'CSV',
onclick: function() {
/*
obviously you'd have to post this to a script
to get the results into a csv file
instead of getting an alert.
*/
alert(this.getCSV());
}
}]
}
}
}
Is it possible to toggle chart dataLabels (enabled/disabled) on click (without redrawing the chart) much like the following:
('.inner-container').click(function() {
chart.setTitle({text: "New Title"});
});
I have tried the method below but it does not work.
('.inner-container').click(function() {
chart.setOptions({dataLabels: {enabled: true}});
});
I can't seem to find any details on how to set chart options dynamically in the documentation. If anyone could point me in the right direction then that would be greatly appreciated.
I managed to figure it out, by using the series.update() method.
chart.series[0].update({
dataLabels: {
enabled: true
}
});
Thanks for your help.
Additional solution, based on datalabels elements:
http://jsfiddle.net/eNMvw/37/
chart.series[0].hideDataLabels = false;
// Add toggler action
$('#toggler').click(function() {
chart.series[0].hideDataLabels = !chart.series[0].hideDataLabels;
chart.series[0].hide();
chart.series[0].show();
});
anyone experienced this? I am new to this so I am not sure exactly what is going on here. But I am trying to use jqplot's meter gauge per documentation and it doesn't seem to be working. I can create bar, line, etc graphs just fine.
include the necessary script link (as well as the others needed):
<script type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.min.js"></script>
markup
<div id='chart6'></div>
js
$(document).ready(function () {
plot6 = $.jqplot('chart6', [[18]], {
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
firebug says:
TypeError: c.jqplot is undefined - inside the meterGaugeRender js file.
any help would be greatly appreciate as always.
It looks like you did not include the basic jqPlot library, just the meter gauge add on.
I have this page:
<script type="text/javascript" src="jQuery/Highcharts/highstock1.1.6.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highcharts2.1.4.js"></script>
and in the page I use
$.getJSON(
"server/indice.server.php?row=" + row +"&item="+ item,
null,
function(data)
{
chartindice = new Highcharts.Chart(
{
chart:
{
renderTo: 'graph',
defaultSeriesType: 'line',
zoomType: 'x'
},
/////moore setting..
series:
[{
type: 'area',
name: titleindice,
data: indice,
showInLegend : false //disable the the show/hide icon
}]
});
});
and an highstock graph
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartHistory'
},
rangeSelector: {
selected: 2
},
series: [{
data: history,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
});
and they can't work together, just one or the other.
What can I do?
Got same trouble with conflicting Highchart and Highstock. here's the official solution:
Keep in mind that the Highcharts.Chart constructor and all features of
Highcharts are included in Highstock, so if you are running Chart and
StockChart in combination, you only need to load the highstock.js
file.
http://highcharts.com/errors/16
Highcharts is included in highstock.js, so please take look at the example, how use highcharts with highstock.js.
http://jsfiddle.net/sbochan/PtXhB/
Secondly I advice to use the newest highstock.
I have experienced the same problem when I tried to use Highstock chart and Angular Gauge,
And the problem was solved when I try to rearrange highstock highchart javascript library like this
<script type="text/javascript" src="jQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highstock.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highcharts-more.js"></script>
or (if you don't want to use additional graphics)
<script type="text/javascript" src="jQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highstock.js"></script>
I hope it can be useful
you must delete this file:
highcharts.js
i tried and it works
Im my case, including only HighStock's file worked for HighChart's as well.
I have many charts, highchart's or highstock's, possible to be included on same page, and I just call HighStock.js once and it works for both !
Use just
highstock.js
and delete highcharts.js
And It's work well for me
And Good luck
Highstock contains most of HighCharts code. Have you tried including only highstock.js in your page to display both charts ?
I had same issue and got fixed by ordering my JS as below.
<script type="text/javascript" src="$javascript_folder/highstock.js"></script>
<script type="text/javascript" src="$javascript_folder/highcharts.js"></script>
I don't know its working fine according Ardi. Is works fine for me when i load highstock.js first followed by highcharts.