I am trying to update a C3 graph with different onclick funtion by using the load function of C3.
The code snippet is here:
var json1 = [{
date: '2014-01-01',
upload: 200,
download: 200,
total: 400
}, {
date: '2014-01-02',
upload: 100,
download: 300,
total: 400
}, {
date: '2014-02-01',
upload: 300,
download: 200,
total: 500
}, {
date: '2014-02-02',
upload: 400,
download: 100,
total: 500
}];
var json2 = [{
date: '2014-01-01',
upload: 200,
download: 500,
total: 700
}, {
date: '2014-01-02',
upload: 500,
download: 450,
total: 950
}, {
date: '2014-02-01',
upload: 200,
download: 800,
total: 1000
}, {
date: '2014-02-02',
upload: 300,
download: 500,
total: 800
}];
var chart = c3.generate({
bindto: '#div1',
data: {
json: json1,
onclick: function (event) {
console.log("11111111111") ;
},
keys: {
x: 'date',
value: ['upload', 'download']
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
}
});
setTimeout(function () {
chart.unload();
}, 1000);
setTimeout(function () {
chart.load({
json: json2,
keys: {
x: 'date',
value: ['upload', 'download']
},
onclick: function (event) {
console.log("22222222") ;
},
});
}, 1000);
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<div id="div1"></div>
Please tell me a way so to update the onClick funtion on the load function itself.
From what I can find, c3.load() does not offer all the elements of c3.generate(), therefore you have 2 ways of doing this.
Reuse c3.generate(), or hand off the click event to a variable that you can change, such as:
// INITIAL CLICK HANDLER
var clickhandler = function(event) {
console.log("11111111111");
}
var json1 = [{
date: '2014-01-01',
upload: 200,
download: 200,
total: 400
}, {
date: '2014-01-02',
upload: 100,
download: 300,
total: 400
}, {
date: '2014-02-01',
upload: 300,
download: 200,
total: 500
}, {
date: '2014-02-02',
upload: 400,
download: 100,
total: 500
}];
var json2 = [{
date: '2014-01-01',
upload: 200,
download: 500,
total: 700
}, {
date: '2014-01-02',
upload: 500,
download: 450,
total: 950
}, {
date: '2014-02-01',
upload: 200,
download: 800,
total: 1000
}, {
date: '2014-02-02',
upload: 300,
download: 500,
total: 800
}];
// GENERATE CHART FROM JSON1
var chart = c3.generate({
bindto: '#div1',
data: {
json: json1,
onclick: function(event) { clickhandler(event) },
keys: {
x: 'date',
value: ['upload', 'download']
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
}
});
// MAKE CHANGES TO THE LOADED CHART
setTimeout(function () {
// CHANGE THE CLICK EVENT HANDLER
clickhandler = function(event) {
console.log('22222222222');
};
// UNLOAD EXISTING DATA AND LOAD NEW DATA FROM JSON2
chart.load({
json: json2,
keys: {
x: 'date',
value: ['upload', 'download']
},
unload: chart.columns
});
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<div id="div1"></div>
Related
I want to open calendar in one of the columns and when use select date, I want to display in MM/dd/yyyy. I want to validate date too on button click.
var sheet = [
{
ranges: [{
dataSource: tradeData
}],
fieldAsColumnHeader: true,
columns: [{
width: 70
}, {
width: 80
}, {
width: 100
}, {
width: 100
},
{
width: 70
}, {
width: 120
}, {
width: 80
}, {
width: 120
},
{
width: 140
}, {
width: 80
}, {
width: 120
}, {
width: 120
}
],
rows: [{
index: 1,
cells: [{
index: 3,
value: '',
validation: {
type: 'List',
value1: trade_types.toString()
}
},
{
index: 8,
value: '',
validation: {
type: 'List',
value1: counter_parties.toString()
}
},
{
index: 10,
value: '',
validation: {
type: 'List',
value1: settlement_methods.toString()
}
}
]
}]
}
];
var spreadsheet = new ej.spreadsheet.Spreadsheet({
showRibbon: false,
showFormulaBar: false,
showSheetTabs: false,
sheets: sheet,
created: () => {
//Add Data validation to range.
}
});
spreadsheet.appendTo('#spreadsheet');
ECharts is the frame that handle data,I want to use ECharts to handle the data from server
I received the data from server and they were right but they can show in web.
this my code order:
first, I send the request to the server,I use axios that in vue .
axios.get("http://localhost:8080/container/id/"+id)
And then when I receive the data I will handle the data
resp =>{
if(resp.data.code===20041){
this.animal= resp.data.data;
this.$message({
showClose: true,
message: '查询成功',
type: 'success'
});
this.option.series[0].data[1].value[0]=this.$data.animal.tiger;
this.option.series[0].data[1].value[1]=this.$data.animal.peacock;
this.option.series[0].data[1].value[2]=this.$data.animal.koala;
this.option.series[0].data[1].value[3]=this.$data.animal.owl;
this.option.series[0].data[1].value[4]=this.$data.animal.chameleon;
this.option.series[1].data[1].value[0]=app.$data.animal.personalityHandled.extraversion;
this.option.series[1].data[1].value[1]=app.$data.animal.personalityHandled.agreeableness;
this.option.series[1].data[1].value[2]=app.$data.animal.personalityHandled.seriousness;
this.option.series[1].data[1].value[3]=app.$data.animal.personalityHandled.neuroticism;
this.option.series[1].data[1].value[4]=app.$data.animal.personalityHandled.experienceopenness;
console.log(this.option);
}else {
console.log(resp.data);
this.$message({
showClose: true,
message: '查询失败',
type: 'error'
});
}
})
finally,I initialize the ECharts and transfer the data to ECharts
// initialize echarts
var myChart = echarts.init(document.getElementById('app'));
console.log(app.option);
// set the data to echarts
myChart.setOption(app.option);
but my data from can't show in the model, they are null,you see can in this pictureenter image description here
and I just send a request but the server search twice in mysqlenter image description here
this is my total code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="/js/element-ui/lib/index.js"></script>
<script src="../js/echarts.js"></script>
</head>
<body>
<!--the scope for echart and vue-->
<div id="app" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data: {
// this is the template for the echarts
option: {
title: {
text: 'Multiple Radar'
},
tooltip: {
trigger: 'axis'
},
legend: {
left: 'center',
data: [
'animal standard',
'personality standard',
'personality interviewee',
'animal interviewee'
]
},
radar: [
{
indicator: [
{ text: 'tiger', max: 30 },
{ text: 'peacock', max: 30 },
{ text: 'koala', max: 30 },
{ text: 'owl', max: 30 },
{ text: 'chameleon', max: 30 }
],
center: ['25%', '40%'],
radius: 80
},
{
indicator: [
{ text: 'extraversion', max: 20 },
{ text: 'agreeableness', max: 20 },
{ text: 'seriousness', max: 20 },
{ text: 'neuroticism', max: 20 },
{ text: 'experienceopenness', max: 20 }
],
center: ['75%', '40%'],
radius: 80
},
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: [
{
value: [13,16,13.5,10,15],
name: 'animal standard'
},
{
value: [0, 0, 0, 0,0],
name: 'animal interviewee'
}
]
},
{
type: 'radar',
radarIndex: 1,
tooltip: {
trigger: 'item'
},
data: [
{
value: [13, 16, 13.5, 10,15],
name: 'personality standard'
},
{
value: [0, 0, 0, 0,0],
name: 'personality interviewee'
}
]
}
]
},
// this is to receive server response
animal: {
tiger: 0,
peacock: 0,
koala: 0,
owl: 0,
chameleon: 0,
personalityHandled: {
extraversion: 0,
agreeableness: 0,
seriousness: 0,
neuroticism: 0,
experienceopenness: 0,
}
},
},
methods:{
// the function is send the request to server,and then handled the data from server
findAnimalById(id){
axios.get("http://localhost:8080/container/id/"+id)
.then(resp =>{
if(resp.data.code===20041){
this.animal= resp.data.data;
this.$message({
showClose: true,
message: '查询成功',
type: 'success'
});
this.option.series[0].data[1].value[0]=this.$data.animal.tiger;
this.option.series[0].data[1].value[1]=this.$data.animal.peacock;
this.option.series[0].data[1].value[2]=this.$data.animal.koala;
this.option.series[0].data[1].value[3]=this.$data.animal.owl;
this.option.series[0].data[1].value[4]=this.$data.animal.chameleon;
this.option.series[1].data[1].value[0]=app.$data.animal.personalityHandled.extraversion;
this.option.series[1].data[1].value[1]=app.$data.animal.personalityHandled.agreeableness;
this.option.series[1].data[1].value[2]=app.$data.animal.personalityHandled.seriousness;
this.option.series[1].data[1].value[3]=app.$data.animal.personalityHandled.neuroticism;
this.option.series[1].data[1].value[4]=app.$data.animal.personalityHandled.experienceopenness;
console.log(this.option);
}else {
console.log(resp.data);
this.$message({
showClose: true,
message: '查询失败',
type: 'error'
});
}
})
},
},
created(){
// invoke the function
this.findAnimalById(8);
}
});
// initialize echarts
var myChart = echarts.init(document.getElementById('app'));
console.log(app.option);
// set the data to echarts
myChart.setOption(app.option);
</script>
</body>
</html>
i am using angular 11 and i am using latest version of #antv/g2 and #antv/data-set package in angular 11
I do not understand why i have to encounter this error. please help me to resolve this error and thanks in advance.
below is error image that i have faced.
Error Image
This is my code.
Dashboard.component.ts
import { Chart } from '#antv/g2';
var DataSet = require('#antv/data-set');
ngAfterViewInit() {
// TODO:
const chart1 = this.genChart1();
const chart2 = this.genChart2();
// NOTE:
this.settings.notice.subscribe(res => {
chart1.forceFit();
chart2.forceFit();
});
}
// Line chart
genChart1() {
const data = [
{ date: '2019-6-24', indicator: 'UV', count: 7 },
{ date: '2019-6-24', indicator: 'Download', count: 3.9 },
{ date: '2019-6-25', indicator: 'UV', count: 6.9 },
{ date: '2019-6-25', indicator: 'Download', count: 4.2 },
{ date: '2019-6-26', indicator: 'UV', count: 9.5 },
{ date: '2019-6-26', indicator: 'Download', count: 5.7 },
{ date: '2019-6-27', indicator: 'UV', count: 14.5 },
{ date: '2019-6-27', indicator: 'Download', count: 8.5 },
{ date: '2019-6-28', indicator: 'UV', count: 18.4 },
{ date: '2019-6-28', indicator: 'Download', count: 11.9 },
{ date: '2019-6-29', indicator: 'UV', count: 21.5 },
{ date: '2019-6-29', indicator: 'Download', count: 15.2 },
{ date: '2019-6-30', indicator: 'UV', count: 25.2 },
{ date: '2019-6-30', indicator: 'Download', count: 17 },
{ date: '2019-7-1', indicator: 'UV', count: 26.5 },
{ date: '2019-7-1', indicator: 'Download', count: 16.6 },
{ date: '2019-7-2', indicator: 'UV', count: 23.3 },
{ date: '2019-7-2', indicator: 'Download', count: 14.2 },
{ date: '2019-7-3', indicator: 'UV', count: 18.3 },
{ date: '2019-7-3', indicator: 'Download', count: 10.3 },
{ date: '2019-7-4', indicator: 'UV', count: 13.9 },
{ date: '2019-7-4', indicator: 'Download', count: 6.6 },
{ date: '2019-7-5', indicator: 'UV', count: 9.6 },
{ date: '2019-7-5', indicator: 'Download', count: 4.8 },
];
// const chart = new G2.Chart({
const chart = new Chart({
container: 'chart1',
forceFit: true,
height: 300,
padding: [20, 20, 80, 50],
});
chart.source(data, {
date: {
alias: '',
type: 'time',
mask: 'MM-DD',
},
});
chart.tooltip({
crosshairs: {
type: 'line',
},
});
chart.axis('count', {
label: {
formatter: function formatter(val) {
return val + 'K';
},
},
});
chart
.line()
.position('date*count')
.color('indicator');
chart
.point()
.position('date*count')
.color('indicator')
.size(4)
.shape('circle')
.style({
stroke: '#fff',
lineWidth: 1,
});
chart.render();
return chart;
}
// Pie chart
genChart2() {
const text = ['MIDNIGHT', '3 AM', '6 AM', '9 AM', 'NOON', '3 PM', '6 PM', '9 PM'];
const data = [];
for (let i = 0; i < 24; i++) {
const item: any = {};
item.type = i + '';
item.value = 10;
data.push(item);
}
const DataView = DataSet.DataView;
const dv = new DataView();
dv.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent',
});
// const chart = new G2.Chart({
const chart = new Chart({
container: 'chart2',
forceFit: true,
height: 300,
padding: 50,
});
chart.legend(false);
chart.tooltip({
showTitle: false,
});
const bgView: any = chart.view();
bgView.coord('theta', {
innerRadius: 0.9,
});
bgView.source(dv);
bgView
.intervalStack()
.position('percent')
.color('type', ['rgba(255, 255, 255, 0)'])
.style({
stroke: '#444',
lineWidth: 1,
})
.tooltip(false)
.select(false);
bgView.guide().text({
position: ['50%', '50%'],
content: '24 hours',
style: {
lineHeight: '240px',
fontSize: '30',
fill: '#262626',
textAlign: 'center',
},
});
const intervalView = chart.view();
intervalView.source(data);
intervalView.coord('polar', {
innerRadius: 0.9,
});
intervalView.axis(false);
intervalView
.interval()
.position('type*value')
.size('type', val => {
if (val % 3 === 0) {
return 4;
} else {
return 0;
}
})
.color('#444')
.tooltip(false)
.label('type', val => {
if (val % 3 === 0) {
return text[val / 3];
}
return '';
});
const userData = [
{ type: 'A', value: 60 },
{ type: 'B', value: 10 },
{ type: 'C', value: 10 },
{ type: 'D', value: 40 },
{ type: 'E', value: 20 },
{ type: 'F', value: 10 },
{ type: 'G', value: 30 },
{ type: 'H', value: 30 },
];
const userDv = new DataView();
userDv.source(userData).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent',
});
const pieView = chart.view();
pieView.source(userDv, {
percent: {
formatter: function formatter(val) {
return (val * 100).toFixed(2) + '%';
},
},
});
pieView.coord('theta', {
innerRadius: 0.75,
});
pieView
.intervalStack()
.position('percent')
.color('type')
.label('type', {
offset: 40,
})
.select(false);
chart.render();
return chart;
}
Dashboard.component.html
<div class="matero-row" fxLayout="row wrap">
<!-- Charts -->
<div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">
<mat-card>
<mat-card-subtitle>Traffic</mat-card-subtitle>
<mat-card-content>
<div id="chart1"></div>
</mat-card-content>
</mat-card>
</div>
<div class="matero-col" fxFlex.gt-sm="40" fxFlex="100">
<mat-card>
<mat-card-subtitle>User Behavier</mat-card-subtitle>
<mat-card-content>
<div id="chart2"></div>
</mat-card-content>
</mat-card>
</div>
</div>
please help me.
You can't assign a constructor here :
const DataView = DataSet.DataView;
const dv = new DataView();
According to the docs :
const dv0 = new DataSet.DataView();
Key Words: vue echarts graph drag
I want to make a graph chart with draggable nodes.
I use graphic to create circles with the dragging function on nodes.
there are two bugs:
When I move one node, the other nodes will move too.
Although I update the option immediately when the data change, but the chart always change a few seconds later.
You can init a vue-project with vue-cli3 and npm install echarts.
Then you can copy the codes to instead of the App.vue.
<template>
<div id="app">
<div id="charts" ref="chart" style="height:70vh;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
myChart: null,
option: {},
graph: {
nodes: [
{
name: 'Node1',
x: 300,
y: 300
},
{
name: 'Node2',
x: 800,
y: 300
},
{
name: 'Node3',
x: 550,
y: 100
},
{
name: 'Node4',
x: 550,
y: 500
}
],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 5,
curveness: 0.2
}
}
},
{
source: 'Node2',
target: 'Node1',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
},
{
source: 'Node1',
target: 'Node3'
},
{
source: 'Node2',
target: 'Node3'
},
{
source: 'Node2',
target: 'Node4'
},
{
source: 'Node1',
target: 'Node4'
}
]
}
}
},
mounted () {
this.initChart()
this.renderChart()
},
methods: {
initChart () {
this.myChart = echarts.init(document.getElementById('charts'));
},
renderChart() {
this.myChart.showLoading();
this.formatOption();
this.initDrag();
},
formatOption () {
this.option = {
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: 'scale',
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
nodes: this.graph.nodes,
links: this.graph.links,
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
]
};
this.myChart.hideLoading();
this.myChart.setOption(this.option, true);
},
initDrag () {
this.option.graphic = echarts.util.map(this.graph.nodes, (item, dataIndex) => {
return {
type: 'circle',
position: this.myChart.convertToPixel({seriesIndex: 0}, [item.x, item.y]),
shape: {
r: 10
},
// invisible: true,
style: {
fill: 'blue'
},
draggable: true,
ondrag: echarts.util.curry(this.onPointDragging, dataIndex),
z: 100
}
});
this.myChart.setOption(this.option);
window.addEventListener('resize', this.updatePosition);
},
updatePosition () {
this.myChart.setOption({
graphic: echarts.util.map(this.graph.nodes, (item, dataIndex) => {
return {
position: this.myChart.convertToPixel({seriesIndex: 0}, [item.x, item.y])
};
})
});
},
onPointDragging (dataIndex, event) {
let pos = this.myChart.convertFromPixel({seriesIndex: 0}, [event.offsetX, event.offsetY]) // 将graphic的像素坐标转化为坐标系坐标
this.graph.nodes[dataIndex].x = pos[0] // 将新的坐标系坐标赋值给node
this.graph.nodes[dataIndex].y = pos[1]
this.myChart.setOption({
series: {
nodes: this.graph.nodes
}
})
this.updatePosition()
}
}
}
</script>
<style scoped>
#charts {
flex: 1;
border: 1px solid;
box-shadow: 0 0 20px rgba(18,208,253,.5);
}
</style>
What I Need:
When user clicks on a reload button, then data should be reloded.
Example: http://docs.sencha.com/extjs/4.1.3/#!/example/charts/Pie.html.
The example has helped but I cannot reload data in pie chart. Here is my code:
Ext.onReady(function () {
store.loadData(generateData());
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
Ext.Msg.alert("click");
store.loadData(generateData());
}
},
{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
},
{
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'temperature',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('date');
});
this.setTitle(storeItem.get('temperature') + ': ' + storeItem.get('date') );
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'temperature',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});
I've also used a sencha example url: http://try.sencha.com/extjs/4.0.7/examples/charts/pie/viewer.html but it's not working.
I have to reload the data in charts. My data is loaded into the chart, but it is not able to be reloaded.
example-data.js code :
Ext.onReady(function() {
window.generateData = function(){
var data = [];
data.push(
{ temperature: 86, date: new Date(2014, 1, 4, 8) },
{ temperature: 20, date: new Date(2014, 1, 5, 7) },
{ temperature: 75, date: new Date(2014, 1, 1, 11) },
{ temperature: 10, date: new Date(2014, 1, 1, 7) },
{ temperature: 46, date: new Date(2014, 1, 1, 12) }
);
return data;
};
window.store = Ext.create('Ext.data.JsonStore', {
fields: ['temperature', 'date'],
data: generateData()
});
window.loadTask = new Ext.util.DelayedTask();
});
var chartId = Ext.getStore('myStore');
ChartId.refresh();
try once