Question

The first script is not working, the second is.

<script type="text/javascript">
    var pageHits = [30,60,22,5,60,88,102];
    var rssHits = [33,45,121,23,55,35,77];
    var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];


    jQuery(function() {

        $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());

        $('#barChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
        });
        $('#lineChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
        });
        $('#stackedBarChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
        });
    });

    function CreateLineChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            seriesDefaults:{
                markerOptions:{
                    show: true,
                    style: 'diamond'
                }
            },
            legend: {
                show: true,
                location: 'nw'
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }   
        };
        return optionsObj;
    }

    function CreateBarChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:$.jqplot.BarRenderer,
                rendererOptions:{
                   barPadding: 8,
                   barMargin: 10
               }
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }

    function CreateStackedBarChartOptions()
    {
        var optionsObj = {
            stackSeries: true,
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:$.jqplot.BarRenderer
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }   
</script>
<script language="javascript">
    jQuery("#red").treeview({
     animated: "fast",
     collapsed: true,
     control: "#treecontrol",
     }
    });
</script>

The first script is for a collapsible tree and the second for a chart.. when executed separately the output is fine but when i try to implement both in one page, the tree is not produced properly but the chart is ok.

Answer 1

Take a look at this:

jQuery(function() {

        $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
        /*......*/
        });

If you like to use the dollar-sign to access jQuery inside the function when using jQuery.noConflict(), you’ll need to pass the $ as argument to the function:

jQuery(function($) {

            $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
            /*......*/
            });

You’ll also need to replace all occurences of $ inside CreateLineChartOptions(), CreateBarChartOptions() and CreateStackedBarChartOptions() with jQuery, when using jQuery.noConflict() there will be no global variable $ pointing onto jQuery, that’s the issue.

So this edited version should work:

    var pageHits = [30,60,22,5,60,88,102];
    var rssHits = [33,45,121,23,55,35,77];
    var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];


    jQuery(function($) {

        $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());

        $('#barChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
        });
        $('#lineChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
        });
        $('#stackedBarChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
        });
    });


    function CreateLineChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            seriesDefaults:{
                markerOptions:{
                    show: true,
                    style: 'diamond'
                }
            },
            legend: {
                show: true,
                location: 'nw'
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }   
        };
        return optionsObj;
    }

    function CreateBarChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:jQuery.jqplot.BarRenderer,
                rendererOptions:{
                   barPadding: 8,
                   barMargin: 10
               }
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }

    function CreateStackedBarChartOptions()
    {
        var optionsObj = {
            stackSeries: true,
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:jQuery.jqplot.BarRenderer
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }   
</script>