Project

General

Profile

Actions
Copy link

Support #1936

closed

Using widgets from external js libs

Added by Vitaly Volochay almost 11 years ago. Updated over 10 years ago.

Status:
Closed
Priority:
High
Assignee:
-
Target version:
3.3.1
Start date:
05/27/2013
Due date:
% Done:

0%

Estimated time:

Description

Hello! I want to know if there is a convinient way to use in Wt widgets from libraries written in JS, for example:

http://www.highcharts.com/.

Actions
Copy link
 #1

Updated by Wim Dumon almost 11 years ago

  • Status changed from New to Feedback

Without actually trying to run it, this is how you can work with such a JS library in Wt:

0. include js library

wApp->require("highcharts.js")

1. create a div

A non-inline WText is rendered as a div.

WText *myChart = new WText(parent);
myChart->resize(500, 500);

2. create the chart

myChart->doJavaScript(
myChart->jsRef() + ".chart = new Highcharts.Chart({"
        "chart: {"
            "renderTo: " + myChart->jsRef() + ","
            "type: 'bar'"
        "},"
        "title: {"
            "text: 'Fruit Consumption'"
        "},"
        "xAxis: {"
            "categories: ['Apples', 'Bananas', 'Oranges']"
        "},"
        "yAxis: {"
            "title: {"
                "text: 'Fruit eaten'"
            "}"
        "},"
        "series: [{"
            "name: 'Jane',"
            "data: [1, 0, 4]"
        "}, {"
            "name: 'John',"
            "data: [5, 7, 3]"
        "}]"
    "});"
);

Note that I stored the highcharts object in the dom node, so that you can later refer to it through jsRef() + ".chart"

Let me know if this works for you!

BR,

Wim.

Actions
Copy link
 #2

Updated by Vitaly Volochay almost 11 years ago

Thanks for your answer! I tried code but it doesn't work for me. Application sees highcharts.js, but in my chrome developer tools in this file i see error: "uncaught type error: property add of object # is not a function". I am not familiar with js, do you have an idea how to fix it?

Actions
Copy link
 #3

Updated by Vitaly Volochay almost 11 years ago

And also this error:

"Uncaught TypeError: Cannot call method 'addListener' of undefined"

Actions
Copy link
 #4

Updated by Wim Dumon almost 11 years ago

can you post your code?

BR,

Wim.

Actions
Copy link
 #5

Updated by Vitaly Volochay almost 11 years ago

Sure.

HighchartApplication::HighchartApplication(const Wt::WEnvironment& env):

Wt::WApplication(env)

{

setTitle("Highcharts");

WText *myChart = new WText(root());

myChart->resize(500, 500);

myChart->doJavaScript(

myChart->jsRef() + ".chart = new Highcharts.Chart({"

"chart: {"

"renderTo: " + myChart->jsRef() + ","

"type: 'bar'"

"},"

"title: {"

"text: 'Fruit Consumption'"

"},"

"xAxis: {"

"categories: ['Apples', 'Bananas', 'Oranges']"

"},"

"yAxis: {"

"title: {"

"text: 'Fruit eaten'"

"}"

"},"

"series: [{"

"name: 'Jane',"

"data: [1, 0, 4]"

"}, {"

"name: 'John',"

"data: [5, 7, 3]"

"}]"

"});"

);

}

and I don't forget this:

wApp->require("highcharts.js")

Actions
Copy link
 #6

Updated by Wim Dumon almost 11 years ago

  • Status changed from Feedback to Resolved

Almost there. This works for me:

  requireJQuery("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js");
  require("http://code.highcharts.com/highcharts.js");

highcharts doesn't document very well what JQuery version they require.

BR,

Wim.

Actions
Copy link
 #7

Updated by Vitaly Volochay almost 11 years ago

Thanks! Now it works for me.

Actions
Copy link
 #8

Updated by Koen Deforche over 10 years ago

  • Status changed from Resolved to Closed
  • Target version set to 3.3.1
Actions
Copy link

Also available in: Atom PDF