So I'm trying to create a plot with BokehJS. This plot needs 3 axes (left, right, bottom):
The plot looks like this
As you can see, the right y-axis is pretty ugly, you can't read any data from towards the bottom as the tickers are bunched up.
This is how im creating my plot and lines
function zip(arr1, arr2, floatCast){
var out = {};
if (floatCast){
arr1.map( (val,idx)=>{ out[parseFloat(val)] = arr2[idx]; } );
}
else{
arr1.map( (val,idx)=>{ out[val] = arr2[idx]; } );
}
return out;
}
function createBokehPlot(PNVibe, staticPN, transX, transY){
//empty the previous plot
$( "#graph-div" ).empty();
//Data Source for PN under vibration vs. offset frequency
const source = new Bokeh.ColumnDataSource({
data: { x: Object.keys(PNVibe), y: Object.values(PNVibe) }
});
//Data source for Static PN vs offset frequency
const source1 = new Bokeh.ColumnDataSource({
data: { x: Object.keys(staticPN), y: Object.values(staticPN) }
});
//Data source for Transmissibility line
const source2 = new Bokeh.ColumnDataSource({
data: { x: transX, y: transY}
});
//Set plot x/y ranges
var max_offset = Math.max(Object.keys(PNVibe));
const xdr = new Bokeh.Range1d({ start: 1, end: 100000 });
const ydr = new Bokeh.Range1d({ start: -180, end: -50 });
const y2_range = new Bokeh.Range1d({start: 0.001, end: 10});
// make a plot with some tools
const plot = Bokeh.Plotting.figure({
title: 'Example of random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
toolbar_location: "right",
toolbar_sticky: false,
height: 600,
width: 700,
outerWidth: 800,
legend_location: "top_left",
x_range: xdr,
y_range: ydr,
x_axis_type:"log",
x_axis_label: "Offset Frequency (Hz)",
y_axis_type: "linear",
y_axis_label: "Phase Noise (dBc/Hz)",
extra_y_ranges: {y2_range},
major_label_standoff: 1
});
//Add the second y axis on the right
const second_y_axis = new Bokeh.LogAxis({y_range_name:"y2_range", axis_label:'Vibration Profile (g^2/Hz)', x_range: xdr, bounds:[0.0001, 10]});
second_y_axis.ticker = new Bokeh.FixedTicker({ticks: [0.0001, 0.001, 0.01, 0.1, 1, 10]})
plot.add_layout(second_y_axis, "right");
// add line for vibraiton phase noise
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2,
line_color: "red",
legend_label: "Phase Noise under Vibrations"
});
//add line for static phase noise
plot.line({ field: "x" }, { field: "y" }, {
source: source1,
line_width: 2,
line_color: "blue",
legend_label: "Static Phase Noise"
});
plot.line({ field: "x" }, { field: "y" }, {
source: source2,
line_width: 2,
line_color: "green",
y_range_name:"y2_range",
legend_label: "Transmissibillity"
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot, "#graph-div");
return;
}
//Call function
var PNVibe = zip([10, 100, 1000], [-95, -100, -105], false);
var staticPN = zip([10, 100, 1000], [-90, -105, -110], false);
var transX = [10, 100, 1000];
var transY = [0.0005, 0.003, 0.05];
createBokehPlot(PNVibe, staticPN, transX, transY);
My question is, how would I be able to make it so that the right y-axis displays better? Preferably I want each tick to be the same distance from each other (ie. space between 10^0 and 10^1 is the same as space between 10^1 and 10^2)
Thanks
I also posted this on the bokeh forums:Here
Fixed my problem:
I believe I may have had some invalid javascript in my original code which is why it wasnt correctly rendering. After hours of messing around with whatever I could think of, it's fixed.
//Define range for y2
const y2_range = new Bokeh.Range1d({start: 0.0001, end: 10}); //Cannot use //array for this
// make a plot with some tools
const plot = Bokeh.Plotting.figure({
title: 'Example of random data',
tools: "pan,wheel_zoom,box_zoom,reset,save,hover",
toolbar_location: "right",
toolbar_sticky: false,
height: 600,
width: 700,
outerWidth: 800,
legend_location: "top_left",
x_range: [1, 1000000],
y_range: [-180, -70],
x_axis_type:"log",
x_axis_label: "Offset Frequency (Hz)",
y_axis_label: "Phase Noise (dBc/Hz)",
extra_y_ranges: {"y2_range": y2_range}, //This was incorrect
extra_y_scales: {"y2_range": new Bokeh.LogScale()}, //This was incorrect
major_label_standoff: 5,
});
//Add the second y axis on the right
const second_y_axis = new Bokeh.LogAxis({
y_range_name:"y2_range",
axis_label:'Vibration Profile (g^2/Hz)',
x_range: [1, 1000000],
bounds:[0.0001, 10],
});
plot.add_layout(second_y_axis, "right");
i want to make a chart with data from an array. But couldn't figure out why isn't any data showing up in my chart.
Can you guys help me to solve this problem?
var dataset = [];
$(data.items).each(function (index, item)
{
dataset.push(item.SQA);
});
console.log("5. item: " + dataset[5]);
console.log("array items: " + dataset);
var chart = new CanvasJS.Chart("wrapper_dia", {
animationEnabled: true,
theme: "light2",
title:{
text: "Simple Line Chart"
},
data: [{
type: "line",
indexLabelFontSize: 16,
dataPoints: dataset
}]
});
chart.render();
You can loop through the array and parsing it to the format accepted by CanvasJS before passing to the chart options. Check the below code snippet for the same.
var dps = [];
function parseDataPoints () {
for (var i = 0; i <= dataArray.length; i++)
dps.push({y: dataArray[i]});
};
parseDataPoints();
chart.options.data[0].dataPoints = dps;
chart.render();
Check out this JSFiddle for an example on the same.
I am trying to display the percentage of pets per owner in a pie chart, how do i push data to the piechart? the for loop keeps getting a SyntaxError: Unexpected token var. here's my code.
window.onload = function() {
var count = "<?php echo($i)?>";
var name = [];
var per = [];
var j = -1;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "TB_PET"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
Error here-->for(var i = 0; i < count; i++){
name[i] = document.getElementById(i).value;
per[j] = document.getElementById(j).value;
dataPoints: [
{y: per[j], label: name[i]}
]
j--;
}
}]
});
chart.render();
}
You cannot iterate inside the object literal (configuration for the chart) that is passed as a parameter to a function call.
Iterate over you data prior to the new CanvasJS.Chart(...) call, and pass the variable as part of the config object.
Iterate here
var dataPoints = [];
for(...){
dataPoints.push(..);
]
then pass dataPoints in as below
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "TB_PET"
},
data: [
{
type: "pie",
startAngle: 240,
yValueFormatString: '##0.00"%"',
indexLabel: "{label} {y}",
dataPoints: dataPoints
}
]
});
chart.render();
Note: This would be a comment if my rep was higher
I'm not familiar with php returns, but I would first start with manually changing the 'count' variable to be an actual number before moving forward. It appears that your for loop is evaluating the 'count' variable as a string and then throwing the error you're seeing.
https://airbrake.io/blog/javascript-error-handling/unexpected-token
I am making pie chart from high chart library. I want to change color of each slice in pie chart
How can i do this ? My code is -
var colors = ["color:'#2a8482'","color:'#64DECF'","color:'#BCCDF8'"];
var responseData = {"2":40,"1":30}
var obj = $.parseJSON(responseData);
var dataArrayFinal = Array();
var value = Array();
var name = Array();
var j = 0;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
name[j] = "name:'"+key+"'";
value[j] = obj[key];
j++;
}
}
for(k=0;k<name.length;k++) {
var temp = new Array(name[k],value[k],colors[k]);
dataArrayFinal[k] = temp;
}
$(function () {
new Highcharts.Chart({
chart: {
renderTo: 'container'+counter,
type: 'pie',
height: 280,
width: 280
},
title: {
text: ' '
},
tooltip: {
valueSuffix: '%',
positioner: function () {
return {
x: this.chart.series[0].center[0] -
(this.label.width / 2) + 8,
y: this.chart.series[0].center[1] -
(this.label.height / 2) + 8
};
}
},
series: [{
name: 'Answer',
size: '100%',
innerSize: '65%',
data: dataArrayFinal
}]
});
});
In this graph is coming but colors are not changed. They are taking default color.
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
It should work that way ;-)
if you change your color-array to:
var colors = ["#2a8482","#64DECF","#BCCDF8"];
and then at the beginning of your function:
$(function () {
add the following code:
Highcharts.getOptions().plotOptions.pie.colors = colors;
this should do the trick.
Example of coloring can be found in this JSFiddle, created by the developers of HighCharts:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-monochrome/
I have two charts, they are being created by javascript the same exact way, one of them shows the values on x axis properly, the other doesn't.
So this is the traffic chart
As you can see the dates are shown properly under x axis, here is the code that generates this chart
function drawTrafficChart(processedData, humanReadableName, params) {
dataArray = [];
dataArrayRow = ['Date', 'Impressions', 'Detail Page Views'];
dataArray.push(dataArrayRow);
for (i in processedData) {
dateString = processedData[i].date;
dateString = formatDateStringAccordingToAggregationType(dateString, params);
dataArrayRow = [dateString, processedData[i].event1, processedData[i].event2];
dataArray.push(dataArrayRow);
}
var dataTable = google.visualization.arrayToDataTable(dataArray);
var chartOptions = {
title: 'Traffic Chart',
hAxis: {title: humanReadableName},
vAxis: {minValuex: 0},
pointSize: 5,
width: 670,
height: 300
};
var chart = new google.visualization.LineChart(document.getElementById('traffic_chart'));
chart.draw(dataTable, chartOptions);
}
And this is the click chart
Here is the code that generates click chart
function drawClickChart(processedData, humanReadableName, params) {
dataArray = [];
dataArrayRow = ['Date', 'Website Clicks', 'Image Clicks', 'Video Clicks'];
dataArray.push(dataArrayRow);
for (i in processedData) {
dateString = processedData[i].date;
dateString = formatDateStringAccordingToAggregationType(dateString, params);
dataArrayRow = [dateString, processedData[i].event3, processedData[i].event4, processedData[i].event5];
dataArray.push(dataArrayRow);
}
var dataTable = google.visualization.arrayToDataTable(dataArray);
var chartOptions = {
title: 'Click Chart',
hAxis: {title: humanReadableName},
vAxis: {minValuex: 0},
pointSize: 5,
width: 670,
height: 300
};
var chart = new google.visualization.LineChart(document.getElementById('click_chart'));
chart.draw(dataTable, chartOptions);
}
As you can see the dates on x axis are messed up, is there something I could do to fix this?