flotr2 - change point color on click - javascript

Is it possible to change the fill color of a point (linear graph) in Flotr2 ?
my code:
<script>
/* globals*/
var lineColor = '#717171';
var baseLineColor = '#a3d06e';
var titleText = []; /* [title1, title2,...] */
var xticks = []; /* [ [0.9, ""], [1, "strValue1"], ..., [n, strValueN], [n+0.1, ""] ] */
var title = document.getElementById('title');
var data = [ /* the chart data */
[1, 2],
[2, 3],
[3, 3],
[4, 4],
[5, 5],
[6, 5],
[7, 5],
[8, 2],
[9, 3],
[10, 3],
[11, 4],
[12, 5],
[13, 5],
[14, 5],
[15, 5],
[16, 2],
[17, 3],
[18, 3],
[19, 4],
[20, 5],
[21, 5],
[22, 5],
[23, 2],
[24, 3],
[25, 3],
[26, 4],
[27, 5],
[28, 5],
[29, 5],
[30, 5],
];
var container = document.getElementById('chart');
/*Test - remove for real data*/
for(var i=1; i<31; i++){
xticks.push([i, ("label " + i)]);
titleText[i] = "Title " + i;
}
/* chart options */
var personal = { data : data, /* #data# */
lines : { show : true, fill : false, color: lineColor, lineWidth: 4},
points : { show : true, color: lineColor, radius: 20, fillColor:'#ff0000'}
};
var baseline = { data: [[-50,3],[50,3]],
mouse: {track: false},
lines : { show : true, fill : false, color: baseLineColor, lineWidth: 4}
}
setTimeout(setDimentions, 300);
function setDimentions(){
var w = window.innerWidth * 0.8;
var h = window.innerWidth * 0.45;
container.style.width = w + "px";
container.style.height = h + "px";
drawChart();
}
function drawChart(){
var f = Flotr.draw(container, [baseline, personal],
{
resolution: 2, HtmlText: true,
xaxis : { ticks: xticks /* #xticks# */, tickDecimals: true, min:0.8, max: (data.length+0.2)/*#xmax#*/ },
yaxis : { ticks: [1,2,3,4,5], tickDecimals: true, min:0.9, max: 5.1 },
mouse : { track : true, sensibility: 10, trackFormatter: showTitle}
});
}
function showTitle(point){
title.innerHTML = titleText[parseInt(point.x)];
}


It should be enough to use the following options:
mouse : {
track : true,
relative : true,
lineColor : '#FF00FF',
fillColor : '#0000FF'
},
I put a demo here:
http://jsfiddle.net/93by5/1/

Related

Highcharts and boost with multiple charts

So I have two charts on the same page and I am using boost for both of these graphs. I wish to allow zooming and if I do a zoom then the line chart disappears. The data appears to still be there as the mouse over shows the data.
See this fiddle:
https://jsfiddle.net/CaptainBli/wa7o2bL8/3/
function getData(n) {
var arr = [],
i,
x,
a,
b,
c,
spike;
for (
i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5;
i < n;
i = i + 1, x = x + 36e5
) {
if (i % 100 === 0) {
a = 2 * Math.random();
}
if (i % 1000 === 0) {
b = 2 * Math.random();
}
if (i % 10000 === 0) {
c = 2 * Math.random();
}
if (i % 50000 === 0) {
spike = 10;
} else {
spike = 0;
}
arr.push([
x,
2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
]);
}
return arr;
}
var n = 500000,
data = getData(n);
console.time('line');
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Highcharts drawing ' + n + ' points'
},
subtitle: {
text: 'Using the Boost module'
},
tooltip: {
valueDecimals: 2
},
xAxis: {
type: 'datetime'
},
series: [{
data: data,
lineWidth: 0.5,
name: 'Hourly data points'
}]
});
console.timeEnd('line');
Highcharts.chart('heatcont', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
boostThreshold: 1,
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});

Highcharts - Synchronized heat maps

Let's say we have two high charts - heat maps (can be more in future). Check it like below jsfiddle.
http://jsfiddle.net/xzq5bzy5/1/
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<div id="container2" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
What I want if I hover on first cell of first high charts. It should simultaneously hover the second high chart first cell and both should show data in their respective tool-tips.
I have tried to search but I didn't find anything. Let me know if I need to add anymore information.

Here is a basic example using synchronised-charts highchars demo:
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
for (var i = 0; i < 2; ++i) {
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales for Feb'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 1, 58],
[1, 2, 78],
[1, 3, 117],
[1, 4, 48],
[2, 0, 35],
[2, 1, 15],
[2, 2, 123],
[2, 3, 64],
[2, 4, 52],
[3, 0, 72],
[3, 1, 132],
[3, 2, 114],
[3, 3, 19],
[3, 4, 16],
[4, 0, 38],
[4, 1, 5],
[4, 2, 8],
[4, 3, 117],
[4, 4, 115],
[5, 0, 88],
[5, 1, 32],
[5, 2, 12],
[5, 3, 6],
[5, 4, 120],
[6, 0, 13],
[6, 1, 44],
[6, 2, 88],
[6, 3, 98],
[6, 4, 96],
[7, 0, 31],
[7, 1, 1],
[7, 2, 82],
[7, 3, 32],
[7, 4, 30],
[8, 0, 85],
[8, 1, 97],
[8, 2, 123],
[8, 3, 64],
[8, 4, 84],
[9, 0, 47],
[9, 1, 114],
[9, 2, 31],
[9, 3, 48],
[9, 4, 91]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
})
}
Live example:
http://jsfiddle.net/atkf70cv/

Retrieve Data in mvc View

I currently have this script in MVC view
<script type="text/javascript">
$(document).ready(function () {
$(".bar_dashboard").peity("bar", {
fill: ["#1ab394", "#d7d7d7"],
width: 100
})
$("#sparkline8").sparkline([5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14, 4, 2, 14, 12, 7], {
type: 'bar',
barWidth: 8,
height: '150px',
barColor: '#1ab394',
negBarColor: '#c6c6c6'
});
var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394', stroke: '#169c81', width: 64 })
setInterval(function () {
var random = Math.round(Math.random() * 10)
var values = updatingChart.text().split(",")
values.shift()
values.push(random)
updatingChart
.text(values.join(","))
.change()
}, 1000);
var data1 = [
[0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
];
var data2 = [
[0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
];
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data1, data2
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 0,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxis: {
},
yaxis: {
ticks: 4
},
tooltip: false
}
);
var doughnutData = [
{
value: 300,
color: "#a3e1d4",
highlight: "#1ab394",
label: "App"
},
{
value: 50,
color: "#dedede",
highlight: "#1ab394",
label: "Software"
},
{
value: 100,
color: "#b5b8cf",
highlight: "#1ab394",
label: "Laptop"
}
];
var doughnutOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 45, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
var polarData = [
{
value: 300,
color: "#a3e1d4",
highlight: "#1ab394",
label: "App"
},
{
value: 140,
color: "#dedede",
highlight: "#1ab394",
label: "Software"
},
{
value: 200,
color: "#b5b8cf",
highlight: "#1ab394",
label: "Laptop"
}
];
var polarOptions = {
scaleShowLabelBackdrop: true,
scaleBackdropColor: "rgba(255,255,255,0.75)",
scaleBeginAtZero: true,
scaleBackdropPaddingY: 1,
scaleBackdropPaddingX: 1,
scaleShowLine: true,
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
};
var ctx = document.getElementById("polarChart").getContext("2d");
var Polarchart = new Chart(ctx).PolarArea(polarData, polarOptions);
});
</script>
I want to change
var data1 = [
[0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
];
var data2 = [
[0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
];
to read dynamic data from my Controller using JSON how can I do that?

You need a method in your controller which provides you the information you want.
public String getData(){
int[,] ints = new int[,] { {1,1},{2,2},{3,3} };
var json = Newtonsoft.Json.JsonConvert.SerializeObject(ints);
}
In your view you can get it like this:
$.get("/Controller/getData", null, function (data) {
thisismydata = data;
});
If you want to do this async take a look at $.ajax(). You can find more information here.

Google Charts with 3 columns

I want to create a google chart which has 3 columns. Also I want to add 2 sets to data to it. Please refer to the JS code for understanding.
Also you can check https://jsfiddle.net/dt6syt2w/2/
I'm looking forward to getting some solution from user : asgallant
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines()
{
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Peak Value 1');
data1.addRows([
[0, 0, 0], [1, 10, 15], [2, 23, 25], [3, 17, 26], [4, 18, 30], [5, 9, 20],
[6, 11, 25], [7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Normal Value 2');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1], [2, 20, 25], [3, 25, 30], [4, 23, 35], [5, 28, 36], [6, 19, 40], [7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0, 0]], [1], [1], [1]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}

Just have to fix up your join() call:
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1, 2], [1, 2]);
The [[0, 0]] compares keys at column position 0 for each datatable passed in. The [1, 2] supplied to the next arguments join the columns at position 1 and 2 in each data table. Since the columns named Normal Value 1, Peak Value 1, Normal Value 2, and Peak Value 2 are at those positions, the data comes from there.
google.load('visualization', '1', {
packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Normal Value 2');
data1.addRows([
[0, 0, 0],
[1, 10, 15],
[2, 23, 25],
[3, 17, 26],
[4, 18, 30],
[5, 9, 20],
[6, 11, 25],
[7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Peak Value 1');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1],
[2, 20, 25],
[3, 25, 30],
[4, 23, 35],
[5, 28, 36],
[6, 19, 40],
[7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [
[0, 0]
], [1, 2], [1, 2]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div">
<div>

Get Highest and lowest value from array [duplicate]

This question already has an answer here:
What is the most efficient way to get the highest and the lowest values in a Array
(1 answer)
Closed 9 years ago.
I have this array:
var data = [{
// series 1
data: [ [1, 30], [2, 40],[3, 38], [4, 39], [5, 42] ],
color: '#8bc12c',
points: { radius: 4, fillColor: '#8bc12c' }
},
{
// series 2
data: [ [1, 30], [2, 40],[3, 38], [4, 39], [5, 42] ],
color: '#858585',
points: { radius: 4, fillColor: '#858585' }
},
{
// series 3
data: [ [1, 30], [2, 40],[3, 38], [4, 39], [5, 42] ],
color: '#e88278',
points: { radius: 4, fillColor: '#e88278' }
},
{
// series 4
data: [ [1, 50], [2, 60],[3, 58], [4, 59], [5, 62] ],
color: '#5a5a5a',
points: { radius: 4, fillColor: '#5a5a5a' }
}
];
I would like to get the data contains another array of data which has [x,y] values. How do I get the highest y value out of this array? Which in this case would be 62

Try this -
var max = 0 ;
$.each(data,function(){
$.each(this.data,function(i,v){
if(v[1] > max){
max = v[1];
}
})
})
console.log("max : " + max);

The ultimate one-liner:
console.log(Math.max.apply(null, data.map(function(o) {
return Math.max.apply(null, o.data.map(function(o) {
return o[1];
}));
})));

Categories

Resources