With Justinmind, you can create and manage charts and graphs in your prototypes.
There are a few different methods you can use to create charts, check out each method below:
Using Justinmind assets
You can use widgets from Justinmind widget libraries to create a chart.
Charts widget library: Use the charts widget library to see a number of readymade charts to place onto the Canvas. Some contain images of charts that aren’t editable, while others are made of rectangle or line elements that you can move and customize.
To add the Charts widget library to your prototypes:
- Download the library here.
- Go to Justinmind and navigate to the Widgets tab of the main menu. There, click ‘Add/Remove libraries’.
- In the widget library dialog, click to the ‘My libraries’ tab.
- Click ‘Import library’ and browse through your files to find and select the Charts widget library, which will be labeled ‘Charts.jpl’.
- Once you’ve imported the library, click the ‘Add to widgets’ button. Once you’ve done so, click the button again to remove the library.
- Exit the dialog, and look to the Widgets palette. You’ll now see a variety of charts to place in your prototypes.
Build with basic or other widgets: Use the rectangle, line, and other shape widgets to build a chart.
Once you’ve created your chart, you can make it interactive using Resize events. Here’s an example:
Values entered into the Input Text Fields will resize the corresponding rectangle – or bar – in the chart. To recreate this example, just create an “On Click” + “Resize” event for the ‘Submit’ button, and resize each rectangle’s height according to its corresponding Input Text Field’s value.
Using an external embeddable chart resource
Using the HTML widget, you can embed charts generated through websites, such as Google Sheets or Google Charts. Once you’ve created your chart, check to see if the site has an embed feature.
Copy and paste the generated code into the HTML widget into Justinmind.
You might need to manually add the height and width into the embed code so that the entire chart and its data will show in the HTML widget. You can do this at the beginning of the embed code, where it says “iframe”.