I created an HTML element on my Wix page using Google Charts. My webpage visitors need to fill a questionnaire and the idea would be to give them the results via a pie chart. Here is part of the code of my HTML element:
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx,{
type: 'pie',
data: {
labels:["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"],
datasets: [{
data: [10, 20, 30, 20, 25, 40, 15],
backgroundColor: ["#f97a03", "#52aff0", "#35a11d", "#f052e4", "#853fc2", "#f0f712", "#092978"],
}]
},
options: {}
});
</script>
The code above works great and I can see the chart on the webpage. Now instead of having predetermined data (like 10, 20, 30, 20, 25, 40, 15 above), I would like to use variables whose values are stored in LocalStorage JavaScript (names of variables are the same as per the lables above but with "loc" as a prefix).
I tried:
data: [local.getItem("locrodeo"), local.getItem("loccalypso"),
local.getItem("locsaya"), local.getItem("locbalthazar"),
local.getItem("locluna"), local.getItem("lockiara"),
local.getItem("locmistral")],
But I think APIs don't work with JS under wix HTML component. So I guess I need to send a message from my Page Code to the HTML element with the information in it. Does anyone know how to do that?
From the Wix Help Center, I found that I need to send a message like this:
$w("#myHtmlElement").postMessage("Message for HTML Comp");
And then I need to write code in my HTML element to receive the info:
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
//...
</script>
For clarity, my objective is to have the pie chart showing the values of the variables locrodeo, loccalypso, locsaya, locluna, locbalthazar, locmistral and lockiara (stored in local storage JS).
This example is just about exactly what you want to do: https://www.wix.com/code/home/example/Chart.
Related
I am using jsPdf to create pdf. I am facing a problem, it is creating extra blank pages after creating pages filled with data. It is creating extra 4 to 5 blank pages.
const doc = new jsPDF({ format: 'a4' });
const source = document.getElementById("reports");
doc.setFont("arial", "normal");
doc.setFontSize(5);
doc.html(source, {
callback: function(doc) {
doc.save();
},
x: 10,
y: 10,
width: 140,
windowWidth: 1000,
});
Most probably your element proportions are not correct.
You can view this generate-pdf-from-react-html for correct use of styles and elements sizes.
I have been searching for an answer that will work and have been unable to find one.
I have a game map that I am using for an RP guild. I am using the map to display influence which we hold in that game's world. I have no issue displaying the map if I have it all coming through in echo statements in php, however, what I would like to do is only have the influence areas draw on the map as pulled from the database.
I have the following function which works when called from within my .js file:
function drawInfluence(id, x, y, inf, dis) {
svg = document.getElementById("small_map");
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('id',"c"+id);
c.setAttribute('r',"15");
c.setAttribute('cx',pt.x);
c.setAttribute('cy',pt.y);
c.setAttribute('fill',inf);
c.setAttribute('stroke-width','5');
c.setAttribute('stroke',dis);
svg.appendChild(c);
}
This function works perfect if I call it like this:
$(document).ready(function() {
$("#small_map").load( function() {
drawInfluence(1, 150, 150, "red", "blue");
});
});
However, if I use:
$(document).ready(function() {
$("#small_map").load( function() {
$.ajax({
url: 'scripts/inf_map_load.php',
success: function () {
// There is nothing to do here right now
}
});
});
});
with a PHP file that looks like:
<?php
echo' drawInfluence(1, 150, 150, "red", "blue");';
?>
or like
<?php
echo' <script type="text/javascript">drawInfluence(1, 150, 150, "red", "blue");</script>';
?>
I receive no output at all.
The function is in my .JS file along with my other JQuery callbacks for other functions (which are working perfectly fine.)
I have also tried:
$(document).ready(function() {
$("#small_map").load( function() {
$.ajax({
url: 'scripts/inf_map_load.php',
success: function () {
alert("Testing");
drawInfluence(1, 150, 150, "red", "blue");
}
});
});
});
And the circle will draw where it's supposed to as well as the alert popping up I can't use the drawInfluence from this area though because the end goal is to have the the information for the javascript call to be read from a database which contains multiple rows of data which will each have a unique identifier for hover and click events. Writing the entire document using php echo statements works, but is not the most efficient and I would prefer to use callbacks rather than inline svg javascript.
After playing around with it some more I found that placing an empty div tag with an id and using the following code I was able to get the script to do what I wanted though it draws the influence areas before the map finishes loading. Not a big issue but not aesthetically pleasing either.
In my .JS file:
$(document).ready(function() {
$("#map_load").load("scripts/inf_map_load.php");
});
My PHP file
<?php
echo'<script type="text/javascript">drawInfluence(1, 150, 150, "red", "blue")';
?>
And the empty div which made it work
<div id="map_load"></div>
I still don't know if this was the best way to do what I needed, but it's working now and that was more important at the moment. Appreciate the replies I did get.
I'm exploring C3.js and have been using it to build basic charts. I have built a simple bar chart based on the template that was provided in the C3 website and modified it to display a different color based on the value.
The following is the JS code:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
],
type: 'bar',
colors: {
data1: '#0000ff'
},
color: function(color, d) {
return d.value < 25 ? '#ff0000' : color
}
}
});
The code runs fine and the bar graph is rendered as expected.
When I inspect the HTML, I see an SVG tag (which essentially is the bar graph) that is generated with no ID attribute.
Wanted to know if there is any way to set and access the ID attribute for the SVG tag that is generated.
Thanks in advance!
You can use c3.js oninit callback with d3.js attr function:
var chart = c3.generate({
oninit: function() {
this.svg.attr('id', 'your_id')
},
...
I am using css2pdf#cloudformatter to export my plotly.js svg to pdf. It works nicely, but it does not export the colorbar of the heatmap. I am using the "srctype:'svg'" option to save the svg in exactly the format as it is on my website. Please have a look at the fiddle http://jsfiddle.net/rk9540x5/4/
Here is the script:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
<button onclick="return xepOnline.Formatter.Format('plotly_chart',{render:'download',srctype:'svg' });">Get PDF</button>
<script type="text/javascript">
Chart = document.getElementById('plotly_chart');
var data = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap'
}
];
Plotly.newPlot('plotly_chart', data);
</script>
I did test it without the "srctype:'svg'" option, and this exports also the colorbar together with the plot, but the output does not look like the plot on the webpage anymore: the colorbar gets plotted below the heatmap. This suggests that css2pdf recognizes the div as two separate svg elements - one for the heatmap, and the other one for the colorbar.
It also says on the cloudformatter.com homepage (http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage) that "if srctype:'svg' option is used, the first svg element in the containing div will be formatted alone". How do I get around this? Is there any way to move the colorbar svg element into the heatmap svg element? Here is an image of the DOM - you can see that there are two different svg#s, "infolayer" representing the colorbar svg.
I already tried the following to add the colorbar to the plotly chart, but it does not help:
var colorbar = {
title: test,
titlefont: {
size: 12,
},
titleside: "top",
thickness: 20,
nticks: ticknumber,
tickfont: {
size:10.5
},
outlinewidth: 0,
xpad: 1,
ypad:3
};
Plotly.newPlot('plotly_chart', data).append("colorbar");
Thanks for helping with this issue!
I would like to set the colors in a google chart from my code, and not sure how to do it. I have this in a cshtml page.
<script type="text/javascript">
// Load the Visualization API and the piechart package.
//google.load('visualization', '1.0', { 'packages': ['bar'] });
google.load('visualization', '1.0', { 'packages': ['corechart'] });
var visualization;
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var titleName = "Rounding Eligible";
$("#chartHeader").html(titleName);
var options = {
'backgroundColor': 'transparent',
title: titleName,
subtitle: 'Range of ddd to ddd', seriesType: "bars",isStacked: true,
series: { 0:{color:"#009add"} ,1:{color:"#009844"} ,2: {color:"#ef7521"} ,3: {color:"#89d2e6"},4:{color:"#82bc00"},5:{color:"#f19f53"},6:{color:"#0055b7"},#(Model.NumSeries) : { type: "line", visibleInLegend: false, color: "#FF0000" }},
vAxis:{title: "Count", minValue:10}
};
// Create the data table.
var data = google.visualization.arrayToDataTable(#Html.Raw(Model.ChartJson));
var chart_div = document.getElementById('chartDiv');
var chart = new google.visualization.ComboChart(chart_div);
chart.draw(data, options);
//setup a temp image to gold hold the chart
createHiddenImage('hiddenCanvas1', 'chartDiv', chart.getImageURI());
}
</script>
What I would like to do is replace my colors ( 0:{color:"#009add"} ,1:{color:"#009844"}) to be based on something in the code and do something like
isStacked: true,
series:
#foreach seriesvalue in #Model.seriesValues
{#Html.Raw(seriesvalue);},
Axis:{title: "Count", minValue:10}
I have no idea what is possible to accomplish this, is it best to just pass the whole options object from the model? Basically I can't figure out how to do it.
Just use JSON serialization:
series: #Html.Raw(JsonConvert.SerializeObject(Model.seriesValues))
You'll want to make seriesValues a Dictionary keyed by the number you want associated with each color.
For a deeper dive, see this answer: Using Razor within JavaScript
You can access properties from your model anywhere on the page, including within the script, via:
#Model.MyPropertyName
With that in mind, your javascript can look something like this:
myColor = '#Model.MyGreenColorProperty';
Note the single quotations around the #Model... this is very important, and will not work if the value is not surrounded by the quotes.