I'm using chart.cs to try a Chart. It works fine so far. Now I want change data dynamicly but the update() functin does not work. What do I wrong?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
</head>
<body>
<button onclick="changedata()">changedata</button>
<canvas id="testChart"></canvas>
<script>
var testChart;
var test_labels = ['06:00', '06:10', '06:20', '06:30', '06:40', '06:50', '07:00'];
var test_data = ['1', '2', '3', '4', '3', '2', '1'];
var ctx = document.getElementById("testChart").getContext('2d');
testChart = new Chart(ctx, {
type: 'line',
data: {
labels: test_labels,
datasets: [{
data: test_data,
borderColor: "#ff0000",
borderWidth: 1,
}]
}
});
function changedata(){
test_data = ['4', '3', '2', '1', '2', '3', '4'];
testChart.update();
}
</script>
</body>
</html>
I think you are missing a little bit in your changedata function, something like
function changedata(){
testChart.data.datasets[0].data = ['4', '3', '2', '1', '2', '3', '4'];
testChart.update();
}
Related
Let's say I have the string:
"12345"
Is it possible to write a regex that would have the following match results?
["1","2","3","4","5","12","23,"34","45","123","234","345","1234","2345","12345"]
I have seen some similar problems, but not exactly the same.
What i wanted is a regex that can extract any possible number from strings.
The regular expression for this specific output would not be possible, as regular expressions are used to match patterns within a string, not to generate substrings of a given string.
You can do it with python:
input = "12345"
result = [input[i:i+j] for i in range(len(input)) for j in range(1, len(input)-i+1)]
print(sorted(result))
Output: ['1', '12', '123', '1234', '12345', '2', '23', '234', '2345', '3', '34', '345', '4', '45', '5']
Process finished with exit code 0
or JavaScript:
let input = "12345";
let result = [];
for (let i = 0; i < input.length; i++) {
for (let j = 1; j <= input.length - i; j++) {
result.push(input.slice(i, i+j));
}
}
console.log(result.sort());
Output: [
'1', '12', '123',
'1234', '12345', '2',
'23', '234', '2345',
'3', '34', '345',
'4', '45', '5'
]
Or if you want it to look like regex. So funny letters that lead to success, hardly anyone knows how and why, then just like that :D
const c = s => [...Array(1 << s.length)].map((, i) => [...s].filter((, j) => i & (1 << j)).join(''));
console.log(c("12345"));
Output:
[
'', '1', '2', '12',
'3', '13', '23', '123',
'4', '14', '24', '124',
'34', '134', '234', '1234',
'5', '15', '25', '125',
'35', '135', '235', '1235',
'45', '145', '245', '1245',
'345', '1345', '2345', '12345'
]
I'm new to chart.js and have the wall a bit with this:
<script>
window.onload = function ()
{
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
// labels: ['1', '2', '3', '4', '5', '6'],
datasets: [{
label: 'Test graph',
data: [100,200,30,700,40,500]
}]
},
options: {
scales: {
xAxes: [{
ticks: {
display: false //this will remove only the label
}
}]
}
}
});
}
</script>
It simple won't render unless I include the "labels" for the x-axis. Which I don't need so would like to just disable.
Any clues as to how to configure chart.js to do that ?
Chart.js needs a data point on the X and y axis to match data against, simplest work around you can use is to just provide an labels array with empty strings for the amount of data points you have
i have google sankey diagram
google.load('visualization', '1.1', {packages: ['sankey']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ],
[ 'Z', 'H', 4 ],
]);
// Sets chart options.
var options = {
width: 600,
sankey: {
node: {
interactivity: true
}
}
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
I've set option - node interactivity: true, which does following thing: When you click on the node, it highlights paths which goes into this node and which goes from this node.
But the case is, I want to highlight whole path. For example in my snippet, if you click node 'A', it must highlight also 'Z' - 'H' path. Is it possible to do such thing? Thank you in advance.
I need to get paging information of the legends. As shown in below image we have paging for legends.so, we need to get current selected page and number of page information.
click here for image
since there are no configuration options,
you'll have to inspect the SVG element which contains the information,
once the 'ready' event fires
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var message = document.getElementById('msg_div');
google.visualization.events.addListener(chart, 'ready', getLegendPage);
google.visualization.events.addListener(chart, 'select', getLegendPage);
function getLegendPage() {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
if (text.getAttribute('text-anchor') === 'middle') {
var legendPages = text.innerHTML.split('/');
message.innerHTML = 'Selected Legend page is ' + legendPages[0] + ' of ' + legendPages[1];
}
});
}
chart.draw(google.visualization.arrayToDataTable([
['Task', 'Hours'],
['A', 19.2],
['B', 30.8],
['C', 50.0],
['D', 19.2],
['E', 30.8],
['F', 50.0],
['G', 19.2],
['H', 30.8],
['I', 50.0],
['J', 19.2],
['K', 30.8],
['L', 50.0],
['M', 19.2],
['N', 30.8],
['O', 50.0]
]), {
height: 400,
chartArea: {
top: 24
},
legend: 'top',
pieHole: 0.4,
width: 400
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="msg_div"></div>
I have a template:
{{#people}}
<div style="background-color: **gray/white**;"><span>{{name}}</span>: <span>{{title}}</span></div>
{{/people}}
Is there a way to set that background-color without passing it in from my controller? This is purely display and I do not feel that it belongs in my controller as a result, so would like to avoid naming colors there if possible.
As I mentioned in the comment, Mustache can not solve this, however I found a mustache.js-specific way:
var template = '{{#people}}'
+' <div style="background-color: {{color}}"><span>{{name}}</span>: <span>{{title}}</span></div>'
+'{{/people}}'
var data = {
people: [
{name: 'a', title: 'b'},
{name: 'c', title: 'd'},
{name: 'e', title: 'f'},
{name: 'g', title: 'h'},
{name: 'i', title: 'j'},
],
color: function() {
return window.divcolor = window.divcolor == 'gray' ? 'white' : 'gray'
}
}
Mustache.to_html(template, data)