<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<script src="./OurScript.js" type="text/javascript"></script>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart1"></canvas>
<script type="text/javascript">//<![CDATA[
var x = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
datasets: [{
label: "Test",
data: [
{x:0,y:3},{x:1,y:4},{x:2,y:2},{x:3,y:5},{x:4,y:7},{x:5,y:5},{x:6,y:7},{x:7,y:8},{x:8,y:4},{x:9,y:4}
],
}]
},
options: {
responsive: true
}
});
//]]> </script>
</body>
</html>
Thats my Code which works fine. (I need to use XHTML)
My Problem is, I want to use a for Loop for the X and Y Values. But I dont know how to put the Array in data.
I tried something like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<script src="./OurScript.js" type="text/javascript"></script>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart1"></canvas>
<script type="text/javascript">//<![CDATA[
var xwerte = [0,1,2,3,4,5,6,7,8,9,10];
var ywerte = [3,4,2,5,7,5,7,8,4,4];
var c = [];
var Ergebnis1;
for(var i=0;i<ywerte.length;i++)
{
var obj ="{" + "x:" + xwerte[i] + "," + "y:" + ywerte[i] + "}";
c.push(obj);
}
// alert(c);
var x = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
datasets: [{
label: "Test",
data: [c],
}]
},
options: {
responsive: true
}
});
//]]> </script>
</body>
</html>
I tried with "alert" and I got the right result. But how should I put "c" in data?
I think I dont see a little (hopefully) mistake.
I need to use XHTML and just JavaScript.
On Snippet there is a error, but as I said, I am using XHTML and there is no Error.
Usually I set up my objects and arrays how I need them at first and then fill them with data.
Set it up:
var chartData = {
datasets: [{
label: 'Test',
data: []
}]
}
Fill it with data:
for (var i = 0; i < yWerte.length; i++) {
chartData.datasets[0].data.push(
{
x: xWerte[i], // You don't need "xWerte", you can simply use "i" when it's always the increment
y: yWerte[i]
}
)
}
You don't need your c to save your data, you can just use it like I did. But if you want c you can save the result of the for-loop in the empty array c and then use chartData.datasets[0].data = c.
Working example with live-preview: https://jsbin.com/copiwefaza/edit?js,output
Related
I would like to do the equivalent of the following Python in stand-alone BokehJS
color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)
How do I do it? Where are the color mappers located in the javascript CDN files?
They don't seem to be here, for example:
https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.7.js
and not here either:
https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.7.js
I am trying to follow examples like these:
https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example
Thanks in advance
After reading Bokeh docs and js source this seems to work with version 0.12.5
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
I did try to get some sane result in example below but without much success. Maybe you can improve this code further. This is based on python source from Updating color mapper in a bokeh plot with taptool
Try to click on button "Add some data!" many times, more then 10.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.5.min.js"></script>
<title> by bokeh</title>
</head>
<body>
<div>
<div id="myplot" />
</div>
<button onclick="addPoint()">Add some data!</button>
<script type='text/javascript'>//<![CDATA[
// arrays to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [Math.random() * 10.0], y: [Math.random() * 10.0], humidity: [0, 10.0] }
});
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300});
var pglyph = plot.patches({ field: "x" }, { field: "y" },
{ fill_color: { field: "humidity", transform: color_mapper}},
{ source: source, alpha: 1, line_width: 4})
var scatterData = plot.line({ field: "x" }, { field: "y" },
{ source: source, line_width: 10 });
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot, document.getElementById('myplot'));
function addPoint() {
// The data can be added, but generally all fields must be the
// same length.
source.data.x.push(Math.random() * 10.0);
source.data.y.push(Math.random() * 10.0);
// Also, the DataSource object must be notified when it has changed.
source.trigger('change');
}
//]]>
</script>
</body>
</html>
Models are located inside the main JS file (at least, for Bokeh 0.12.9): https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.js
You can get LogColorMapper in your code by using:
Bokeh.require('models/mappers/log_color_mapper').LogColorMapper
I'm trying to build a search input with the autocomplete feature. However, the suggestions depend on the input and are not static - which means that I have to retrieve the list every time the user types into the field. The suggestions are based on Google autosuggest: "http://google.com/complete/search?q=TERM&output=toolbar".
I'm currently using http://easyautocomplete.com.
This is my code:
var array = [];
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
$("#basics").on("keyup",function() {
var keyword = $(this).val();
array = [];
updateSuggestions(keyword);
});
function updateSuggestions(keyword) {
$.ajax({
type: "POST",
url: "{{ path('suggestKeywords') }}",
data: {keyword:keyword},
success: function(res){
var res = JSON.parse(res);
for(var i in res)
{
var suggestion = res[i][0];
array.push(suggestion);
console.log(suggestion);
}
}
});
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
}
I know this is not a very good way to do this - so do you have any suggestions as to how to do it?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
];
$("#automplete-1").autocomplete({
source: availableTutorials
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class="ui-widget">
<p>Type "a" or "s"</p>
<label for="automplete-1">Tags:</label>
<input id="automplete-1">
</div>
</body>
</html>
I have already gone through this link
Chart.js - Doughnut show tooltips always?
I have implemented the code in the same way on my machine but the chart is not appearing.
The following is my code:
HTML:
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="Chart.js"></script>
</head>
<body>
<div>
<canvas id="chart" width="200" height="200"/>
</div>
</body>
JS:
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870"
}
]
var options =
{
tooltipTemplate: "<%= value %>",
onAnimationComplete: function()
{
this.showTooltip(this.segments, true);
},
tooltipEvents: [],
showTooltips: true
}
var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);
Please can anybody help me out with this trouble?
Or you could forget about jquery leave the <head></head as was in the code you posted and substitute
var context = $('#chart').get(0).getContext('2d');
with
var context = document.getElementById("chart").getContext("2d");
You just have to include this line in your html file to include jquery
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
In the code above seems to miss the ref to jquery between <head></head> tags
I am trying to implement JQPLOT Bar chart but it's displaying only few bars ( two bars against tick 'e' with combo value '2 null 2') . Below is my code. Could you please suggest whats wrong here. I have added alert statement to display values in array and result is mentioned as comment:
<%# page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.json2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var DelayFeed = [[]];
var DelayConfirmation = [[]];
var CorruptFeed = [[]];
var FeedName = [[]];
var feedData = $.ajax({
url: "FeedServlet",
dataType : 'json',
async: false
}).responseText;
var arrayData = JSON.parse(feedData);
for (var i = 0; i < arrayData.length; i++) {
DelayFeed[0].push([ arrayData[i].DelayFeed ]);
DelayConfirmation[0].push([ arrayData[i].DelayConfirmation ]);
CorruptFeed[0].push([ arrayData[i].CorruptFeed ]);
FeedName[0].push([ arrayData[i].FeedName ]);
}
alert(DelayFeed[0]); //8,7,4,3,3
alert(DelayConfirmation[0]); //4,4,4,2,2
alert(CorruptFeed[0]); //4,4,4,2,2
$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]
, { seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'vertical'
},
pointLabels: { show:true }
},
series:[
{label:'Delay - Confirmation'},
{label:'Delay - Feed'},
{label:'Corrupt Feed'}
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['a', 'b', 'c', 'd', 'e'];
},
}
});
});
</script>
</head>
<body>
<div class="work-area">
<div id="chart_div" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
At a first look, it seems a problem with the format of data passed within $.jqplot() function.
In fact if you replace the three data arguments with these:
var DelayFeed = [8,7,4,3,3];
var DelayConfirmation = [4,4,4,2,2];
var CorruptFeed = [4,4,4,2,2];
$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]
you obtain the following (and correct) barchart
You need to use three simple arrays ( "[ ]" ) and not embedded arrays ( "[[ ]]" ).
Thus, i would try to use
$.jqplot('chart_div', [ DelayConfirmation[0], DelayFeed[0], CorruptFeed[0] ]
I want to update my cvs file through a mouse click on a graph, like I create a graph by reading a data from the same cvs file and when I get a graph what I want is that whenever I click on a point it make that point equal to zero on y-axis and update the corresponding value in a cvs file equal to 0.
Please can someone help. Here is my code which can take values from cvs file but is not updating but the same code works fine if I take hard coded series of an array.
Don't understand why isn't these plot options working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'},
title: { text: 'Output'},
xAxis: { categories: []},
yAxis: {
title: { text: 'Units'} },
plotOptions: {
series: { cursor: 'pointer',
point: {
events: { click: function() {
var y = this.item(y);
var x = this.x;
chart.series[0].data[x].update(y -= y);} } } },
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series); });
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can catch click point action http://api.highcharts.com/highcharts#plotOptions.series.point.events.click and then use get new value from csv by ajax and use update() function http://api.highcharts.com/highcharts#Point.update()