I'm trying to insert data into var usa_markers from a json file, it looks OK but data is not displayed on the map.
this is my code:
// USA Map
$.get('map.json', function(data) {
var usa_markers = data;
console.log(usa_markers);
var usa_options = {
map: 'us_mill_en',
normalizeFunction: 'polynomial',
backgroundColor: '#fff',
regionsSelectable: false,
markersSelectable: false,
zoomButtons: false,
zoomOnScroll: false,
markers: usa_markers,
regionStyle: {
initial: {
fill: Colors.byName('blueGrey-200')
},
hover: {
fill: Colors.byName('gray-light'),
stroke: '#fff'
},
},
markerStyle: {
initial: {
fill: Colors.byName('blue-500'),
stroke: '#fff',
r: 10
},
hover: {
fill: Colors.byName('orange-500'),
stroke: '#fff'
}
}
};
$('#vector-map').vectorMap(usa_options);
});
The code that does work, looks like this:
var usa_markers = [{
latLng: [40.71, -74.00],
name: 'New York'
}]
solved it... just had to add JSON.parse to the data
Related
Click here for demo - https://dojo.telerik.com/#rikinshah/EQiMupoG
I have lots of elements for navigation in headers and icon buttons in footer. all of them are using svg > path elements.
I want to change color for all path elements except Kendo Chart which also contains path elements.
In css I use this to make all to use same color :
path {
fill: #4b4c4c
}
but this also changes color for Kendo chart background.
I tried using :not selector for div ID to fill path for kendo and also tried
chartArea: {
background: "#4b4c4c",
},
path: {
fill: "#4b4c4c"},
fill: {
color: "4b4c4c"}
none of this changes path for svg element in kendo graph.
<div id="kendoChart" class="demo-section k-content wide" style="margin-left: -3px;">
<div id="chart"></div>
</div>
function createChart() {
$("#chart").kendoChart({
theme: "flat",
chartArea: {
background: "transparent",
},
legendItemClick: function (e) {
e.preventDefault();
},
seriesDefaults: {
type: "column",
width: 90,
gap: 1,
},
legend: {
position: "bottom",
spacing: 15,
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
},
series: [{
data: [parseFloat(($('#room-revenue1').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue2').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue3').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue4').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue5').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue6').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue7').text()).replace(/,/g, "")), ],
name: "Room Revenue",
color: "#4472c3",
width: 500,
tooltip: {
visible: true,
template: "#= series.name #: #= kendo.format('{0:C2}',value) #",
font: "12px sans-serif",
},
}, {
type: "line",
data: [$('#rooms-sold1').text(),
$('#rooms-sold2').text(),
$('#rooms-sold3').text(),
$('#rooms-sold4').text(),
$('#rooms-sold5').text(),
$('#rooms-sold6').text(),
$('#rooms-sold7').text()],
name: "Room Sold",
color: "#12ccbe",
axis: "Rooms Sold",
width: 2,
markers: { visible: true },
tooltip: {
visible: true,
template: "#= series.name #: #= value #",
font: "12px sans-serif",
},
}],
render: function (e) {
var el = e.sender.element;
el.find("text:contains(Room Revenue)")
.parent()
.prev("path")
.attr("stroke-width", 3);
el.find("text:contains(Room Sold)")
.parent()
.prev("path")
.attr("stroke-width", 0);
},
valueAxes: [
{
visible: false,
majorGridLines: {
visible: true,
width: 0.5,
dashType: "solid",
color: "#ededed"
}
},
{
name: "Rooms Sold",
color: "#4e4141",
visible: false,
line: { visible: false },
majorGridLines: {
visible: false
},
}],
categoryAxis: {
categories: [($('#date1').text()).substring(0, 3),
($('#date2').text()).substring(0, 3),
($('#date3').text()).substring(0, 3),
($('#date4').text()).substring(0, 3),
($('#date5').text()).substring(0, 3),
($('#date6').text()).substring(0, 3),
($('#date7').text()).substring(0, 3)],
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
majorGridLines: {
visible: false,
},
},
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart(), 400);
I want to keep kendo chart background color / path fill color unchanged.
I have a chart.js bar chart that pulls data via an ajax call to a Django APIView. The ajax call returns one dictionary with a stack of data inside I use to customize the chart. Here's the chart.js code:
var current_year = '{% url "saveskore:api-current-year-savings" %}'
$.ajax({
url: current_year,
type: 'GET',
cache: false,
dataType: 'json',
success: function(data) {
var ctx = document.getElementById('current-year-chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data['dates'],
datasets: [
{
label: data['income_label'],
backgroundColor: "#8e5ea2",
data: data['income'],
},
{
label: data['expense_label'],
backgroundColor: 'green',
data: data['expenses'],
},
{
label: data['savings_label'],
backgroundColor: "#3e95cd",
data: data['savings_goal'],
},
{
label: data['avail_label'],
backgroundColor: "#pink",
data: data['avail_to_spend'],
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Savings for ' + data['year']
}
}
});
}
});
Works great. Looks great.
But! I have a django formset on a separate page that updates the table data that the chart pulls from.
When I update the data in the formset and submit, redirecting to the chart page ... NO UPDATE OCCURS.
If I make some code change or otherwise reload the browser, VOILA, the chart updates.
I have read about either cache=false and chart.update(), but find i have not been able to make either work, mainly because the exact details on their use are not clear.
I would really appreciate input on this.
Have you tried chart.destroy() method ? and then build again the chart with the new data .. that works for me.. take a look at my example
let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
try {
if (valor.length > 0) {
$('#grafico').fadeIn('fast');
var canvas = document.getElementById('chart');
let tipGra = $('#slcTipGra').val();
if (flag !== 0) {
xChart.destroy();
}
//rgba(54, 162, 235, 0.2)
if (tipGra === "bar" || tipGra === "horizontalBar") {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
borderWidth: 2,
hoverBackgroundColor: "#3e95cd",
hoverBorderColor: "#3e95cd",
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
color: 'white',
anchor: 'end',
align: 'start',
font:
{
weight: 'bold'
}
}
},
scales: {
yAxes: [{
stacked: true,
gridLines:
{
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
}
};
}
if (tipGra === 'line') {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.borderColor;
},
borderRadius: 4,
color: 'white',
anchor: 'end',
align: 'end',
}
},
showLines: true
};
}
xChart = new Chart(canvas,
{
type: tipGra,
data: data,
options: option
});
flag = 1;
}
else {
$('#grafico').fadeOut('fast');
$('#graficoMessage').fadeIn('slow');
}
} catch (err) {
console.log(err);
}
}
I declare "xChart" as a global variable and a flag to know if it's the first chart to build. The example build 3 different types of charts (Vertical Bar, Horizontal Bar and Line) depending on the selection of the chart type "let tipGra = "$('#slcTipGra').val();"
Hi there I am trying to display the same google chart on the same page. Here is my current code
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Bar chart
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(Mygraph);
function Mygraph() {
$.ajax({
async: false,
url: "GetGraph",
dataType: "json",
success: function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Question');
data.addColumn('number', 'My Perfomance');
data.addColumn('number', 'Peers Performance');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].rateName, jsonData[i].myRate, jsonData[i].peerRate]);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "interval",
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "interval"
}]);
var options = {
title: '',
chartArea: { width: '50%' },
backgroundColor: '#ffffff ',
hAxis: {
title: 'Rating',
minValue: 0,
textStyle: {
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
bold: true,
fontSize: 18,
color: '#4d4d4d'
}
},
vAxis: {
title: 'Performance',
textStyle: {
fontSize: 14,
bold: true,
color: '#848484'
},
titleTextStyle: {
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
});
}
</script>
Question is how to I display the same graph twice. Currently the graph is only showing once. I want it to display twice. I am using Google graphs api Please help. Looking forward to hearing from you. Thanks for your help
I use chart.js to make a line chart but I can't change the color line of my chart, I saw it grey.
My code is...
$(document).ready(function(){
$.ajax({
url: "chart/maderas_Chart.php",
method: "GET",
success: function(data) {
console.log(data);
var hora = [];
var valor = [];
for(var i in data) {
hora.push("Hora " + data[i].hora_nueva);
valor.push(data[i].valor);
}
var chartdata = {
labels: hora,
datasets : [
{
label: 'Dique Las Maderas',
fill: false,
boderColor: "#bae755",
borderDash: [5, 5],
strokeColor: "#e755ba",
pointColor: "#55bae7",
pointStrokeColor: "#55bae7",
pointHighlightFill: "#55bae7",
pointHighlightStroke:"#55bae7",
data: valor
}
]
};
var ctx = document.getElementById("maderas_Chart");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
responsive: true,
title:{
display:true,
text:'Dique Las Maderas'
},
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Hora'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Valor'
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
When I first confgure the chart I can change the colors but when I add more code I can't anymore, I delete all code and still can't change the line color.
I'm using chart.js version 2.7, and jquery.
Thanks in advance...
This is because, you are using deprecated properties (used in ChartJS 1.x) for setting colors. Use the following properties instead (which is applicable for ChartJS 2.7) :
datasets: [{
label: 'Dique Las Maderas',
fill: false,
borderColor: "#bae755",
borderDash: [5, 5],
backgroundColor: "#e755ba",
pointBackgroundColor: "#55bae7",
pointBorderColor: "#55bae7",
pointHoverBackgroundColor: "#55bae7",
pointHoverBorderColor: "#55bae7",
data: valor
}]
I am using joint.js to generate a services flowchart. And I use the below code snippet to create my custom element.
// Create a custom element.
// ------------------------
joint.shapes.custom = {};
// The following custom shape creates a link out of the whole element.
joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
// Note the `<a>` SVG element surrounding the rest of the markup.
markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
defaults: joint.util.deepSupplement({
type: 'custom.ElementLink'
}, joint.shapes.basic.Rect.prototype.defaults)
});
// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------
var supply = new joint.shapes.custom.ElementLink({
position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
attrs: {
rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', cursor: 'pointer' },
text: { text: 'Supply Chain \nManagement', fill: 'white' }
}
});
Problem is that on a single left click on the supply element, the hyperlink does not open. Only when I drag and and release the element, the link opens in a new tab. Kindly suggest me what can be done to overcome this issue. I have disabled user dragging of elements using the
var paper = new joint.dia.Paper({ el: $('#paper'), width: 1040, height: 1000, gridSize: 1, model: graph, interactive: false });
Thanks in advance!
Here is your answer...
you didn't add xlink:show': 'new'. That's why it's not getting open.
create custom shap...
joint.shapes.custom = {};
joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
// Note the `<a>` SVG element surrounding the rest of the markup.
markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
defaults: joint.util.deepSupplement({
type: 'custom.ElementLink'
}, joint.shapes.basic.Rect.prototype.defaults)
});
You Data:
var supply = new joint.shapes.custom.ElementLink({
position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
attrs: {
rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', 'xlink:show': 'new', cursor: 'pointer' },
text: { text: 'Supply Chain \nManagement', fill: 'white' }
}
For more information..check here:
[http://jointjs.com/tutorial/hyperlinks
I hope, it should work for you.