Related
In he picture we have values on X-Axis ass F1, F2, F3, and so on.
for example red dots denote value for F1.
For each X axis category the color for dots will be different.
We tried Highcharts Scatter graph but have no luck.
how can this be achieved.
You can use multiple scatter series with defined x and y values. Example:
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
series: [{
data: [
[0.9, 40],
[1, 15],
[1.05, 25],
[1.1, 10],
[2.9, 35],
[3, 35],
[3.1, 35]
]
}, {
data: [
[1.9, 25],
[1.95, 10],
[2, 35],
[2.1, 35]
]
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/4eszoy30/
API Reference: https://api.highcharts.com/highcharts/series.scatter.data
I have a Rails 6 app in which I am using Highcharts. I'm using plain JavaScript at the moment, then I'll transition to the highchart gem when I have the chart exactly how I want it. I have the chart almost exactly how I want it to render except for two things:
How can I use two different colors for a scatter chart?
How can I have just two lines bisecting my chart?
My data, at the moment is just a hard-coded array of arrays, something like this: [[3, 5], [7, 3], [22, 10], [35, 35], [10, 5], [10, 7]]. I would like to split the array in two and use two different colors for the points on the scatter chart.
For the lines, I would only like to show a line on the 'y' axis at point 50 (my y axis goes from 0 to 100) and one line on the 'x' axis at point 100 (my x axis goes from 0 to 200). Currently, I have both the lines on point 0.
Split your data into two series and set individual color for them.
Set gridLineWidth to 0 for both axes and add the lines by plotLines.
chart: {
type: 'scatter',
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
plotLines: [{
value: 50
}]
},
xAxis: {
min: 0,
max: 200,
gridLineWidth: 0,
plotLines: [{
value: 100
}]
},
series: [{
color: 'red',
data: [
[3, 5],
[7, 3],
[22, 10]
]
}, {
color: 'blue',
data: [
[35, 35],
[10, 5],
[10, 7]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/vm9Lrgds/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines
Is it possible to create a chart like the one below using google charts?
I have no idea how to go about this, so I decided to try using candlesticks chart.
with this basic starter code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(candleChart);
/*CANDEL CHART*/
function candleChart() {
var data = google.visualization.arrayToDataTable([
['Jan', 20, 28, 38, 45],
['Feb', 31, 38, 55, 66],
['Mar', 50, 55, 77, 80],
['Apr', 77, 77, 66, 50],
['May', 68, 66, 22, 15],
['jun', 68, 66, 22, 15],
['Jul', 68, 66, 22, 15],
['Aug', 68, 66, 22, 15],
['Sep', 68, 66, 22, 15],
['Oct', 68, 66, 22, 15],
['Nov', 68, 66, 22, 15],
['Dec', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('candle_chart'));
chart.draw(data, options);
}
But this is not what I want, I don't know where to start and I couldn't find any documentation on how to make it like the chart in the image.
The vertical line needs 0 as the center like in the image with positive numbers increasing below it and positive numbers increasing above it.
The bottom blue bar would be total number of competitors that did not get accepted. The green bar being total of competitors that did get accepted.
the line will represent where the user placed in that number.
Please help I have no clue where to begin. Thank you in advance!
use a ComboChart with 3 series / y-axis columns.
for the first two series use stacked columns. the first being the negative values, the second positive.
isStacked: true,
seriesType: 'bars',
for the third, change the series type to line.
series: {
2: {
type: 'line'
}
},
data should look similar to following.
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
['Apr', -375, 180, -190],
['May', -180, 240, 100],
['Jun', -160, 100, -205],
['Jul', -125, 80, -12],
['Aug', -175, 110, -25],
['Sep', -100, 220, 150],
['Oct', -110, 390, 240],
['05 Nov', -10, 25, 30],
])
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#cddc39', '#616161'],
hAxis: {
title: 'FY 18'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -400, f: '400'},
{v: -200, f: '200'},
0,
200,
400
],
title: 'Amount'
},
width: '100%'
}
var chart = new google.visualization.ComboChart(document.getElementById('chart'))
chart.draw(data, options)
});
#chart {
height: 320px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
It's this:
var options = {vAxis: { ticks: [-80,-40,0,40,80] }}
Read through the documentation! Every page on the google charts site lists all the configuration options for that chart type: super useful stuff.
Working JS fiddle cribbed from a gcharts example here.
Here is my plot data
var data = [{
data: [[4, 80], [8, 50], [9, 130]],
color: "rgb(30, 180, 20)",
threshold: {
below: 100,
color: "rgb(200, 20, 30)"
}
}]
var bar = $.plot("#placeholder", data);
and if i change the value of data in a button click like
data= [[4, 130], [8, 50], [9, 130]];
bar.setData([data]);
bar.draw();
});
The treshold value didnt work , if there is a way to acheive this.
You aren't updating the data correctly. You are initially giving flot a series object with threshold settings, when you setData though, you are giving it an array without those settings.
Do this instead to preserve your series options:
someData = somePlot.getData();
someData[0].data = [[4, 130], [8, 50], [9, 130]];
somePlot.setData(someData);
somePlot.draw();
Here's an example.
EDITS
If you don't like the getData call, leave your master data variable in scope and update that as #Raidri hinted at:
var masterData = [{
data: [[4, 80], [8, 50], [9, 130]],
color: "rgb(30, 180, 20)",
threshold: {
below: 100,
color: "rgb(200, 20, 30)"
}
}]
// later ...
masterData[0].data = [[4, 130], [8, 50], [9, 130]];
somePlot.setData(masterData);
somePlot.draw();
The important part is to leave your threshold series options intact in the setData call.
Have you tried calling bar.setupGrid() before the bar.draw()?
If that doesn't help, you make a complete new plot:
data[0].data = [[4, 130], [8, 50], [9, 130]];
bar = $.plot("#placeholder", data)
Is there a way to make certain candlesticks a different color when using the Google Charts API?
For example, take a look at the following (editable) candlestick chart:
https://code.google.com/apis/ajax/playground/?type=visualization#candlestick_chart
function drawVisualization() {
// Populate the data table.
var dataTable = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
chart.draw(dataTable, {legend:'none', width:600, height:400});
}
Is there a way to make, say, just the 'Tue' candlestick red while keeping the rest blue/white?
It seems there is no chart option to set that.
One possibility is to build two series from your data and set different color for each series. Input data has to be changed. Tue data are moved to the second series, all other values are zero:
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45, 0, 0, 0, 0],
['Tue', 0, 0, 0, 0, 31, 38, 55, 66,],
['Wed', 50, 55, 77, 80, 0, 0, 0, 0],
['Thu', 77, 77, 66, 50, 0, 0, 0, 0],
['Fri', 68, 66, 22, 15, 0, 0, 0, 0]
// Treat first row as data as well.
], true);
var options = {
legend: 'none',
bar: {
groupWidth: 100
},
series: {
0: {color: '#4682B4'},
1: {color: '#FF8C00'}
}
};
See example at jsbin. Not beautiful one because there is an offset for the second series.
The other possibility is to change SVG element property values. Each candlestick is build using something like:
<g>
<rect x="235" y="279" width="2" height="115" stroke="none" stroke-width="0" fill="#4682b4"></rect>
<rect x="213" y="312" width="47" height="44" stroke="#4682b4" stroke-width="2" fill="#4682b4"></rect>
</g>
So you have to filter out <rect> elements and change fill property for one which you want to have different color.
Update: That could be done, for example using methods querySelectorAll() and setAttribute():
var cSticks = document.querySelectorAll('rect[fill="#4682b4"]');
cSticks[2].setAttribute('fill', '#ff8c00');
cSticks[3].setAttribute('fill', '#ff8c00');
cSticks[3].setAttribute('stroke', '#ff8c00');
See updated example at jsbin with hardcoded data.
Note: fill color values are lowercase so if you search for 4682B4, nothing is found.