I'm trying out smoothies charts
This is the json output from my server:
{"time": "1332216212", "in": "4.52", "out": "4.85"}
Here is the code that renders the chart:
<script type="text/javascript">
var dataSet1 = new TimeSeries(), dataSet2 = new TimeSeries();
setInterval(function() {
$.getJSON("/stats",function(data){
var now = new Date().getTime();
dataSet1.append(data.time, data.in);
dataSet2.append(data.time, data.out);
});
}, 1000);
var smoothie = new SmoothieChart({ minValue: 0.0, maxValue: 1.0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 4 }});
smoothie.addTimeSeries(dataSet1, { strokeStyle: 'rgba(255, 0, 0, 1)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 3 });
smoothie.addTimeSeries(dataSet2, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 3 });
smoothie.addTimeSeries(dataSet3, { strokeStyle: 'rgba(0, 0, 255, 1)', fillStyle: 'rgba(0, 0, 255, 0.2)', lineWidth: 3 });
smoothie.streamTo(document.getElementById('chart'), 1000);
</script>
Json data bandwidth stats. With the above code the graph doesn't get rendered. But the data gets fetched from the server according to web server logs. I'm using jquery1.3.2. Have I got anything wrong?
Try replacing 'data.time' in the append() function for each dataSet with your 'var now' you created. From my usage with Smoothie, it really wants the client-side (browser) to deal with the time for the graphing, rather than a value coming in off a server. If you need time information from an external source, then I'd suggest looking into Flot, because that will provide you with more functionality. Smoothie is very basic; it just wants data to plot on a real-time timeline.
Related
I have attached my code below which I have been using to try and generate a clickable heatmap. The actual heatmap is generated but I cannot produce a click event.
Here is my code:
const centerLocation = new google.maps.LatLng(
Number(28.555040),
Number(77.241920)
);
const mapProp = {
center: centerLocation,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
clickableIcons: true
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
const location = new google.maps.LatLng(
Number(28.555040),
Number(77.241920)
);
for (let i = 0; i < userData.length; i++) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(+userData[i][1], +userData[i][2]),
map: this.map,
icon: this.userimage,
title: userData[i][0]
});
// tslint:disable-next-line:no-shadowed-variable
google.maps.event.addListener(this.marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('' + userData[i][0] + '');
infowindow.open(this.map, this);
};
})(this.marker, i));
}
const infowindow = new google.maps.InfoWindow();
for (let i = 0; i < eventData.length; i++) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(+eventData[i][1], +eventData[i][2]),
map: this.map,
icon: this.image,
title: eventData[i][0]
});
// tslint:disable-next-line:no-shadowed-variable
google.maps.event.addListener(this.marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('' + eventData[i][0] + '');
infowindow.open(this.map, this);
};
})(this.marker, i));
}
// console.warn(location);
this.marker.setPosition(location);
this.heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
dissipating: true,
radius: 50
});
this.heatmap.setMap(this.map);
// For heatmap color
const gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
];
this.heatmap.set('gradient', gradient);
// For heatmap color
this.heatmap.set('opacity', 0.6);
If by 'clickable' you mean interactive you may want to look at complexheatmaps which offer that specific utility. The supporting documentation can be found here. An example of what level of interactivity is possible can be found on this page.
Use one of the following to download the package...
Most Recent (you must use force = TRUE):
library(devtools)
install_github("jokergoo/ComplexHeatmap", force = TRUE)
library(ComplexHeatmap)
Stable:
if (!requireNamespace("BiocManager", quietly = TRUE))
install.packages("BiocManager")
BiocManager::install("ComplexHeatmap", version = "3.8")
Alternatively, you may want to look at using iheatmapr, though I know very little about it. As it is designed with interactivity as a forethough it may be of use to you. Here is how it was described in the Journal of Open Source Software.
There are great tools in R for creating simple interactive heatmaps
(Galili 2016, Cheng and Galili (2016)) or creating static complex
heatmaps (Gu, Eils, and Schlesner 2016). However, there are no tools
facilitating the creation of complex, interactive heatmaps.
Theiheatmapr package fills this gap, enabling the creation of highly
customizable, interactive, complex heatmaps using the plot library
(Sievert et al. 2016). The resulting interactive visualizations can
easily be incorporated into reproducible R Markdown reports for sharing
with collaborators
I'm trying to load the chart.js line chart in my asp.net view but the view is showing only json data.
The page not even displaying the layout page, just displaying the json data returned from the controller.
Below is my view and the controller and json returned.
my view
#{
ViewBag.Title = "LoadLineChart";
}
<h2>LoadLineChart</h2>
<div>
<label>Multi Bar Chart</label>
<canvas id="LineChart" width="400" height="150"></canvas>
</div>
<script src="~/Scripts/Chart.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "/Home/LoadLineChart",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var c = document.getElementById("LineChart");
var ctx = c.getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'line',
data: data
});
},
error: function () {
alert('some thing wrong try again...')
}
});
});
</script>
my controller
public JsonResult LoadLineChart()
{
string[] chartcolors = {
"rgb(255, 99, 132)",//red
"rgb(54, 162, 235)",//blue
"rgb(153, 102, 255)",//purple
"rgb(255, 159, 64)",//orange
"rgb(255, 205, 86)",//yellow
"rgb(75, 192, 192)",//green
"rgb(231,233,237)"//grey
};
ChartData cd = new ChartData();
DataTable dat = cd.GetSIMCardData();
Chart _chart = new Chart();
_chart.labels = dat.AsEnumerable().Select(r => r.Field<string>("month") + "-" + r.Field<string>("year")).ToArray();
_chart.datasets = new List<Datasets>();
List<Datasets> _dataSet = new List<Datasets>();
for (int i = 0; i < 4; i++)
{
var bgcolor = Enumerable.Repeat(chartcolors[i], dat.Rows.Count).ToArray();
_dataSet.Add(new Datasets()
{
label = dat.Columns[i].ColumnName,
data = dat.AsEnumerable().Select(r => r.Field<int>(dat.Columns[i])).ToArray(),
backgroundColor = bgcolor,
borderColor = bgcolor,
borderWidth = "1"
});
_chart.datasets = _dataSet;
}
return Json(_chart, JsonRequestBehavior.AllowGet);
}
//json data displaying in the view
{"labels":["November-2016","December-2016","January-2017","February-
2017","March-2017","April-2017","May-2017","June-2017","July-2017","August-
2017","September-2017","October-2017"],
"datasets":[{"label":"NormalSim",
"backgroundColor":["rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255, 99,
132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255,
99, 132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255, 99,
132)","rgb(255, 99, 132)","rgb(255, 99, 132)"],"borderColor":["rgb(255, 99,
132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255,
99, 132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255, 99,
132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255, 99, 132)","rgb(255,
99, 132)"],
"borderWidth":"1",
"data": [10702400,10456635,10236438,10037215,10051764,9877641,9642252,
9519984,9360297, 9337899,9229813,9202321]}]}
I'm creating a pie chart inside my Dashboard page. First, i've been created a bar chart and everything works properly, but now, while i'm creating a pie chart my tooltip doesn't works as expected.
My code:
<canvas id="pie-chart" height="213"></canvas>
<!-- ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script>
var ctx2 = document.getElementById('pie-chart').getContext('2d');
var green_darkgreen_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
green_darkgreen_gradient.addColorStop(0, '#16D99B');
green_darkgreen_gradient.addColorStop(1, '#22A77C');
var red_darkred_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
red_darkred_gradient.addColorStop(0, '#F22626');
red_darkred_gradient.addColorStop(1, '#BE1111');
var yellow_darkyellow_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
yellow_darkyellow_gradient.addColorStop(0, '#DFD337');
yellow_darkyellow_gradient.addColorStop(1, '#C5B929');
var pieChart = new Chart(ctx2,{
type: 'pie',
data: {
labels: ['Aberto', 'Fechado', 'Transferido'],
datasets: [{
data: [7, 10, 15],
backgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBackgroundColor:[green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBackgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBorderWidth: 0,
hoverBorderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
borderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient]
}]
},
options: {
legend: {
display: false,
labels: {
fontColor: "#000",
fontSize: 18
}
},
tooltips: {
backgroundColor: '#000',
titleFontSize: 16,
ttitleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
},
backgroundColor: '#000',
titleFontSize: 16,
titleFontColor: '#ddd',
bodyFontColor: '#ddd',
bodyFontSize: 14,
displayColors: false
}
});
See results with a bar chart (same code basically):
Bar chart with tooltip
See results with a pie chart:
Pie chart with tooltip
All you need to do is just set tooltips bodyFontColor value to white (#FFfFFF)
....
tooltips: {
backgroundColor: '#000',
bodyFontColor: '#FFFFFF',
bodyFontSize: 14,
displayColors: false
}
...
Here is fiddle link to see result : https://jsfiddle.net/xf7nx5nc/
I need to plot a specific values in a different locations ,these values i represents it as weights and send it with latlng coordinates . I need to know how Google calculate the color to modify my results ,such as i specify a color to each value or know how can i make google choose the desired color for my value?. can any one help me , please ?
var gradient3 = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
function initialize() {
//set some map options
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//get a reference to the map area
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
patdata = [];
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(",");
patdata.push({
location: new google.maps.LatLng(args[0], args[1]),
weight: args[2]
});
}
heatmap = new google.maps.visualization.HeatmapLayer({
data: patdata
});
heatmap.setOptions({
//apply the gradient
gradient: heatmap.get('gradient') ? null : gradient3,
// set other options
maxIntensity: 25, //The maximum intensity of the heatmap
opacity: 0.8, //The opacity of the heatmap
radius: 8, //The radius of influence for each data point, in pixels.
//dissipating: true //Specifies whether heatmaps dissipate on zoom
});
heatmap.setMap(map);
I was wondering if it would be possible to animate the heat map I've set up for my Google Map. It was easy enough to set up the google map and add the heat map to it. But it looks quite boring. I wanted to add somekind of a pulse effect to the heat map.
Thanks
It's straightforward to animate the heatmap's appearance. The following example sets a custom array of gradient colors and modulates its size. The result is sort of a pulsing effect. You may tweak the colors to your liking in the modulateGradient function or even add changes to the heatmap's opacity. Note, however, that depending on the size of your data set the animation might have a considerable performance impact.
HTML
<div id="map-canvas"></div>
JS
var map, pointarray, heatmap;
var gradient, gradientStep = -1;
var taxiData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
new google.maps.LatLng(37.783100, -122.441461),
new google.maps.LatLng(37.783206, -122.440829),
new google.maps.LatLng(37.783273, -122.440324),
new google.maps.LatLng(37.783316, -122.440023),
new google.maps.LatLng(37.783357, -122.439794),
new google.maps.LatLng(37.783371, -122.439687)
];
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
setGradient();
google.maps.event.addListenerOnce(map, 'tilesloaded', modulateGradient);
}
function setGradient() {
gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
];
heatmap.set('gradient', gradient);
}
function modulateGradient() {
var modulator = function() {
var newGradient = gradient.slice(0, heatmap.get('gradient').length + gradientStep);
if (newGradient.length == gradient.length || newGradient.length == 7) {
gradientStep *= -1;
}
heatmap.set('gradient', newGradient);
setTimeout(modulator, 100);
};
setTimeout(modulator, 100);
}
google.maps.event.addDomListener(window, 'load', initialize);
You can find a live version of the code on JSFiddle.
You can create a kind of pulsing effect by changing the radius size of the heat map layer.
First let's make a var smallRadius and var bigRadius and set values to them; e.g. smallRadius = 40; bigRadius = 80;
then add the radius size to your var mapOptions and set it to smallRadius.
Then create an animateRadius() function which changes the radius value from smallRadius to bigRadius if it is set to smallRadius, else set the radius to smallRadius.
Then set the function to run every second or so by surrounding the function in a setInterval().
So Basically this:
var smallRadius = 40;
var bigRadius = 80;
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
radius: smallRadius
};
//animate radius function
setInterval(function animateRadius()
{
if (heatMap.get('radius') === smallRadius)
{
heatMap.set('radius', bigRadius);
}
else
{
heatMap.set('radius', smallRadius);
}
}, 1000); // changes radius every 1 second
Obviously you can change the smallRadius and bigRadius to whatever values you want.