Search code examples
javascriptfirebugecharts

Javascript browser inspector console vs source code


This is my problem: I was playing with ECharts JavaScript library, I wanted to retrieve the image data (I know there is a save as image toolbox). When I try to access the function getDataUrl, or getConnectedDataUrl, I get the following error:

"myChart.getDataUrl is not a function"

But when I try to do the same on the browser (or Firebug) console, I get the info I want. When I call get_data() on the console also get the error I mention before. I'm confused.

What am I doing wrong?

There is the example code:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button type="button" onclick="get_data()">holi</button>

        <div id="main" style="width:400px;height:300px;"></div>
        <script src="echarts.min.js"></script>
        <script type="text/javascript">
            // based on prepared DOM, initialize echarts instance
            var myChart = echarts.init(document.getElementById('main'));

            // specify chart configuration item and data
            var option = {
                title: {
                    text: 'Test'
                },
                tooltip: {},
                legend: {
                    data:['Cosas']
                },
                xAxis: {
                    data: ["asdf","qwerty","lol"]
                },
                yAxis: {},
                series: [{
                    name: 'Cosas',
                    type: 'bar',
                    data: [1, 3, 5]
                }],
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: false},
                        saveAsImage : {show: true, title: "save"}
                    }
                }
            };

            // use configuration item and data specified to show chart
            myChart.setOption(option);

            function get_data(){
                return myChart.getConnectedDataUrl();
            };
        </script>
    </body>
</html>

Solution

  • You just misspelled the function names. They are called getDataURL() and getConnectedDataURL() (with uppercase URL).