Hey Mark,
It worked ! Thank for your help.
Murtaza
On Saturday, April 28, 2012 5:06:49 AM UTC+5:30, Mark Rathwell wrote:
>
> Try this:
>
> (defn add-rows []
> (let [data (js/google.visualization.DataTable.)]
> (.addColumn data "string" "Topping")
> (.addColumn data "number" "slices")
> (.addRows data (clj->js [["Mushrooms" 3] ["Onions" 1] ["Olives" 1]]))
> data))
>
> (defn chart-options []
> (clj->js {:title "How much Pizza i ate last night"
> :width 400
> :height 300}))
>
> (defn get-chart []
> (js/google.visualization.PieChart. (.get ($ "div.container div#content")
> 0)))
>
> (defn draw-chart []
> (let [data (add-rows)
> options (chart-options)
> chart (get-chart)]
> (.draw chart data options)))
>
> (.load js/google "visualization" "1.0" (clj->js {:packages
> ["corechart"]}))
>
> (.setOnLoadCallback js/google draw-chart)
>
>
> On Fri, Apr 27, 2012 at 11:15 AM, Murtaza Husain
> <[email protected]> wrote:
> > Hi,
> >
> > I am trying to use google charts from clojurescript, however cant get it
> > working. I have included both the js code from google's site and my
> > clojurescript conversion. Any help in figuring out the problem will be
> > appreciated.
> >
> > Thanks,
> > Murtaza
> >
> > JS Code -
> >
> > <script type="text/javascript" src="https://www.google.com/jsapi";></script>
>
> > <script type="text/javascript">
> >
> > // Load the Visualization API and the piechart package.
> > google.load('visualization', '1.0', {'packages':['corechart']});
> >
> > // Set a callback to run when the Google Visualization API is
> loaded.
> > google.setOnLoadCallback(drawChart);
> >
> > // Callback that creates and populates a data table,
> > // instantiates the pie chart, passes in the data and
> > // draws it.
> > function drawChart() {
> >
> > // Create the data table.
> > var data = new google.visualization.DataTable();
> > data.addColumn('string', 'Topping');
> > data.addColumn('number', 'Slices');
> > data.addRows([
> > ['Mushrooms', 3],
> > ['Onions', 1],
> > ['Olives', 1],
> > ['Zucchini', 1],
> > ['Pepperoni', 2]
> > ]);
> >
> > // Set chart options
> > var options = {'title':'How Much Pizza I Ate Last Night',
> > 'width':400,
> > 'height':300};
> >
> > // Instantiate and draw our chart, passing in some options.
> > var chart = new
> > google.visualization.PieChart(document.getElementById('chart_div'));
> > chart.draw(data, options);
> > }
> > </script>
> >
> >
> > CLJS code -
> >
> > ;;clj->js and $ are functions from jayq
> >
> > (defn add-rows []
> > (let [data (js/google.visualization.DataTable.)]
> > (.addColumn data "string" "Topping")
> > (.addColumn data "number" "slices")
> > (.addRows data [["Mushrooms" 3] ["Onions" 1] ["Olives" 1]])
> > data))
> >
> >
> > (defn chart-options []
> > (clj->js {:title "How much Pizza i ate last night"
> > :width 400
> > :height 300}))
> >
> > (defn get-chart []
> > (js/google.visualization.PieChart. ($ "div.container div#content")))
> >
> > (defn draw-chart []
> > (fn []
> > (let [data (add-rows)
> > options (chart-options)
> > chart (get-chart)]
> > (.draw chart data options))))
> >
> >
> > (.load js/google "visualization" "1.0" {"packages" ["corechart"]})
> >
> > (.setOnLoadCallback js/google draw-chart)
> >
> >
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "Clojure" group.
> > To post to this group, send email to [email protected]
> > Note that posts from new members are moderated - please be patient with
> your
> > first post.
> > To unsubscribe from this group, send email to
>
> > For more options, visit this group at
> > http://groups.google.com/group/clojure?hl=en
>
--
You received this message because you are subscribed to the Google
Groups "Clojure" group.
To post to this group, send email to [email protected]
Note that posts from new members are moderated - please be patient with your
first post.
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/clojure?hl=en
