adessose / wicked-charts Goto Github PK
View Code? Open in Web Editor NEWBeautiful and interactive javascript charts for Java-based web applications.
License: Apache License 2.0
Beautiful and interactive javascript charts for Java-based web applications.
License: Apache License 2.0
I can get drilldown bar charts to work but not pie charts. Do you (or does anyone, for that matter) have a working example of a drill down pie chart as per the highcharts example here http://www.highcharts.com/demo/pie-drilldown ?
Reported by [email protected], Aug 12, 2013
With Highcharts 3.0.3, maxStaggerLines was introduced.
It would be great if that was added to wicked-charts.
Here's the reference:
http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.maxStaggerLines
provide a method setDataModel() additionally to the setData() method to enable support of Wicket Models
Reported by Samael.Bate, Jul 3, 2013
wicked charts only allows for setting a fill as a Color or a ColorReference. SVG allows for creating patterns which can be used as a fill.
It would be great if wicked charts could support patterns as well as colors as it would benefit users with color blindness.
Reported by evgen.kulikoff, Dec 9, 2013
Please add support for tickPositions setting:
We tried to create a simple chart from a JSF project (2.1.6 is the JSF version). We included the .jar dependency in the pom.xml file. We also followed the presented steps. Unfortunately, we receive an error.
Here are the simple files that are involved:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wc="http://googlecode.com/wickedcharts"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</h:head>
<h:body>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<wc:chart id="chart1" options="#{wickedChartsBean.options}" />
</h:body>
</f:view>
</html>
@ManagedBean(name = "wickedChartsBean")
public class WickedChartsBean {
private Options options;
public WickedChartsBean() {
options = new Options();
options.setChartOptions(new ChartOptions().setType(SeriesType.LINE));
options.setTitle(new Title("Chart 1"));
options.setxAxis(new Axis().setCategories(Arrays.asList(new String[] {
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec" })));
options.setyAxis(new Axis().setTitle(new Title("Temperature (C)")));
options.setLegend(new Legend().setLayout(LegendLayout.VERTICAL)
.setAlign(HorizontalAlignment.RIGHT)
.setVerticalAlign(VerticalAlignment.TOP).setX(-10).setY(100)
.setBorderWidth(0));
options.addSeries(new SimpleSeries().setName("Tokyo").setData(
Arrays.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));
options.addSeries(new SimpleSeries().setName("New York").setData(
Arrays.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));
}
public Options getOptions() {
return options;
}
public void setOptions(Options options) {
this.options = options;
}
}
When invoking the page we receive the following error:
Exception type class javax.faces.FacesException
Exception message com.sun.faces.NAMED_OBJECT_NOT_FOUND_ERROR
Stack trace
javax.faces.FacesException: com.sun.faces.NAMED_OBJECT_NOT_FOUND_ERROR
at com.sun.faces.application.ApplicationImpl.createComponentApplyAnnotations(ApplicationImpl.java:1910)
at com.sun.faces.application.ApplicationImpl.createComponent(ApplicationImpl.java:1164)
at org.springframework.faces.webflow.Jsf2FlowApplication.createComponent(Jsf2FlowApplication.java:64)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.createComponent(ComponentTagHandlerDelegateImpl.java:510)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:157)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:120)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:137)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:184)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:120)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:98)
at com.sun.faces.facelets.tag.ui.DefineHandler.applyDefinition(DefineHandler.java:107)
at com.sun.faces.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:178)
at com.sun.faces.facelets.impl.DefaultFaceletContext$TemplateManager.apply(DefaultFaceletContext.java:395)
at com.sun.faces.facelets.impl.DefaultFaceletContext.includeDefinition(DefaultFaceletContext.java:366)
at com.sun.faces.facelets.tag.ui.InsertHandler.apply(InsertHandler.java:112)
......
Could you give us a clue on what might be wrong?
Thank you in advance,
Horatiu
Reported by evgen.kulikoff, Dec 9, 2013
Please add support for "padding" setting for legend:
I have problems include wicked-charts in my JSF project, after that aggregates the wicked-charts-jsf21 library my tree component is not rendered
<ui:composition template="templates/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:wc="http://googlecode.com/wickedcharts"
>
<ui:define name="content">
<p:panel id="panelPrincipal" header="INCIDENTS" styleClass="customTitleBar" >
<h:form id="formPrincipal">
<h:panelGrid columns="4" cellpadding="10">
<p:outputLabel for="txtCliente" value="Subsector:" />
<p:selectOneMenu id="txtCliente" value="#{reporteIncidentesBean.subsector}"
panelStyle="width:180px" effect="fade" var="t" style="width:160px"
filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="Select..." itemValue="#{null}" />
<f:selectItems value="#{reporteIncidentesBean.listaSubsector}"/>
<p:ajax update="tableGeneral, :panelSecundario" listener="#{reporteIncidentesBean.listarSubsector()}" />
</p:selectOneMenu>
</h:panelGrid>
<wc:chart id="chart1" options="#{reporteIncidentesBean.options}"/>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
This XML file does not appear to have any style information associated. Then the tree is shown.
<ui:composition template="templates/template.xhtml">
<ui:define name="content">
<p:panel id="panelPrincipal" header="INCIDENTS" styleClass="customTitleBar">
<h:form id="formPrincipal">
<h:panelGrid columns="4" cellpadding="10">
<p:outputLabel for="txtCliente" value="Subsector:"/>
<p:selectOneMenu id="txtCliente" value="#{reporteIncidentesBean.subsector}" panelStyle="width:180px" effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="Select..." itemValue="#{null}"/>
<f:selectItems value="#{reporteIncidentesBean.listaSubsector}"/>
<p:ajax update="tableGeneral, :panelSecundario" listener="#{reporteIncidentesBean.listarSubsector()}"/>
</p:selectOneMenu>
</h:panelGrid>
<wc:chart id="chart1" options="#{reporteIncidentesBean.options}"/>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
Reported by mortendamby, Nov 20, 2013
What steps will reproduce the problem?
What is the expected output? What do you see instead?
There should be no error and the JSF page should load correctly. Instead the page comes up blank and the console displays: "SEVERE: Unable to load annotated class: , reason: java.lang.NoClassDefFoundError: com/googlecode/wickedcharts/highcharts/options/color/ColorReference"
What version of the product are you using? On what operating system?
Using wicked-charts-jsf21-1.5.0 on Windows 7
Please provide any additional information below.
I've double chekked web.xml and faces-config, both of them are as they should be.
My bean class looks like this:
package Charts;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import com.googlecode.wickedcharts.highcharts.options.*;
import com.googlecode.wickedcharts.highcharts.options.series.*;
@ManagedBean(name="chart")
public class WickedCharts {
private Options options;
public Options getOptions(){
createChart();
return options;
}
public void setOptions(Options options){
this.options = options;
}
public void createChart(){
options
.setChartOptions(new ChartOptions()
.setType(SeriesType.LINE));
options
.setTitle(new Title("My very own chart."));
options
.setxAxis(new Axis()
.setCategories(Arrays
.asList(new String[] { "Jan", "Feb", "Mar", "Apr", "May",
"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" })));
options
.setyAxis(new Axis()
.setTitle(new Title("Temperature (C)")));
options
.setLegend(new Legend()
.setLayout(LegendLayout.VERTICAL)
.setAlign(HorizontalAlignment.RIGHT)
.setVerticalAlign(VerticalAlignment.TOP)
.setX(-10)
.setY(100)
.setBorderWidth(0));
options
.addSeries(new SimpleSeries()
.setName("Tokyo")
.setData(
Arrays
.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));
options
.addSeries(new SimpleSeries()
.setName("New York")
.setData(
Arrays
.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));
}
}
and the html file:
<?xml version='1.0' encoding='UTF-8' ?>
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:wc="http://googlecode.com/wickedcharts">
<h:head>
<script src="jquery.js" type="text/javascript"></script>
</h:head>
<h:body>
<script src="highcharts.js" type="text/javascript"></script>
<wc:chart id="chart1" options="#{chart.options}" />
</h:body>
</h:html>
I have started using Wicket Chart for my project (web based Java project) and I am facing some difficulties to meet requirement.
I can’t able to get exactly like above. But I got into this level using some example (wicked-charts-highcharts-1.5.0.jar and wicked-charts-wicket6-1.5.0.jar)
Issue Currently I am facing
1 Not able to remove background rectangle white box
2. Not able to set values ( 23% 10% 8% ..) in all layer
3.Not able to move all links text ( Ex: 1,170,233 under 50 years ) to right like first example
I am developing using java and attached java file I am currently using.
Please kindly help us.
Thanks in advance
Reported by BeandLauert, Jun 19, 2013
It would be splendid if wicked-charts would support the following:
map = new MapChart("mapchart", options);
and subsequently render a map with the corresponding options (like to be seen here: http://www.highcharts.com/studies/map-from-svg.htm#World1)
Reported by evgen.kulikoff, Dec 9, 2013
Please add support for "format" setting for labels:
Reported by rmillet42, Apr 11, 2014
What steps will reproduce the problem?
What is the expected output? What do you see instead?
CDATA is not encoded in the response, breaking it.
What version of the product are you using? On what operating system?
Wicked-charts revision 303 (1.5.1-SNAPSHOT)
Mojarra 2.2.6
Tomcat 7
Attached a patch working with my settings (not tested with other JSF implementations) of wicked-charts-jsf21/src/main/java/com/googlecode/wickedcharts/jsf21/UIChart.java
Index: src/main/java/com/googlecode/wickedcharts/jsf21/UIChart.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/jsf21/UIChart.java (revision 303)
+++ src/main/java/com/googlecode/wickedcharts/jsf21/UIChart.java (working copy)
@@ -44,9 +44,6 @@
private Theme theme;
private String themeUrlRef;
- private final static String PRE_JS = "\n<script type=\"text/javascript\">\n/*<![CDATA[*/\n$(function() {\n";
- private final static String POST_JS = "\n;});\n/*]]>*/\n</script>";
-
private static final Feature[] SUPPORTED_FEATURES = new Feature[] {
};
@@ -81,13 +78,19 @@
// include Theme JS
this.addThemeJavaScript(writer, renderer);
- writer.append(UIChart.PRE_JS);
- // include Chart JS
- writer.append(MessageFormat.format(
- "var {0} = {1};\nvar {2} = new Highcharts.Chart({0});",
- optionsVarname, renderer.toJson(options), chartVarname));
+ StringBuffer sb = new StringBuffer(512);
+ sb.append("//<![CDATA[\n");
+ sb.append("$(function() {\n");
+ sb.append(MessageFormat.format(
+ "var {0} = {1};\nvar {2} = new Highcharts.Chart({0});",
+ optionsVarname, renderer.toJson(options), chartVarname));
+ sb.append("\n;});\n");
+ sb.append("//]]>\n");
- writer.append(UIChart.POST_JS);
+ writer.startElement("script", this);
+ writer.writeAttribute("type", "text/javascript", "type");
+ writer.writeText(sb.toString(), this, null);
+ writer.endElement("script");
}
private void addThemeJavaScript(ResponseWriter writer, JsonRenderer renderer)
@@ -101,11 +104,19 @@
this.getThemeUrlRef()));
} else if (this.getTheme() != null) {
- writer.append(UIChart.PRE_JS);
- writer.append(MessageFormat.format("Highcharts.setOptions({0})",
- renderer.toJson(this.getTheme())));
- writer.append(UIChart.POST_JS);
+ StringBuffer sb = new StringBuffer(512);
+ sb.append("//<![CDATA[\n");
+ sb.append("$(function() {\n");
+ sb.append(MessageFormat.format("Highcharts.setOptions({0})",
+ renderer.toJson(this.getTheme())));
+ sb.append("\n;});\n");
+ sb.append("//]]>\n");
+
+ writer.startElement("script", this);
+ writer.writeAttribute("type", "text/javascript", "type");
+ writer.writeText(sb.toString(), this, null);
+ writer.endElement("script");
}
}
LiveDataSeries update(final LiveDataUpdateEvent event) method results in a new Point beeing added to the chart.
That is causing issues with pointer animation in Gauge charts (there is no anim at all). Would be could to have the option to use either addPoint or updatePoint on LiveDataSeries updates.
I make a chart with a min and max value on Yaxis (see gist: https://gist.github.com/mcarrolle/3c50ddac5ac508000121).
When I am doing a Y zoom on the first marker of the chart, i can't see the two points with value 20.5 and 20.3, and the scale of Y axis never change.
The same chart options works fine on a pure highchart.js test: http://jsfiddle.net/mcarrolle/shhusfno
Do you have any idea on how to handle this usecase ?
Since Highchart 3.0, a theme element can be added on some elements like navigation.exportButtons.
This element is not mapped in java classes.
HighChart documentation :
theme: Object
Since 3.0
A configuration object for the button theme. The object accepts SVG properties like stroke-width, stroke and fill. Tri-state button styles are supported by the states.hover and states.select objects.
Reported by evgen.kulikoff, Dec 9, 2013
Please add support for "itemDistance" setting for legend:
Reported by tom.hombergs, Sep 6, 2013
Add the new boxplot chart type.
Also have a look at Highcharts 3 in general to check if there are other options missing.
Reported by simar.jeremy, Feb 19, 2014
With Highcharts 3.0.3, timezoneOffset was introduced.
It would be great if that was added to wicked-charts.
Hi,
I'm trying to run your demo-Code (from getting started page) in a JSF 2.2 environment. I'm getting the following error when going to the page including the chart:
javax.faces.FacesException: Expression Error: Named Object com.googlecode.wickedcharts.Chart not found.
Environment: Java8, Tomcat8, Maven
Part of my pom.xml:
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.12</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.12</version>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>javax.el-api</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>${primefacesVersion}</version>
</dependency>
<dependency>
<groupId>com.googlecode.wicked-charts</groupId>
<artifactId>wicked-charts-jsf21</artifactId>
<version>1.5.0</version>
</dependency>
Is the wicked-charts 1.5.0 release not compatible with JSF 2.2?
Reported by [email protected], Aug 12, 2013
At the moment, there's no support for setting staggerLines on Axis labels like so:
http://api.highcharts.com/highcharts#xAxis.labels.staggerLines
It would be great if that was supported.
Reported by tom.hombergs, Aug 23, 2013
The themeUrl-attribute in wicked-charts-jsf can only be set once for a page. A second theme will override the first. This is misleading.
Reported by airleks41, Sep 11, 2013
What steps will reproduce the problem?
What is the expected output? What do you see instead?
Expexted: The print option has text "New print text"
Actual: The print option's text remains the same "Print chart"
What version of the product are you using? On what operating system?
1.5.0, Windows 7 Home Edition
Please provide any additional information below.
I suppose the issue caused by changing option name in lang properties of new version of Highcharts from printButtonTitle to printChart
Reported by keith.priddy, Sep 12, 2013
I am having problems getting a chart to display when run through JSF. It is always set as a 0px X 0px element when I go through the debug. I have tried setting Height and Width manually through ChartOptions in the Java code or in the html (just creates an empty space). No errors with missing jars or dependencies, just no chart shown! This is the index.xhtml content:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wc="http://googlecode.com/wickedcharts">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<body>
<wc:chart id="chart1" options="#{QuickChart.options}" theme="#{QuickChart.theme}"/>
</body>
<div id="container" style="width:100%; height:400px;"></div>
... the Javascript chart function is here, but not relevant....
The bean info:
@ManagedBean(name="QuickChart")
@SessionScoped
public class QuickChart{
Options options;
private Theme theme = null;
public QuickChart() {
options = new Options();
ChartOptions cOptions = new ChartOptions();
cOptions.setType(SeriesType.LINE);
cOptions.setHeight(400);
cOptions.setWidth(400);
options.setChartOptions(cOptions);
...
the rest is copied from the "Getting Started" options page.
Running on Windows 7 with Chrome browser.
Deployed through Netbeans 7.3.1 with Glassfish and JSF 2.1.
Libraries:
Java EE Web 6
jackson-annotations-2.0.5
jackson-core-2.0.5
jackson-databind-2.0.5
wicked-charts-highcharts-1.5.0
wicked-charts-jsf21-1.5.0
Feedback from the wicket-users mailing list:
Is it possible to use Wicket's IDataProvider interface to provide data for the charts?
Reported by clemvangelis, Jun 21, 2013
Simply create a chart inside a ui:repeat
The generated graphs should have distinct ids but instead of that, they get the same one.
I'm working with latest wicked-charts from svn (10 june of 2013, r276)
and I'm using Apache MyFaces
<ui:repeat value="${mybean.options}" var="opts">
<wc:chart options="#{opts}" />
/ui:repeat
With this code I get the duplicated id "j_id_19" for all charts generated with options from myBean.
Thanks in advance
Reported by rmadhura88, Oct 7, 2013
I have a picklist and a color picker on my page. Using these parameters I need to generate a multi-axes chart.
I have my code for wicked chart in JSF page and I am including it in another JSF page which has components like picklist, color picker etc.
But whenever I include the page the picklist stops working. On click of color picker nothing happens.
I guess the issue is with the jquery.js and highcharts.js.
I am using JSF 2.0.2, primefaces 3.4.2 and wickedcharts 1.5, Google Chrome as browser.
Please tell me what I need to do to resolve this issue.
Reported by venkataramireddy1508, Nov 27, 2013
What steps will reproduce the problem?
1.followed the steps in gettingStarted page
2.
3.
What is the expected output? What do you see instead?
charts are not rendered
What version of the product are you using? On what operating system?
latest version wicket 6.x , on fedora
Please provide any additional information below.
I added this code in homepage.java constructor.
Options chartOptions = new Options();
chartOptions.setChartOptions(new ChartOptions().setType(SeriesType.LINE)
.setMarginRight(130)
.setMarginBottom(25));
chartOptions.setTitle(new Title("Monthly Average Temperature").setX(-20));
chartOptions.setSubtitle(new Title("Source: WorldClimate.com").setX(-20));
Axis xAxis = new Axis();
xAxis
.setCategories(Arrays
.asList(new String[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }));
chartOptions.setxAxis(xAxis);
PlotLine plotLines = new PlotLine();
plotLines
.setValue(0f);
plotLines
.setWidth(1);
plotLines
.setColor(new HexColor("#999999"));
Axis yAxis = new Axis();
yAxis
.setTitle(new Title("Temperature (��C)"));
yAxis
.setPlotLines(Collections
.singletonList(plotLines));
chartOptions.setyAxis(yAxis);
Legend legend = new Legend();
legend
.setLayout(LegendLayout.VERTICAL);
legend
.setAlign(HorizontalAlignment.RIGHT);
legend
.setVerticalAlign(VerticalAlignment.TOP);
legend
.setX(-10);
legend
.setY(100);
legend
.setBorderWidth(0);
chartOptions.setLegend(legend);
Series<Number> series1 = new SimpleSeries();
series1
.setName("Tokyo");
series1
.setData(Arrays
.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5,
23.3, 18.3, 13.9, 9.6 }));
chartOptions.addSeries(series1);
Series<Number> series2 = new SimpleSeries();
series2
.setName("New York");
series2
.setData(Arrays
.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5 }));
chartOptions.addSeries(series2);
Series<Number> series3 = new SimpleSeries();
series3
.setName("Berlin");
series3
.setData(Arrays
.asList(new Number[] { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9,
14.3, 9.0, 3.9, 1.0 }));
chartOptions.addSeries(series3);
Series<Number> series4 = new SimpleSeries();
series4
.setName("London");
series4
.setData(Arrays
.asList(new Number[] { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6,
14.2, 10.3, 6.6, 4.8 }));
chartOptions.addSeries(series4);
System.out.println("Options: " + chartOptions);
add(new Chart("chart", chartOptions));
What steps will reproduce the problem?
What is the expected output? What do you see instead?
The chart is not shown, because the generated output contains invalid javascript for IE:
<script type="text/javascript">
/*<![CDATA[*/
//the following line is not supported in IE
document.addEventListener("DOMContentLoaded", function onDom(event) {
var chart1Options = {
"chart" : {
"renderTo" : "chart1",
...
What version of the product are you using? On what operating system?
'wicked-charts-jsf21-1.4.2.jar'
'wicked-charts-highcharts-1.4.2.jar'
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"</script>
Please provide any additional information below.
The Wicked Showcase (with HTML and Wicked - http://wicked-charts.appspot.com/start/?7) works fine in IE 8 (already fixed in Issue 1 ).
But my Implementation (see below) generates exactly the issue (1) again:
Bean:
@ManagedBean(name = "myBean")
@SessionScoped
public class Chart {
Options options = new Options();
public Chart() {
initOptions();
}
private void initOptions() {
options.setChartOptions(new ChartOptions().setType(SeriesType.LINE));
options.setTitle(new Title("My very own chart."));
options.setxAxis(new Axis().setCategories(Arrays.asList(new String[] {
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec" })));
options.setyAxis(new Axis().setTitle(new Title("Temperature (C)")));
options.setLegend(new Legend().setLayout(LegendLayout.VERTICAL)
.setAlign(HorizontalAlignment.RIGHT)
.setVerticalAlign(VerticalAlignment.TOP).setX(-10).setY(100)
.setBorderWidth(0));
options.addSeries(new SimpleSeries().setName("Tokyo").setData(
Arrays.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));
options.addSeries(new SimpleSeries().setName("New York").setData(
Arrays.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));
}
public Options getOptions() {
return options;
}
public void setOptions(Options options) {
this.options = options;
}
}
My faces file:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wc="http://googlecode.com/wickedcharts"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
type="text/javascript"></script>
</h:head>
<h:body>
<script src="http://code.highcharts.com/highcharts.js"
type="text/javascript"></script>
<wc:chart id="chart1" options="#{myBean.options}" />
</h:body>
</f:view>
</html>
Reported by sebastien.gautrin, Apr 9, 2014
Objective: generate a graph with one line series where
Highcharts' wise, this means:
marker: { enabled: false, states: { hover: { enabled: true } } }
marker: { enabled: true }
on isolated pointSee this fiddle: http://jsfiddle.net/J99MA/
This other fiddle is with using complete points instead of defining categories on xAxis: http://jsfiddle.net/J99MA/1/
When y: null
is omitted, Highcharts will then not be able to draw the series as a line or spline series, and will draw it as a scatter plot (i.e. with no point connection).
With wicked-charts' implementation, setting null y on points with no data can be done with using CoordinateSeries
or even SimpleSeries
. However as we need to be able to set the marker
attribute on points, we need to use PointSeries
(unless I missed something).
However, with PointSeries, we can't specify y: null
as Point has no specific Serializer and thus uses the default of suppressing null when serializing.
To circumvent the problem I overloaded the Point class in my project to add @JsonInclude(value = JsonInclude.Include.ALWAYS)
on the y
attribute, but that doesn't feel right.
Note: this is with wicked-charts 1.5.0 for wicket 1.5 (wicked-charts-wicket15:1.5.0).
When adding a Javascript expression on a LiveDataSeries, double quotes are not parsed correctly (expression is taken to be a string), while using simple quotes works. This happens even though the double quotes are escaped.
I have noticed this while using a drop down list to select an id and trying to print it out in the LiveDataSeries' update() method.
HTML snippet:
...
<form wicket:id="form">
<p>Select cable:</p>
<select id="cableselect" wicket:id="cable">
<option></option>
</select>
<input wicket:id="start" type="submit" value="Start"/>
</form>
<div wicket:id="tempgraph"></div>
...
Wicket code snippet:
...
List<String> cableIDs = Arrays.asList("1", "2", "3", "4", "5");
form.add(new DropDownChoice("cable", new PropertyModel(cd, "cableID"), cableIDs));
...
series = new LiveDataSeries(options, 1000) {
@Override
public Point update(final LiveDataUpdateEvent event) {
JavaScriptParameters params = event.getParameters();
System.out.println("Cable ID: " + params.getParameterValue("cableID"));
return new Point(new Date().getTime(), Math.random());
}
}.addJavaScriptParameter("cableID", "document.getElementById(\"cableselect\").selectedIndex");
options.addSeries(series);
chart = new Chart("tempgraph", options);
add(chart);
...
In the console, the update() method of LiveDataSeries prints:
Cable ID: document.getElementById("cableselect").selectedIndex
If I change it to addJavaScriptParameter("cableID", "document.getElementById('cableselect').selectedIndex")
, it works perfectly:
Cable ID: 3
My configuration:
Apache Wicket 6.16.0
Wicked Charts POM Dependency:
<artifactId>wicked-charts-wicket6</artifactId>
<version>1.5.0</version>
Reported by alikox, Dec 21, 2013
What steps will reproduce the problem?
What is the expected output? What do you see instead?
Chart is not rendered. javascript console shows the following error:
Uncaught Highcharts error #17: www.highcharts.com/errors/17
What version of the product are you using? On what operating system?
wicked charts 1.5.0 and apache wicket 6.10.0
Please provide any additional information below.
In Turkish locale, the lowercase of character 'I' is 'ı' not 'i'. That causes SeriesType.SPLINE to be transformed into "splıne" in javascript code.
var chart11Options = {
"chart" : {
"renderTo" : "chart11",
"type" : "splıne",
"events" : {
"load" : function(){}
}
},
Since "splıne" is not a recognized series type, higcharts throws exception #17 and chart is not rendered.
As a workaround server language can be set to English.
-Duser.language=en
More of a question - is this possible ? When I try it, I get weird results, and the high charts demo itself doesn't show it so I wondered if it is actually possible/anyone has tried it, Tom?
Please tell me which jar file should i use with Netbeans 7.2 Apache wicket 1.6 plugin since i did not found any info about supported version
What steps will reproduce the problem?
What is the expected output? What do you see instead?
The chart is not shown, because the generated output contains invalid javascript for IE:
Please provide any additional information below.
The Wicked Showcase (with HTML and Wicked - http://wicked-charts.appspot.com/start/?7) works fine in IE 8 (already fixed in Issue 1 ).
But my Implementation (see below) generates exactly the issue (1) again:
Bean:
@ManagedBean(name = "myBean")
@SessionScoped
public class Chart {
Options options = new Options();
public Chart() {
initOptions();
}
private void initOptions() {
options.setChartOptions(new ChartOptions().setType(SeriesType.LINE));
options.setTitle(new Title("My very own chart."));
options.setxAxis(new Axis().setCategories(Arrays.asList(new String[] {
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec" })));
options.setyAxis(new Axis().setTitle(new Title("Temperature (C)")));
options.setLegend(new Legend().setLayout(LegendLayout.VERTICAL)
.setAlign(HorizontalAlignment.RIGHT)
.setVerticalAlign(VerticalAlignment.TOP).setX(-10).setY(100)
.setBorderWidth(0));
options.addSeries(new SimpleSeries().setName("Tokyo").setData(
Arrays.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));
options.addSeries(new SimpleSeries().setName("New York").setData(
Arrays.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));
}
public Options getOptions() {
return options;
}
public void setOptions(Options options) {
this.options = options;
}
}
My faces file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> /h:head <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script> /h:body /f:viewIt looks like it's missing from the API. Are you interested by a PR?
Don't have errorbars available as a SeriesType, which means error bars, that were introduced since version 3 of highcharts, can't be used via wicket-charts natively.
Here's the javadoc on it: http://api.highcharts.com/highcharts#plotOptions.errorbar
Here's a JsFiddle example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/error-bar/
Currently, all example charts in the showcase are accessible via the /home URL. Each example should get its own URL so they can be navigated separately (from the documentation, for example).
Reported by maximilian.friedmann, Nov 4, 2013
Hi there,
many thanks for such a great HighCharts Wrapper. With 10 lines of code I managed to use it with the ZK framework together, maybe you can include this in further releases?
package testing;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;
import com.googlecode.wickedcharts.highcharts.jackson.JsonRenderer;
import com.googlecode.wickedcharts.highcharts.options.Options;
public class ZKWicketChart extends Options
{
public void renderToComponent(final Component target)
{
getChartOptions().setRenderTo(target.getUuid());
final JsonRenderer jsonRenderer = new JsonRenderer();
final String json = jsonRenderer.toJson(this);
Clients.evalJavaScript("new Highcharts.Chart(" + json + ");");
}
}
Reported by evgen.kulikoff, Dec 5, 2013
Try to parse JSON below produced by wicked-charts JsonRenderer class: $.parseJSON(json);
"{
"chart" : {
"animation" : false,
"height" : 200,
"type" : "column",
"plotShadow" : false,
"reflow" : false,
"width" : 500
},
"series" : [ {
"name" : "Charter p.d. (1st)",
"data" : [ 4200.0, 4200.0 ]
}, {
"name" : "Charter p.d. (Plan)",
"data" : [ 1000.0, 2000.0, 3000.0, 4000.0, 5000.0, 5000.0, 6000.0, 7000.0, 8000.0, 8000.0 ]
} ],
"xAxis" : [ {
"categories" : [ "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020" ],
"labels" : {
"align" : "center",
"style" : { font: 'normal 11px Arial, sans-serif' }
},
"plotBands" : [ {
"color" : "#f0f1f3"
} ],
"tickmarkPlacement" : "on"
} ],
"yAxis" : [ {
"labels" : {
"align" : "right",
"style" : { font: 'normal 11px Arial, sans-serif' }
}
} ],
"credits" : {
"enabled" : false
},
"plotOptions" : {
"column" : {
"animation" : true
}
},
"creditOptions" : {
"enabled" : false
}
}"
Expected result: JSON successfull parsed to JS Object.
Actual result: The exception thrown: "Uncaught SyntaxError: Unexpected token f"
Also if I try to validate this JSON at http://jsonlint.com/ the validation fails.
Wicked-charts version: 1.5.0
Or, is it planned to add 1.6.0 to central?
How i use HighStock? dont have the classes of HighStock in documentation and lib.
I found Axis miss the minTickInterval attribute. Could you also add that?
Thank you!
I want to add charts to secured page (https). But there is an error:
Mixed Content: The page at 'https://example.com/DashboardPage' was loaded over HTTPS, but requested an insecure script 'http://code.highcharts.com/3.0.2/highcharts.js'. This request has been blocked; the content must be served over HTTPS.
To fix the problem it is sufficient to fix the urls from:
DEFAULT_HIGHCHARTS_URL = "http://code.highcharts.com/3.0.2/highcharts.js";
DEFAULT_HIGHCHARTS_MORE_URL = "http://code.highcharts.com/3.0.2/highcharts-more.js";
DEFAULT_HIGHCHARTS_EXPORTING_URL = "http://code.highcharts.com/3.0.2/modules/exporting.js";
to:
DEFAULT_HIGHCHARTS_URL = "//code.highcharts.com/3.0.2/highcharts.js";
DEFAULT_HIGHCHARTS_MORE_URL = "//code.highcharts.com/3.0.2/highcharts-more.js";
DEFAULT_HIGHCHARTS_EXPORTING_URL = "//code.highcharts.com/3.0.2/modules/exporting.js";
(Remove http:)
I created multi axis stacked column chart through WickedChart .
Now I want to set "setPointPadding" for each column series . Kindly help to solve this issue
Reported by Rob.A.R.Davis, Sep 11, 2013
What steps will reproduce the problem?
What is the expected output? What do you see instead?
Ability to add highcharts renderer functionality to charts
What version of the product are you using? On what operating system?
Wicked Charts 1.5.0 on Windows 7
Please provide any additional information below.
Adding support for renderer calls on charts could allow for more expansive chart options (Org charts or shaded areas on charts, for example)
Reported by [email protected], Aug 27, 2013
The current implementation of Point does not allow value types other then Number. This makes it impossible to properly use the Axis type 'DATETIME'.
This patch makes the X and Y fields of Point generic, so other types can be used. It also adds a JSON serializer for java.util.Date instances.
Index: wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/jackson/JsonRenderer.java
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/jackson/JsonRenderer.java (revision 292)
+++ wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/jackson/JsonRenderer.java (revision )
@@ -14,12 +14,14 @@
*/
package com.googlecode.wickedcharts.highcharts.jackson;
+import java.util.Date;
import java.util.Locale;
import com.fasterxml.jackson.annotation.JsonInclude.Include;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.googlecode.wickedcharts.highcharts.json.LowercaseEnum;
import com.googlecode.wickedcharts.highcharts.options.Center;
import com.googlecode.wickedcharts.highcharts.options.Crosshair;
@@ -97,6 +99,7 @@
this.jacksonModule.addSerializer(Crosshair.class, new CrosshairSerializer());
this.jacksonModule.addSerializer(RangeCoordinate.class, new RangeCoordinateSerializer());
this.jacksonModule.addSerializer(Bubble.class, new BubbleSerializer());
+ this.jacksonModule.addSerializer(Date.class, new DateSerializer());
ObjectMapper mapper = createDefaultObjectMapper();
mapper.setLocale(Locale.ENGLISH);
Index: wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/jackson/DateSerializer.java
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/jackson/DateSerializer.java (revision )
+++ wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/jackson/DateSerializer.java (revision )
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2012-2013 Wicked Charts (http://wicked-charts.googlecode.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.googlecode.wickedcharts.highcharts.jackson;
+
+import java.io.IOException;
+import java.util.Calendar;
+import java.util.Date;
+
+import com.fasterxml.jackson.core.JsonGenerator;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.JsonSerializer;
+import com.fasterxml.jackson.databind.SerializerProvider;
+
+/**
+ * JsonSerializer for {@link Date} objects.
+ * @author pdegeus
+ */
+public class DateSerializer extends JsonSerializer<Date> {
+
+ @Override
+ public void serialize(final Date value, final JsonGenerator jgen, final SerializerProvider provider)
+ throws IOException, JsonProcessingException {
+
+ Calendar cal = Calendar.getInstance();
+ cal.setTime(value);
+
+ jgen.writeRawValue(String.format(
+ "new Date(%d,%d,%d,%d,%d,%d,0)",
+ cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH),
+ cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE), cal.get(Calendar.SECOND)
+ ));
+ }
+}
Index: wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/options/series/Point.java
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/options/series/Point.java (revision 292)
+++ wicked-charts/wicked-charts-highcharts/src/main/java/com/googlecode/wickedcharts/highcharts/options/series/Point.java (revision )
@@ -14,8 +14,9 @@
*/
package com.googlecode.wickedcharts.highcharts.options.series;
-import java.awt.Color;
+import java.awt.*;
import java.io.Serializable;
+import java.util.Date;
import com.googlecode.wickedcharts.highcharts.options.DataLabels;
import com.googlecode.wickedcharts.highcharts.options.Events;
@@ -24,14 +25,16 @@
import com.googlecode.wickedcharts.highcharts.options.color.SimpleColor;
/**
- * A point in a chart that has a label (or a name) and a color.
- *
- * @see <a
- * href="http://api.highcharts.com/highcharts#series.data">http://api.highcharts.com/highcharts#series.data</a>
+ * A point in a chart that has a label (or a name) and a color. Uses generics for the type of the X and Y values.
+ * Supported types are: all {@link Number Numbers}, {@link String} and {@link Date}. Use {@link Void} if a field is
+ * not used.
+ * @param <X> Type of the value on the X-axis.
+ * @param <Y> Type of the value on the Y-axis.
+ * @see <a href="http://api.highcharts.com/highcharts#series.data">http://api.highcharts.com/highcharts#series.data</a>
* @author Tom Hombergs ([email protected])
- *
+ * @author pdegeus
*/
-public class Point implements Serializable {
+public class Point<X, Y> implements Serializable {
private static final long serialVersionUID = 1L;
@@ -39,7 +42,7 @@
private ColorReference color;
- private Number y;
+ private Y y;
private Events events;
@@ -55,7 +58,7 @@
private Boolean selected;
- private Number x;
+ private X x;
private Integer wickedChartsId;
@@ -69,30 +72,34 @@
* @param y
* the y value of this point.
*/
- public Point(final Number y) {
- this.y = y;
+ public Point(final Y y) {
+ this(null, null, y);
}
- public Point(final String name, final Number y) {
- this.name = name;
- this.y = y;
+ public Point(final String name, final Y y) {
+ this(name, null, y);
}
- public Point(final Number x, final Number y) {
+ public Point(final X x, final Y y) {
+ this(null, x, y);
+ }
+
+ public Point(final String name, final X x, final Y y) {
+ this.name = name;
- this.x = x;
- this.y = y;
- }
+ this.x = x;
+ this.y = y;
+ }
/**
* Convencience constructor.
*/
- public Point(final String name, final Number y, final Color color) {
+ public Point(final String name, final Y y, final Color color) {
this.name = name;
this.y = y;
this.color = new SimpleColor(color);
}
- public Point(final String name, final Number y, final ColorReference color) {
+ public Point(final String name, final Y y, final ColorReference color) {
this.name = name;
this.y = y;
this.color = color;
@@ -130,11 +137,11 @@
return this.sliced;
}
- public Number getX() {
+ public X getX() {
return this.x;
}
- public Number getY() {
+ public Y getY() {
return this.y;
}
@@ -183,12 +190,12 @@
return this;
}
- public Point setX(final Number x) {
+ public Point setX(final X x) {
this.x = x;
return this;
}
- public Point setY(final Number y) {
+ public Point setY(final Y y) {
this.y = y;
return this;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.