Project

General

Profile

Actions
Copy link

Support #1936

closed
VV

Using widgets from external js libs

Support #1936: Using widgets from external js libs

Added by Vitaly Volochay over 13 years ago. Updated about 13 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/.

WD Updated by Wim Dumon over 13 years ago Actions
Copy link
 #1

  • 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.

VV Updated by Vitaly Volochay over 13 years ago Actions
Copy link
 #2

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?

VV Updated by Vitaly Volochay over 13 years ago Actions
Copy link
 #3

And also this error:
"Uncaught TypeError: Cannot call method 'addListener' of undefined"

WD Updated by Wim Dumon over 13 years ago Actions
Copy link
 #4

can you post your code?

BR,
Wim.

VV Updated by Vitaly Volochay over 13 years ago Actions
Copy link
 #5

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")

WD Updated by Wim Dumon over 13 years ago Actions
Copy link
 #6

  • 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.

VV Updated by Vitaly Volochay over 13 years ago Actions
Copy link
 #7

Thanks! Now it works for me.

KD Updated by Koen Deforche about 13 years ago Actions
Copy link
 #8

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

Also available in: PDF Atom