What I need:
when charts are loaded data is loaded in charts.
Problem I'm facing: Charts are loading but data is not loading.
I'm using sencha docs as Reference Guide.
I just want load data in charts link: http://postimg.org/image/ydbac2soh/
This is the output link that I'm getting url: http://postimg.org/image/5whlpe6wj/
This is code of line charts:
Ext.require('Ext.chart.*');
Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.define('Employee',{
extend:'Ext.data.Model',
fields:['name','yearOfExperience']
});
var store=Ext.create('Ext.data.Store',{
model:'Employee',
data:[
{ name:'sam', yearOfExperience:12 },
{ name:'ram', yearOfExperience:7 },
{ name:'kim', yearOfExperience:16 },
{ name:'john', yearOfExperience:21 },
{ name:'Mary', yearOfExperience:13 }
]
});
Ext.onReady(function () {
Ext.Msg.alert("hello","all set");
Ext.create('Ext.chart.Chart',
{
width:500,
height:300,
animate:true,
shadow:store,
store:store,
renderTo:Ext.getBody(),
legend: {
position:'right'
},
insertPadding:25,
theme:'Base:gradients',
axes:[
{
title:'years Of Experience',
type:'Numeric',
position:'left',
fields:['yearOfExperience'],
minimum:0,
maximum:30
},
{
title: 'Employee',
type: 'Category',
position:'bottom',
fields:['name']
}
],
series:[
{
type:"line",
xFields: "name",
yField :"yearOfExerince"
}
]
});
});
I have used dummy data t load in charts in ext js.
Charts are loaded perfectly but data is not loaded in charts please help where i have done wrong.
I have tried with dummy data in charts but no data is loading.
Here is the output link: http://postimg.org/image/5whlpe6wj/.
Try setting the store to:
autoLoad = true;
Related
I am not a JavaScript expert and I am trying to put a simple pie chart together using the data from a csv file. The sample code for the pie chart with its input data looks like below and it works perfectly.
var pie = new d3pie("pie", {
header: {
title: {
text: "A Very Simple Pie",
fontSize: 30
}
},
data: {
content: [
{ label: "JavaScript", value: 264131 },
{ label: "Ruby", value: 218812 },
{ label: "Java", value: 157618}
]
}
});
but when I try to use the data from the csv file. It says no data is provided. I obviously try to pass the dynamic data to the data.content but it seems like I am not doing it correctly. Below is my code:
var input_data = []
d3.csv("data.csv", function (data) {
input_data.push({
label: data["First"],
value: +data["Age"]
});
});
console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
Any idea what I am doing wrong here?
As noted in my comment, your problem is because d3.csv acts asynchronously, and input_data isn't populated when d3pie tries to create your chart.
There is something highly suspicious going on with input_data in the other examples -- it should be called for every item in data, but seems only to be called once. Rather than using input_data to collate intermediate results, it's much easier to use javascript's map function to transform your csv data into the format you want:
d3.csv("data.csv", function (data) {
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: data.map( function(d){
return { label: d['First'], value: +d['Age'] }
})
}
});
});
map iterates over an array and produces an array as output, so it's much cleaner and easier than creating extra arrays on to which you push data, etc.
You probably want to put your d3pie code inside your callback function because you want to call it after the data returns (see this example):
var input_data = []
d3.csv("data.csv", function (data) {
input_data.push({
label: data["First"],
value: +data["Age"]
});
console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
});
const promise = d3.csv("data.csv", function (data) {
input_data.push({
'label': data["First"],
'value': +data["Age"]
});
});
promise.then(function(){
var pie = new d3pie("pieChart", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
});
I´m developing a visualization module for some crypto portfolios with vue.js and chart.js but am currently stuck with this:
Empty chart is displayed but non of the values are rendered.
Since the values are dynamically loaded after the chart is initialized I believe that the chart is not updating itself properly (even though I call .update()), but no errors are displayed whatsoever.
I wrapped the chart.js rendering in a vue component:
Vue.component('portfolioValues', {
template: '<canvas width="400" height="200"></canvas>',
data: function() {
return {
portfolio_value: [],
portfolio_labels: [],
chart: null,
}
},
methods: {
load_portfolio_value_local: function() {
values = [];
labels = []
local_data.forEach(element => {
values.push(element.total_usd);
labels.push(moment(element.timestamp, 'X'));
});
this.portfolio_value = values;
this.portfolio_labels = labels;
this.chart.update();
},
render_chart: function() {
this.chart = new Chart(this.$el, {
type: 'line',
data: {
labels: this.portfolio_labels,
datasets: [{
label: "Portfolio Value",
data: this.portfolio_value,
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'linear',
}]
}
}
});
}
},
mounted: function() {
this.render_chart();
this.load_portfolio_value_local();
}
});
For demonstration purposes I just added some data locally, looks like this:
local_data = [{
"timestamp": 1515102737,
"total_btc": 0.102627448096786,
"total_usd": 1539.41274772627
}, {
"timestamp": 1515102871,
"total_btc": 0.102636926127186,
"total_usd": 1538.52649627725
}, {
"timestamp": 1515103588,
"total_btc": 0.102627448096786,
"total_usd": 1532.33042753311
}
]
Here is the full demo code: https://codepen.io/perelin/pen/mppbxV
Any ideas why no data gets rendered? thx!
The problem you have here is how vuejs handles its data.
If you use it like that:
local_data.forEach(element => {
this.portfolio_value.push(element.total_usd);
this.portfolio_labels.push(moment(element.timestamp, 'X'));
});
this.chart.update();
The chart will update. But by re-initializing the arrays you work against vuejs.
TL;DR
If you want to re-initialize an object, you could assign the array to the object:
Object.assign(this.portfolio_value, values);
Object.assign(this.portfolio_labels, labels);
That way, the linking stays working.
I've been trying to update the entire row of my grid, but having issues. I am able to update a single cell (if it doesn't have a formatter), but I would like to be able to update the entire row. Alternatively, I could update the column, but I'm not able to get it working if it has a formatter.
Here is the code that I'm using to update the grid:
grid.store.fetch({query : { some_input : o.some_input },
onItem : function (item ) {
dataStore.setValue(item, 'input', '123'); //works!
dataStore.setValue(item, '_item', o); //doesn't work!
}
});
And the structure of my grid:
structure: [
{ type: "dojox.grid._CheckBoxSelector"},
[[{ name: "Field1", field: "input", width:"25%"}
,{ name: "Field2", field: "another_input", width:"25%"}
,{ name: "Field3", field: "_item", formatter:myFormatter, width:"25%"}
,{ name: "Field4", field: "_item", formatter:myOtherFormatter, width:"25%"}
]]
]
Got some information in the #dojo freenode channel from 'tk' who kindly put together a fiddle showing the proper way to do this, most noteably putting an idProperty on the memoryStore and overwriting the data: http://jsfiddle.net/few3k7b8/2/
var memoryStore = new Memory({
data: [{
alienPop: 320000,
humanPop: 56000,
planet: 'Zoron'
}, {
alienPop: 980940,
humanPop: 56052,
planet: 'Gaxula'
}, {
alienPop: 200,
humanPop: 500,
planet: 'Reiutsink'
}],
idProperty: "planet"
});
And then when we want to update:
memoryStore.put(item, {
overwrite: true
});
Remember that item has to have a field 'planet', and it should be the same as one of our existing planets in order to overwrite that row.
Can anyone suggest a Javascript chart library that could produce such chart: Refer this Image
The emphasis here is on two separate areas: history and schedule. Each of them should have a different title and background color. Basically, it would be great if each area is configurable separately.
I tried Google Charts but did not see how to implement it in a clean way. I could create two charts with a specific layout, but I would prefer a more dynamic and correct way of doing that.
If you're looking for a charting library to accomplish this, ZingChart would do the trick. By setting "layout" in the graphset object to "x2" and creating two separate chart objects, your charts are set up side-by-side but can still be manipulated individually. I've included a demo below for reference. Run it to see the chart.
You can download the entire library for free on the site. If you have any questions, I'm on the team and happy to help! You can reach us at support#zingchart.com.
var myChart = {
"layout":"x2",
"background-color":"#eee",
"border-color":"#000",
"border-width":2,
"graphset":[
{
"type":"bar",
"background-color":"#eee",
"width":"60%",
"x":0,
"y":0,
"title":{
"text":"Chart 1",
"text-align":"left",
"font-color":"black",
"background-color":"#ddd"
},
"scale-x":{
"values":["2007","2008","2009","2010","2011","2012","2013","2014"],
"label":{
"text":"History",
"offset-x":-125,
"padding-top":10
},
"tick":{
"visible":false
},
"guide":{
"visible":false
}
},
"scale-y":{
"values":"0:12:2",
"guide":{
"line-style":"solid"
}
},
"plot":{
"stacked":true
},
"plotarea":{
"margin-right":0,
"background-color":"#ddd"
},
"legend":{
"shared":true,
"visible":false
},
"series":[
{
"values":[3,5,5,5,8,6,4,3],
"background-color":"#018BD3"
},
{
"values":[null,null,null,null,3,null,null,null],
"background-color":"#F27D30"
},
{
"values":[],
"background-color":"#F2D134"
},
{
"values":[null,null,null,null,null,2,null,2],
"background-color":"#14AE13"
}
]
},
{
"type":"bar",
"background-color":"#eee",
"width":"40%",
"x":"60%",
"y":0,
"title":{
"text":"Chart 2",
"text-align":"left",
"font-color":"black",
"background-color":"#ccc"
},
"scale-x":{
"values":["2015","2016","2017"],
"tick":{
"visible":false
},
"guide":{
"visible":false
},
"label":{
"text":"Schedule",
"offset-x":-25,
"padding-top":10
}
},
"scale-y":{
"values":"0:12:2",
"line-color":"#777",
"tick":{
"visible":false
},
"item":{
"visible":false
},
"guide":{
"line-style":"solid"
}
},
"plot":{
"stacked":true
},
"plotarea":{
"margin-left":0,
"margin-right":"50%",
"background-color":"#ccc"
},
"legend":{
"shared":true
},
"series":[
{
"values":[7,1,0],
"background-color":"#018BD3"
},
{
"values":[],
"background-color":"#F27D30"
},
{
"values":[3,6,1],
"background-color":"#F2D134"
},
{
"values":[1,null,null],
"background-color":"#14AE13"
}
]
}
]
};
zingchart.render({
id : "myChart",
height : "300px",
width : "100%",
data : myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
You can try d3Js - examples library.
The possible solution is you have to define Two graph separately with using <div> tag.
Give each of them separate CSS values (for colors and your specific needs), And then define both <div> under single division.
First try to edit JsFiddle
You can try LightningChart JS library. We have an extensive dashboard API which allows you to group multiple independent and customizable charts into a layout which can then also be resized on the fly.
You should take a look at our interactive examples for this specific use case Dashboard Example.
Full disclosure: I am a developer for LightningChart, I think you may find this very useful.
For my project i want to use the json file below to show in the highcharts.
For some reason the chart stays empty.
i think i need to format the json part in someway but i cant seem the figure out how.
Im pretty new to this, so I hope someone can explain the code to me in a simple way.
how do i format the code below? I want to use the colum chart.
[
{
"stadsdeel":"A Centrum",
"veiligheid":18994,
"leefbaarheid":3822,
"maatschappelijke integriteit":733,
"totaal":23549
},
{
"stadsdeel":"B Westpoort",
"veiligheid":878,
"leefbaarheid":318,
"maatschappelijke integriteit":88,
"totaal":1284
},
{
"stadsdeel":"E West",
"veiligheid":8648,
"leefbaarheid":1672,
"maatschappelijke integriteit":536,
"totaal":10856
},
{
"stadsdeel":"F Nieuw-West",
"veiligheid":8673,
"leefbaarheid":1832,
"maatschappelijke integriteit":690,
"totaal":11195
},
{
"stadsdeel":"K Zuid",
"veiligheid":10065,
"leefbaarheid":2171,
"maatschappelijke integriteit":767,
"totaal":13003
},
{
"stadsdeel":"M Oost",
"veiligheid":8284,
"leefbaarheid":1576,
"maatschappelijke integriteit":511,
"totaal":10371
},
{
"stadsdeel":"N Noord",
"veiligheid":5011,
"leefbaarheid":1324,
"maatschappelijke integriteit":385,
"totaal":6720
},
{
"stadsdeel":"T Zuidoost",
"veiligheid":5031,
"leefbaarheid":1264,
"maatschappelijke integriteit":677,
"totaal":6972
},
{
"stadsdeel":"X onbekend",
"veiligheid":196,
"leefbaarheid":46,
"maatschappelijke integriteit":26,
"totaal":268
},
{
"stadsdeel":"Amsterdam",
"veiligheid":65780,
"leefbaarheid":14025,
"maatschappelijke integriteit":4413,
"totaal":84218
}
]
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('charts.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Each point need to have y paramter with number value, becasuse highcharts use this param to calculate position of point.