use highchart and highstock on the same page

Question

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?

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

you must delete this file:

highcharts.js

i tried and it works

Solution 5

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 !

View more solutions

Comments

[devmonster]

I did, it draws only some the highchart graphs but doesn't work in most of them.

[devmonster]

for example the first chart in the question is not showing - (new Highcharts.Chart)

[UJ India]

What will be the expiry date if i download highchart.js after registering for non-comercial purpose. ?

[UJ India]

What will be the expiry date if i download highchart.js after registering for non-comercial purpose. ?