Pass a C# DataTable object to JavaScript to create chart - javascript

I would appreciate if someone could help me with this. It's for a job interview so quite important.
I have a JavaScript function at the top of my .aspx that draws a chart on the page (downloaded from Google Charts).
function drawChart() {
var **data** = 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);
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
...}
As you can see, the variable data here is used to create the chart.
If I have a C# DataTable object I want to pass to this function and use it instead, how do I do it?
Many thanks

Related

how to change candlestick color of google-charts?

I want to change the color of the lines representing the low and high points of the candlestick. But when I try, both the falling and rising candles change to the same color. like this.
I want the falling and rising candles to have different colors. I searched the API documentation, but couldn't find an answer.
This is my hope
Here is my code
const options = {
legend: "none",
candlestick: {
fallingColor: { strokeWidth: 0, fill: "#f6465d" }, // red
risingColor: { strokeWidth: 0, fill: "#0ccb80" }, // green
},
colors: ['#0ccb80'],
};
const data = [
["Day", "", "", "", ""],
["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],
["Sat", 42, 54, 60, 100],
["Sun", 34, 56, 64, 80],
];

How to plot heatmap on a image using plotly in javascript?

How to plot heatmap on an image using the Plotly.js,
main aim is to the plot the heatmap on the mobile view.
for example, these are some data points.
var data: any = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1], [782, 452, 29], [452, 128, 57]],
type: 'heatmap'
}
];
some useful link
https://plotly.com/javascript/heatmaps/

How to structure multiple data arrays with Multiple XY Line Chart in c3.js

This item has been posted before but I guess I have a different situation:
var allmydata = [
['week331', 1, 2, 3, 4, 5, 6],
['data331', 30, 200, 100, 400, 150, 250],
['week778', 30, 31, 32, 33, 34],
['data778', 20, 180, 240, 100, 190],
['week225', 45, 46, 47, 48, 49],
['data225', 10, 150, 220, 160, 300]
];
var AllWeeks = ['week331','week778','week225']
var chart = c3.generate({
data: {
AllWeeks: AllWeeks,
columns: allmydata
}
});
Obviously I want my weeks to start at week 1 and end (in this case) at week 49.
Currently I get 6 lines (so also a line for each week).
How can I solve this?
Thanks, Mike

Color of the bar behind the candlestick

How can I change the bar BEHIND the candlestick in Google Charts Api?
candlestick:{fallingColor:{fill:"red", strokeWidth:0.5,stroke:'black'},
risingColor:{fill:"yellowgreen",strokeWidth:0.5,stroke:'black'}}}
stroke option changes the color of the box, but not the stick behind. I get this weird color combination of black box with green or red and a blue stic.
Cannot find it in the docs
The colors parameter will modify the color of the "stick". This specifies default colors for each series in the chart.
E.g. to change the stick to red for the first series and brown for the second series:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = 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);
var options = {
legend: 'none',
colors: ['red','brown'],
candlestick: {
fallingColor:{ fill: "orange", strokeWidth:0.5, stroke:'black'},
risingColor:{ fill: "yellowgreen", strokeWidth:0.5, stroke:'black'}
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Fiddle here.
This is not possible but there's a GitHub issue about it if you want to chime in.

Google Chart API - different color for certain candlesticks

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.

Categories