I am very new in rickshaw graphics, I have this graph
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
series: [{
name : "uno",
data : data1
},
{
name : "dos",
data : data2
},
{
name : "tres",
data :data3
}
]
});
But the data value of the charts appear one above the other, for example if
the three "y" values are 1, the first one appears in 1, the second in 2 and the third one in 3.
Im not sure what parameters I have to change in order that the three values appears in 1.
The problem was that i had to define the unstack value to true
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
unstack : true,
stroke: true,
series: [{
name : "uno",
data : data1
},
{
name : "dos",
data : data2
},
{
name : "tres",
data :data3
}
]
});
Related
I have a very simple sunburst chart with two levels of data :
var data = [{
type : "sunburst",
labels : ["A","B","B1","B2","C","C1","C2"],
ids : ["0","10000","100001","100003","20000","200001","200002"],
parents : ["","0","10000","10000","0","20000","20000"],
values : [16,11,10,1,5,3,2],
leaf : {
opacity: 0.4
},
marker : {
line: {
width: 5
}
},
branchvalues : 'total'
}];
var layout = {
margin : {
l: 0, r: 0, b: 0, t: 0
},
width : 200,
height : 200
};
Plotly.newPlot(
'sunburst-canvas',
data,
layout,
{
displaylogo: false
});
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<div id="sunburst-canvas"></div>
Is there a way to change the speed of the animation that the library performs when clicking on the inner slices (back and forth) ?
I am working on kendo chart. I am loading 30k data on the chart.
You can see in the code I have attached that, when I zoom in and out with mouse scroll, the process becomes very slow. Is it possible to reduce time of execution for each processes? And also first time loading of the chart is also very slow.
I want to know that is 30k data on Kendo chart should be loaded? Is there any limit that Kendo has set for data loading on the chart?
var Chartdata = [];
function createChart() {
$("#chart").kendoChart({
dataSource: {
data: Chartdata
},
series: [{
type: "scatterLine",
xField: "date",
yField: "close"
}, {
type: "scatterLine",
xField: "date",
yField: "volume"
}, {
type: "scatterLine",
xField: "date",
yField: "high"
}, {
type: "scatterLine",
xField: "date",
yField: "low"
}, {
type: "scatterLine",
xField: "date",
yField: "open"
}, {
type: "scatterLine",
xField: "date",
yField: "symbol"
}],
xAxis: {
name: "Date",
baseUnit: "minutes",
BaseUnitSteps: {
second: [1]
},
labels: {
visible: true,
step: 50,
font: "8px Arial,Helvetica,sans-serif",
template: "#= kendo.toString(new Date(value), 'MM/dd/yyyy HH:mm:ss') #"
},
majorUnit: 1,
majorTickType: "none",
majorGridLines: {
step: 5,
},
minorGridLines: {
visible: true,
step: 1,
},
minorTickType: "none",
majorTickType: "none",
},
yAxis: {
majorUnit: 25,
majorTickType: "none",
majorGridLines: {
step: 1,
},
minorGridLines: {
visible: true,
step: 1,
},
minorTickType: "none",
majorTickType: "none",
},
transitions: false,
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
},
zoom: setRange,
}).data("kendoChart");
}
function setRange(e) {
var chart = e.sender;
var options = chart.options;
e.originalEvent.preventDefault();
var xRange = e.axisRanges.Date;
if (xRange) {
var xMinonzoom = xRange.min;
var xMaxonzoom = xRange.max;
var dMaxonzoom = new Date(xMaxonzoom.getYear(), xMaxonzoom.getMonth(), xMaxonzoom.getDay(), xMaxonzoom.getHours(), xMaxonzoom.getMinutes(), xMaxonzoom.getSeconds());
var dMinonzoom = new Date(xMinonzoom.getYear(), xMinonzoom.getMonth(), xMinonzoom.getDay(), xMinonzoom.getHours(), xMinonzoom.getMinutes(), xMinonzoom.getSeconds());
var diff = dMaxonzoom - dMinonzoom;
if (xMaxonzoom - xMinonzoom < 10) {
return;
}
options.xAxis.min = xMinonzoom;
options.xAxis.max = xMaxonzoom;
chart.refresh();
}
}
$(document).ready(function() {
$.ajax({
type: "GET",
cache: true,
url: "https://api.myjson.com/bins/1uan0",
async: false
}).success(function(result) {
var dataresult = result;
$(dataresult).each(function(e, data) {
Chartdata.push({
"date": new Date(Date.parse(data.date)),
"close": data.close,
"volume": data.volume,
"high": data.high,
"low": data.low,
"open": data.open,
"symbol": data.symbol
});
});
createChart();
});
});
#chart circle {
display: none;
}
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://kendochart.webashlar.com/kendochart/Javascripts/kendo.all.min.js"></script>
<div id="chart"></div>
Thank you
I have created a dojo for you so hopefully this points you to the right direction.
Chart Dojo
All I have done is added in some simple filtering so that based on the min and max zoom you have selected for the grid it will only call those items into the datasource for you rather than the entire dataset.
This is achieved via this bit of code:
var datasource = chart.dataSource;
console.log("DataSource Total before Filtering is:: " + datasource.total());
datasource.filter();
datasource.filter([{field:"date", operator:"gte",value : xMinonzoom }, {field:"date", operator: "lte", value:xMaxonzoom}]);
console.log("DataSource Total after Filtering is:: " + datasource.total());
So this shows you the effect the filtering is having on the data source you are returning back.
If you wanted to speed things up further you could potentially look at grouping for larger data sets i.e. when you first load the grid up as the data to me at that point is just noise (in my opinion) and is not really meaningful to me (but it maybe in your use case).
Think how mapping works with instances zoomed out summarized as a number rather than trying to show all the individual data points until you start zooming in and seeing the data individually.
If you need more info then let me know and I will expand the answer/ provide more info if I can.
I receive an array json object. And now I don't know how I can process it in javascript code to series section data. I use this example of highchart column-rotated-labels. In this object has two columns AVG and other title, and length of this object might 20.
This is my codes:
$('#showresult').click(function() {
$.ajax({
url : "../../coursestatus",
type : "get",
data : {
major : $('#get').val(),
year : $('#yearlist').val(),
semester : $('#semester').val()
},
success : function(data) {
alert(data.length);
$(function () {
$('#container').highcharts({
chart: { type: 'column'
},
title: { text: 'World\'s largest cities per 2014' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
}
},
yAxis: { min: 0,
title: {
text: 'Population (millions)'
} },
legend: { enabled: false },
tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' },
series: [{ // I don't know how I can process data object to set that's elements to this
name: 'Population',
data: [
JSON.parse("[" + data + "]")
],
dataLabels: { enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: { fontSize: '13px',
fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black'
}
}
}]
});
});
And this object include this elements:
title columns includes course name and avg columns includes mark for that course.
And this is data is in data object:
[{"title":"Math","avg":20},{"title":"Network","avg":18},{"title":"Operating system","avg":16}]
And above data is has 3 length and it is simple, in fact this object maybe that's length is >10.
Thank u!
I founded similar problem in this page and I solved my problem.
Populate Highcharts with JSON data using jQuery
I am trying to fetch kendo data on selecting particular row using checkbox.
This is part of code of controller.js
$scope.campaignLabelOptions = {
dataSource: {
data: [] ,
},
sortable: true,
pageable : {pageSizes : [5, 10, 25, 50]},
filterable : true,
resizable :true,
reordable :true,
scrollable:true,
columnMenu: true,
selectable :true,
editable: {
confirmation: "Are you sure that you want to delete this record?",
mode: "popup"
},
columns : [
{template: "<input type='checkbox' class='checkbox' ng-click='onClick($event)'/>" },
{field : "campaign_name", title :"Campaign Name", width : "150px", attributes: {style: "font-size: 12px"}},
// {field : "time_line", title :"Timeline", width : "100px",attributes: {style: "font-size: 12px"} },
{field : "spend", title :"Spend", width : "90px",attributes: {style: "font-size: 12px"} },
{field : "campaign_group_status", title :"Status", width : "85px", attributes: {style: "font-size: 12px"}},
{field : "performance", title :"Performance", width : "130px", attributes: {style: "font-size: 12px"}},
// {field : "creation_time", title :"Created Time", width : "135px", attributes: {style: "font-size: 12px"}},
],
};
$scope.checkedIds = [];
$scope.showCheckboxes = function(){
var checked = [];
for(var i in $scope.checkedIds){
if($scope.checkedIds[i]){
checked.push(i);
}
}
alert(checked);
};
$scope.onClick = function(e){
console.log(e);
var element =$(e.currentTarget);
var checked = element.is(':checked');
var row = element.closest("tr");
var grid = element.closest('kendoGrid').getKendoGrid();
var dataItem = grid.dataItem(row);
$scope.checkedIds[dataItem.EmployeeID] = checked;
if (checked) {
row.addClass("k-state-selected");
} else {
row.removeClass("k-state-selected");
}
};
I have copied similar code from http://dojo.telerik.com/exAB/5 for select logic . But here grid variable is coming undefined. Its not getting getKendoGrid() method..
Is there any better way to get row data? If yes what and if not -- how to use this current code?
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.