use highchart and highstock on the same page - javascript

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.

Related

why load,render method is call when download png in highcharts

when I export the PNG from Highcharts it call load and render function that means it reloads the chart.
can we restrict calls to load and render events of highcharts when we export the png?
Thanks #SebastianWędzel for your help I will try you solution as well.
but this Solved my problem exporting: { chartOptions: { chart: { event:null }, }

Problems with googlecharts

I am with following problem, when I initialize my site I can see the chart, but when I click to go to page he of the problem and not the shows. The site was programmed in Ajax, therefore I would give only a div. The following code is in one of these pages that I draw with Ajax. This feature page I call the dashboard:
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Usado', 'Liberado'],
['Usado', <?php echo $tamanho->USADO ?>],
['Liberado', <?php echo $tamanho->LIBERADO ?>]
]);
var options = {
title: 'Banco de dados',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
My index I include myself the following directory web:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
When I open the console of chrome, I am informed of the following error:
Uncaught Error: google.charts.load() cannot be called more than once with version 44 or earlier.
Searching the Internet not found nothing concrete, however I noticed that is something related to quantity of calls made. Not believed for obvious reasons of non-operation of the amendments. Someone knows how to fix the problem ?
I know that it is too late, but in case you still didn't found a solution, you can try this:
google.charts.load('45', {packages: ['corechart']});
write "45" instead of "current", because "current" is still version "44".
This worked for me

range selector for chart js not showing up

I am trying to use chart js library and build range selector..
i have iuncluded all library..
but still range selector not showing upo...
can you guys tell me why its not showing up...
proving my fiddle below...
its nopt workimg for this code..
http://jsfiddle.net/TRjGa/11/
$("#rangeSelectorContainer").dxRangeSelector({
//...
scale: {
//...
label: {format: 'shortTime'}
},
sliderMarker: {format: 'shortTime'}
});
I'm not sure what the result should look like, but you can't put the JS code inside the html in jsfiddle.
If I put it like this, there is at least smth. showing up =)
$("#rangeSelectorContainer").dxRangeSelector({
//...
scale: {
//...
label: {format: 'shortTime'}
},
sliderMarker: {format: 'shortTime'}
});
http://jsfiddle.net/v5LTM/

Highcharts csv export issue

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());
}
}]
}
}
}

jqplot meter gauge issue: c.jqplot is undefined?

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.

Categories

Resources