Im trying to create a vertical solid gauge chart with highcharts. It should be really simple, just like a solid gauge but as a vertical bar.
For doing so, I am creating a new series type and extending it from the column chart.
If I set all the options for columns, e.g. hiding the Y Axis labels, hiding the X axis labels, etc. it works more or less like I want to. But, as I am wrapping this into a plugin, I don't think it make sense that the user who defines a chart as a lineargauge should have to worry about setting this informations right. Thus, I need a way to set some default properties to my custom series and I cant find the way to do it.
I have tried wrapping the render and drawGraph function. I have tried setting it on the overriden draw functions of my chart. None of these worked.
You can check my progress on this fiddle: http://jsfiddle.net/w8ou4byv/1/
What I want, for instance, is that the user of my plugin should not have to set:
//...
yAxis: {
labels: { enabled: false },
}
It should be the default value (although it is not the default for the column chart that I am inheriting from).
Thanks!
You use Highcharts.extendClass for creating a new series type. Highcharts provides a dedicated function for this called seriesType: https://api.highcharts.com/class-reference/Highcharts#seriesType
seriesType accepts default options of a new series as an argument - that's the solution for your problem.
Related
We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
Chart.js 2.0 line chart
I need to only show the hover state on the current point, not on the entire data set.
Chart.js documentation has this example,
This is what my chart looks like when I hover on a single point.
Thank you.
Found the answer. When creating the chart you can specify it in the options.
options: {
hover: {
mode: 'single'
}
}
Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.
You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart:
By default flot was generated legend block (table) like this ([#] - color box):
_________________
|_[#]_|_label_1_|
|_[#]_|_label_2_|
|_..._|_......._|
I wanna have horizontal legend like this:
______________________________.______________________________
|_[#]_|_My_long_label_1_______|_[#]_|_My_another_label_2____|
|_[#]_|_Trololo_label_here____|_[#]_|_hell,_yeah!___________|
.............................................................
I've been tried use labelFormatter() but have failed =(
I was added order number to each series element and can use it in labelFormatter() (like ...if(series.num % 2 == 0) { ...next row... }
Try Following,
legend: {
show: true,
noColumns:2,
container:$("#graph_legend")
}
Unfortunately, it doesn't work that way...
Flot only lets you manage how the labels look, not the structure of the whole legend itself. See the source for how it builds the table.
In there you'll notice that it just builds an html table and includes your labels in the appropriate cell.
Your best bet, given that information is to just make your own by hand, and suppress the generation of the default legend entirely (show:false). You could pretty easily take the insertLegend function from the flot source and make your own version of it that stacks them horizontally.