Support #1936
closedUsing widgets from external js libs
0%
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/.
Updated by Wim Dumon over 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.
Updated by Vitaly Volochay over 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?
Updated by Vitaly Volochay over 11 years ago
And also this error:
"Uncaught TypeError: Cannot call method 'addListener' of undefined"
Updated by Vitaly Volochay over 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")
Updated by Wim Dumon over 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.
Updated by Koen Deforche over 11 years ago
- Status changed from Resolved to Closed
- Target version set to 3.3.1