Highstock Graph not coming up properly - javascript

I am making multiseries highstock chart. Right now data is dummy , creating timestamp and some values in java-script . The issue is that graph is coming up but FROM and TO textbox do not show correct values . also not much info(week ,month,year) coming up in X axis range selector.
Also different graph resolutions like 1m 3m etc appears disabled.
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},....
please see the fiddle here
Thanks.

Related

Highcharts - No X Axis Crosshair

I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.

Change fill color of selected point in Google Charts API scatter plot

I have a Google Charts scatter plot with various points specified on it. I also have a side bar with a list of values corresponding to the points on the scatter graph and when I select a side bar value, it highlights the corresponding point in the graph.
I would like to change the fill-color of the selected item when it is selected. Currently, my working selection code is:
$("#select").on('click', function() {
scatterChart.setSelection([{row: 1, column: 1}]);
});
I have tried using setValue() and setProperty on the data and have redrawn the chart but it has no affect.
Any help much appreciated.

Rendering issue with 2 Google charts on the same page

I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.
Please take a look at the following screenshots to see the problem:
2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0
It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1
If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2
You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.
You'd better to find/tell about your problem on Google Charts project page directly - https://code.google.com/p/google-visualization-api-issues/issues/list.
Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;
There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...
Thus, problem is in that part. One solution can be formatting the numbers as #mhu suggested. Another solution can be using the ColumnChart type by changing the code part;
var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
and adding this to the options ;
hAxis: {viewWindowMode: 'maximize'}
https://jsfiddle.net/L0gxnywu/
Solution 2: You can change the div's sequence as;
<div id="requests-chart"></div>
<div id="traffic-chart"></div>
https://jsfiddle.net/3j4s1vfj/

Semi-circle donut pie chart with labels (data names) and %-ages on the pie ... and data numbers on mousehover

The goal is to create a pie chart, where
the percentages (calculated or manually specified) are shown inside the pie.
data is shown upon mousehover.
Clarification: e.g. imagine a set consisting of 2 data labels. One is called apples (containing "15" apples), and the other one is called pears (containing "15" pears), then the percentages, always visible, shown inside the pie would be "50%" and "50%", whereas the data shown on mousehover would be "15" and "15".
Such has been already done in a previous post: Displaying percentage inside pie item for highcharts with JSFiddle 1.
However, would it be possible to
use a semi-circle donut pie chart, instead of a circle pie chart. (what is a semi-circle donut pie chart? -> JSFiddle 2)?
have text labels (data names) on the chart inside the pie chart, such as in Fiddle 2.
*Clarification: e.g. having the data labels "apples" and "pears" on the pie by default, such as "Firefox" and "Chrome" in Fiddle 2.*
Any help would be greatly appreciated, as I find it hard to combine these Fiddles, since I am far underexperienced with JS.
E.g. Fiddle 1 works/starts with $(function () {
var chart = new Highcharts.Chart({,
whereas Fiddle 2 starts with $(function () {
$('#container').highcharts({.
The Highcharts API Reference manual is learning me slowly, as a beginner.
Since I'm not sure which you prefer here is a fiddle you can look at that leverage the highcharts formatter attribute:
formatter: function() {
return Math.round(this.percentage*100)/100 + ' %';
}
I believe what you want is something like this.

Highstock on load graph displays just one point

I am drawing a spline graph and getting a problem where in graph shows only one point on load of graph.On the other hand if I click on range selector or horizontal scroll of graph , it displays all points of graph correctly.
I tried with different data also and graph displays correctly.
Here is a fiddle to see that
$('#container').highcharts('StockChart', {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
zoomType: 'x'
}});
I did try to understand the data pattern and googled to find if there is any issue with highstock but no avail.
Looks like your graph doesn't get the initial range status correctly, as you may notice that 'All' range button is disabled when first load.
Declare a pre-selected option: selected:0 in rangeSelector would help (http://jsfiddle.net/MS63L/)
rangeSelector: {
selected:0,
buttons: [
.... rest part are same as your original code
You can change the integer according to your need: 0 select '5m', 1 select '15m', 2 select 'All'. As this attribute means The index of the button to appear pre-selected.
See also: http://api.highcharts.com/highstock#rangeSelector.selected

Categories