How to make bar gradient in Invient Chart?

I just got this series code to make the bar in the chart gradient by highcharts, so how can I make it by Invient Chart.

This is the highchart js link:

http://jsfiddle.net/7Mmee/1481/

var chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
defaultSeriesType: ‘bar’
},
xAxis: {
categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]

},

plotOptions: {
    series: {
        stacking: 'normal'
    }
},

series: [{
    color: {
      linearGradient: [0, '20%', 0, '70%']

,
stops: [
[0, ‘rgb(255, 255, 255)’]
,
[1, ‘rgb(0, 0, 0)’]

      ]
    },
    data: [29.9, 71.5, {y:106.4, 
                        color: {
      linearGradient: [0, '20%', 0, '70%']

,
stops: [
[0, ‘rgb(255, 0, 0)’]
,
[1, ‘rgb(0, 0, 255)’]

      ]
    }},
           129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]

}]

});

You can use com.invient.vaadin.charts.Gradient class to specify gradient for the bar. You can also look at the demo of master-detail chart or timeseries chart.

Thanks

The timeseries chart is using the areaconfig, which provides the interface to set the gradient. But here I am using the bar chart, and there is no such method like setfillcolor(…) to do so.

Thanks.
Chun

Please try the newly released version 0.8.4 and let us know if we have fixed this problem.

That works!

Cool!

Thanks a lot.

Chun

Hi,

I just added two plotlines for the chart by using NumberPlotLine and add labels (PlotLabels) for the plotlines. I am wondering whether I can change the font style of the label, as the font size, color, tec.

Thanks.
Chun

Please use AxisDataLabel.setStyle() method to style label. The argument of setStyle() method is a CSS object in string form e.g. AxisDataLabel.setStyle(" { font: ‘normal 13px Verdana, sans-serif’ } ");

It works well now. I have one more question:

I would like to add the listener for the label of the x-axis in the chart. For example, I set the x-axis with time point (05/2010, 06/2010 …), thus once a time label is clicked, some action would happen. I can not find a method for this, although that I saw some example to do some using jquery directly.

Thanks.

  • K

Highcharts does not provide any direct API to set event listeners for axis point labels and hence InvientCharts too does not support such a feature. Can you provide a link to such an example?

Thanks

Here is the simple example:
http://jsfiddle.net/grVFk/5919/

thanks.

  • k

Hi,

I am wanting to disable the clikable of the legend in the pie chart. But can not find the method to do so. However, in highchart, this can be done as:

plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(eventArgs) {
//this.remove(); // Remove the point
eventArgs.preventDefault(); // Prevent the default behavior
}
}
},
showInLegend: true
}
},

So how can I fix this by invient chart.

Thanks,
Chun

Unfortunately, currently it is not possible to disable clickable of the legend item. We will look into the issue.

It’s a pity there is no a programmatic way to disable clickability of legend, but there is a CSS solution for that. Add this to the CSS-s of your application:

.highcharts-legend tspan,.highcharts-legend text {

pointer-events: none;

cursor: default;
}

This is supported in every modern browser, including IE8.