Having trouble binding new data to a D3 BubbleChart. My AJAX call to the API is getting a good JSON reply. I checked the reply and it is getting data in the same format as defined in the hardcoded data used to initially setup the chart. I must be missing something because my chart does not show the new data. Do I need to redraw the chart? Here is the code:
$(document).ready(function () {
var uri = 'api/testing';
$.getJSON(uri, function (data, error) {
//DATA BIND/START - NOT UPDATING CHART
d3.selectAll("bubbleChart")
.data(data)
.enter().append("bubbleChart")
.attr("text", function (d) { return d.text; })
.attr("count", function (d) { return d.count; });
//DAT BIND/END
});
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
size: 600,
innerRadius: 600 / 3.5,
radiusMin: 50,
data: {
items: [
{ text: "aaa", count: "236" },
{ text: "bbb", count: "382" },
{ text: "ccc", count: "170" },
{ text: "ddd", count: "123" },
{ text: kk, count: ll}
],
eval: function (item) { return item.count; },
classed: function (item) { return item.text.split(" ").join(""); }
},
plugins: [
{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
"fill": "white"
},
attr: { dy: "65px" },
centralClick: function () {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: { count: true },
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) { return d.cx; },
y: function (d) { return d.cy; }
}
},
{// Line #1
textField: "text",
classed: { text: true },
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) { return d.cx; },
y: function (d) { return d.cy; }
}
}
],
centralFormat: [
{// Line #0
style: { "font-size": "50px" },
attr: {}
},
{// Line #1
style: { "font-size": "30px" },
attr: { dy: "40px" }
}
]
}
}]
});
});
function formatItem(item)
{
return 'text:' + item.text + ', count:' + item.count;
}
Related
I hope everyone's fine
I'm trying to make the show-select feature work on Vuetify 2.0.x datatables with SSR pagination, with no luck at all.
We were working on vuetify 1.5.x up until now and we changed since it was troubling in there too.
Here's a codepen
I'm just using show-select docs are not further specific
You have missed item-key="unique column name" in v-data-table
here is the codepen
https://codepen.io/manojkmishra/pen/OJMNjzq?editors=1010
Template part
<v-app id="inspire">
<div>
{{msg}}
<v-data-table show-select v-model="selected"
:headers="headers"
:items="desserts"
:options.sync="options"
:items-per-page="5"
:server-items-length="totalDesserts"
:loading="loading"
class="elevation-1"
item-key="name"
></v-data-table>
</div>
</v-app>
Script part
<script>
export default {
data () {
return { selected: [],
totalDesserts: 0,
desserts: [],
loading: true,
options: {},
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},
watch: {
options: {
handler () {
this.getDataFromApi()
.then(data => {
this.desserts = data.items
this.totalDesserts = data.total
})
},
deep: true,
},
},
computed: {
msg() {
console.log('msg-',this.selected)
return this.selected
}
},
mounted () {
this.getDataFromApi()
.then(data => {
this.desserts = data.items
this.totalDesserts = data.total
})
},
methods: {
getDataFromApi () {
this.loading = true
return new Promise((resolve) => {
const { sortBy, sortDesc, page, itemsPerPage } = this.options
let items = this.getDesserts()
const total = items.length
if (sortBy.length === 1 && sortDesc.length === 1) {
items = items.sort((a, b) => {
const sortA = a[sortBy[0]]
const sortB = b[sortBy[0]]
if (sortDesc[0]) {
if (sortA < sortB) return 1
if (sortA > sortB) return -1
return 0
} else {
if (sortA < sortB) return -1
if (sortA > sortB) return 1
return 0
}
})
}
if (itemsPerPage > 0) {
items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
}
setTimeout(() => {
this.loading = false
resolve({
items,
total,
})
}, 1000)
})
},
getDesserts () {
return [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
]
},
},
}
</script>
I am using anuglar-nvd3 and can't find any documentation on the API. The issue I'm facing right now is how can I set a maximum & minimum value on the xAxis and yAxis.
In other words regardless of the data, the axis would have a minimum of -1 and a maximum of 1.
Plunker: http://plnkr.co/edit/LKt3UJe5PnJOf8uQEwxr?p=preview
Code:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'scatterChart',
height: 450,
color: d3.scale.category10().range(),
scatter: {
onlyCircles: false
},
showDistX: true,
showDistY: true,
tooltipContent: function(key) {
return '<h3>' + key + '</h3>';
},
duration: 350,
xAxis: {
scale: [0,5],
axisLabel: 'X Axis',
tickFormat: function(d){
return d3.format('.02f')(d);
}
},
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -5
},
zoom: {
//NOTE: All attributes below are optional
enabled: false,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: false,
unzoomEventType: 'dblclick.zoom'
},
margin: {
top: 100,
right: 100,
left: 100,
bottom: 100
}
}
};
$scope.data = [
{
"key":"static",
"color":"#fff",
"values":[
{
"x":-1,
"y":-1,
"size":0.0000001,
"shape":"circle",
"series":0
},
{
"x":1,
"y":1,
"size":0.0000001,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 0",
"color":"#1f77b4",
"values":[
{
"x":-0.5,
"y":-0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 1",
"color":"#ff7f0e",
"values":[
{
"x":-0.5,
"y":0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 2",
"color":"#2ca02c",
"values":[
{
"x":0.5,
"y":-0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 3",
"color":"#d62728",
"values":[
{
"x":0.5,
"y":0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
}
];
});
Have you tried
forceY: [-1, 1],
forceX: [-1, 1],
I have two fiddles: no angular, and using angular. The one with the angular doesn't work correctly. It doesn't show dates in xAxis, and doesn't use percent for yAxis.
Is there something specific need to be done, to have that work with angular?
No angular html
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Angular html
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div ng-app="myApp">
<div ng-controller="myctrl">
<highchart id="chart1" config="ipo" class="span9"></highchart>
</div>
</div>
Not angular javascript
$(function () {
function createChart() {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: [{
name: 'IPO',
data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
}, {
name: 'SPX',
data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
}]
});
}
createChart();
});
Angular javascript
var myApp = angular.module('myApp', ['highcharts-ng']);
myApp.controller('myctrl', BindingCode);
myApp.factory("Factory", Factory);
function ipo() {
this.chartConfig = {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: [{
name: 'IPO',
data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
}, {
name: 'SPX',
data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
}]
}
}
function BindingCode($scope,Factory) {
$scope.ipo = Factory.CreateChart();
$scope.ipo = $scope.ipo.chartConfig;
}
function Factory() {
return {
CreateChart: function () {
return new ipo();
}
}
}
Not angular screenshot
Angular screenshot
The problem is that not all the highchart options go into the top-level JSON configuration.
From the FAQ:
Why doesn't my plot options/tooltip/drilldown/other feature work?
At least half of all issues filed are due to this. Before you file an
issue read this! A common error is to put other Highcharts options
directly into the chartConfig. In general if the Highcharts option you
want isn't listed above you probably want to put it in
chartConfig.options.
In your case, you need to move pretty everything except 'series' into an options object.
chartConfig = {
options : {
rangeSelector: {
selected: 4
},
type: "line",
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
}
},
series: [{
name: 'IPO',
data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
}, {
name: 'SPX',
data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
}]
}
Updated fiddle
https://jsfiddle.net/mgwkzob3/1/
This is the code for the line chart which has drag function to highlight some data. I would like to get the datasource information in the dragEnd event,currently I am just getting screenX and screenY values.
function createChart(data) {
$("#TimeSeriesPlot").kendoChart({
title: {
text: series_name.toUpperCase()
},
dataSource :{
data:data.timeseries,
},
series: [{
type: "line",
field:"v",
categoryField:"ts",
}],
valueAxis: {
labels: {
format: "{0}"
},title:{
text: "value"
},
line: {
visible: false
},
},
categoryAxis: {
labels: {
type: "date",
},
tooltip: {
visible: true,
// shared:true,
template: "${category} - ${value}"
},
plotAreaClick: onPlotAreaClick,
seriesClick:onSeriesClick ,
dragStart:onDragStart ,
drag:onDrag,
dragEnd:onDragEnd
});
}
}
function onSeriesHover(e) {
console.log(kendo.format("Series hover :: {0} ({1}): {2}",
e.series.name, e.category, e.value));
}
function onSeriesClick(e){
// console.log(selected_anamolies);
// console.log(e.category);
selected_anamolies.push("ts",e.category);
selected_anamolies.push("v",e.value);
}
function onDragStart(e){
// console.log("dragstart"+e.axisRanges.ts);
// console.log("dragstart"+e.sender._highlight._points[0].value);
// console.log("dragstart"+e.sender._highlight._points[0].category);
}
function onDrag(e){
var Rect = kendo.geometry.Rect;
var draw = kendo.drawing;
prevloc=e.originalEvent.x.startLocation;
currentloc=e.originalEvent.x.location;
var rect=new Rect([prevloc,50],[currentloc-prevloc,150]);
var path = draw.Path.fromRect(rect,{ stroke: null,fill:{color:"#d3f1fb",opacity:0.2}});
var chart = e.sender;
// var surface = draw.Surface.create($("#surface"));
chart.surface.draw(path);
//
}
function onDragEnd(e){
console.log(dragEnd)
}
I have a requirement i.e based on the tree view check box selection the value axis need to update.I am using 4 check boxes with 4 value axis.when ever I check the first item corresponding value axis should be changed .3 other axis should in invisible state.
Here I tried with some of the code and updated .
Code:
<div id="treeview"></div>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
var valueAxes = [
{ name: "KM",visible:false,
title: { text: "KM" ,visible:false}
},
{ name: "Miles Per Gallon",
title: { text: "Miles Per Gallon" }
},
{
name: "Miles",
title: { text: "Miles " }
},
{
name: "liters per 100km",
title: { text: "liters per 100km" }
}
];
function createChart() {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}, {
type: "area",
data: [30, 38, 40, 32, 42],
name: "mpg",
color: "#642381"
}, {
type: "area",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "l/100 km",
color: "#e5388a"
}],
valueAxes:valueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function() {
createChart();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
$("#treeview").find(":checked").each(function() {
var nodeText =$(this).parent().parent().text();
$.each(valueAxes, function(index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedSeries.push(valueAxes);
checkedSeries.visible==="true";
checkedSeries.title.visible===true;
}
});
});
chart.options.valueAxes = checkedSeries;
chart.refresh();
});
});
jsbin: Value axis change
Yes , it is possible to bind and unbind value axis and series at a time.
Change your scripts like below
var valueAxes = [
{
name: "KM", labels: {
format: "{0}"
}, min: 0,
max: 9,
title: { text: "KM" }
},
{
name: "Miles Per Gallon", labels: {
format: "{0}%"
}, min: 0,
max: 5,
title: { text: "Miles Per Gallon" }
},
{
name: "Miles", labels: {
format: "{0}%"
},
title: { text: "Miles " }
},
{
name: "liters per 100km", min: 0,
max: 1,
title: { text: "liters per 100km" }
}];
var series = [{
type: "column",
axis: "KM",
data: [20, 40, 45, 30, 50],
stack: true,
name: "KM",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
axis: "Miles Per Gallon",
stack: true,
name: "Miles Per Gallon",
color: "#0399d4"
}, {
type: "column",
data: [30, 38, 40, 32, 42],
axis: "Miles",
name: "Miles",
color: "#642381"
}, {
type: "column",
axis: "liters per 100km",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "liters per 100km",
color: "#e5388a"
}];
function createChart(inputValueAxes, inputSeries) {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: inputSeries,
valueAxes: inputValueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function () {
createChart(valueAxes, series);
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText.trim()) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText.trim()) {
checkedSeries.push(series);
}
});
});
createChart(checkedAxes, checkedSeries);
}
else {
createChart(checkedAxes, checkedSeries);
}
});
});
Refer this http://jsbin.com/eyibar/49/edit
For convenience, Intially i load all the chart axeses. Its working as you asked....
jsbin: http://jsbin.com/eyibar/37/edit
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
#chart { width: 600px; }
</style>
</head>
<body>
<div id="treeview"></div>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<script type="text/javascript">
var valueAxes = [
{
name: "KM",
title: { text: "KM" }
},
{
name: "Miles Per Gallon",
title: { text: "Miles Per Gallon" }
},
{
name: "Miles",
title: { text: "Miles " }
},
{
name: "liters per 100km",
title: { text: "liters per 100km" }
}];
function createChart(valueAxes) {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}, {
type: "area",
data: [30, 38, 40, 32, 42],
name: "mpg",
color: "#642381"
}, {
type: "area",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "l/100 km",
color: "#e5388a"
}],
valueAxes: valueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function () {
createChart(valueAxes);
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
if ($("#treeview").find(":checked").length != 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText.trim()) {
checkedSeries.push(valueAxes);
checkedSeries["visible"] = true;
}
});
});
createChart(checkedSeries);
}
else {
createChart(checkedSeries);
}
});
});
</script>
</body>
</html>
I edited your code in that I can able to bind and unbind the valueaxis by calling the creatChart(checkedAxes) function in if condition with length==-1,at that time the series is not updated.
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== -1){
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText) {
checkedSeries.push(series);
}
});
});
chart.options.series = checkedSeries;
chart.options.valeAxes = checkedAxes;
chart.refresh();
}
createChart(checkedAxes);
});
but if I tried by without calling the creatChart(checkedAxes) function,the series binded to the chart are updated.
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== -1){
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText) {
checkedSeries.push(series);
}
});
});
chart.options.series = checkedSeries;
chart.options.valeAxes = checkedAxes;
chart.refresh();
}
});
I didn't get the both scenarios at a time.sorry,hope you find the solution.
Cheers,
Happy Coding...